How to create a widget like the Pick Your Theme widget here?
3 posters
Page 1 of 1
How to create a widget like the Pick Your Theme widget here?
How to create a widget like the Pick Your Theme widget here?
What is the code for it?
What is the code for it?
Diana- Active Poster
-
Posts : 1286
Reputation : 21
Language : English
Re: How to create a widget like the Pick Your Theme widget here?
This would be the code.
Sometimes you can get the code by clicking the source code on the page.
Sometimes you can get the code by clicking the source code on the page.

- Code:
<style type="text/css">
.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 135px}
.picshow_main { position: relative; width: 180px; height: 135px}
.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 180px; height: 135px}
.picshow_change {position: absolute; text-align: left; bottom: 0px; height: 30px; right: 0px; left: 100px;}
.picshow_change img {width:15px; height: 15px}
.picshow_change a { border: 1px solid; display: block; float: left; margin-right: 5px; -display: inline}
a.axx { border-color: #555}
a.axx:hover {border-color: #000}
a.axx img { filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4}
a.axx:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0}
a.bxx { border-color: #000}
a.bxx:hover {border-color: #000}
img{
border:0px}
</style>
<SCRIPT language=javascript>
var counts = 3;
img1 = new Image();
img1.src = 'http://hitskin.com/themes/13/27/62/thumb.png';
img2 = new Image();
img2.src = 'http://hitskin.com/themes/12/62/62/thumb.jpg';
img3 = new Image();
img3.src = 'http://hitskin.com/themes/13/82/61/thumb.png';
var smallImg = new Array();
smallImg[0] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton1.gif';
smallImg[1] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton2.gif';
smallImg[2] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton3.gif';
url1 = 'http://en.hitskin.com/search-a-skin/black-gold-132762.htm';
url2 = 'http://en.hitskin.com/search-a-skin/360-elite-126262.htm';
url3 = 'http://en.hitskin.com/search-a-skin/ipvista-138261.htm';
alt1 = new Image();
alt1.alt = 'Black Gold';
alt2 = new Image();
alt2.alt = '360 Elite';
alt3 = new Image();
alt3.alt = 'IP Vista';
var nn = 1;
var key = 0;
function change_img() {
if (key == 0) {
key = 1;
} else if (document.all) {
document.getElementById("pic").filters[0].Apply();
document.getElementById("pic").filters[0].Play(duration = 2);
}
eval('document.getElementById("pic").src=img' + nn + '.src');
eval('document.getElementById("url_theme").href=url' + nn);
eval('document.getElementById("pic").alt=alt' + nn + '.alt');
if (nn == 1) {
document.getElementById("url_theme").target = "_blank";
document.getElementById("url_theme").style.cursor = "pointer";
} else {
document.getElementById("url_theme").target = "_blank"
document.getElementById("url_theme").style.cursor = "pointer"
}
for ( var i = 1; i <= counts; i++) {
document.getElementById("xxjdjj" + i).className = 'axx';
}
document.getElementById("xxjdjj" + nn).className = 'bxx';
nn++;
if (nn > counts) {
nn = 1;
}
tt = setTimeout('change_img()', 7000);
}
function changeimg(n) {
nn = n;
window.clearInterval(tt);
change_img();
}
function ImageShow() {
document.write('<div class="picshow_main">');
document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
document.write('<div class="picshow_change">');
for ( var i = 0; i < counts; i++) {
document.write('<a href="javascript:changeimg(' + (i + 1)
+ ');" id="xxjdjj' + (i + 1)
+ '" class="axx" target="_self"><img src="' + smallImg[i]
+ '"></a>');
}
document.write('</div></div>');
change_img();
}
</SCRIPT>
<SCRIPT language="javascript" type="text/javascript">
ImageShow();
</SCRIPT>
MrMario- Helper
-
Posts : 22186
Reputation : 1839
Language : test
Re: How to create a widget like the Pick Your Theme widget here?
Thanks, MrMario.
I totally forgot about checking the source code.
That reminds me though - is there anyway to hide the source code cause there have been some people using the things I have spent so much time and effort on?
I totally forgot about checking the source code.
That reminds me though - is there anyway to hide the source code cause there have been some people using the things I have spent so much time and effort on?
Diana- Active Poster
-
Posts : 1286
Reputation : 21
Language : English
MrMario- Helper
-
Posts : 22186
Reputation : 1839
Language : test
Re: How to create a widget like the Pick Your Theme widget here?
Ok thanks, solved! 

Diana- Active Poster
-
Posts : 1286
Reputation : 21
Language : English
Re: How to create a widget like the Pick Your Theme widget here?
Since this thread appears to be solved, I will lock this thread and mark it as solved.

Sanket

Sanket

Sanket- ForumGuru
-
Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai

» Theme pick ?
» Pick your theme
» PICK YOUR THEME wiget. How to add in my forum?
» Can I give my forum members the freedom to pick the theme they like?
» How Could I Create my own theme?
» Pick your theme
» PICK YOUR THEME wiget. How to add in my forum?
» Can I give my forum members the freedom to pick the theme they like?
» How Could I Create my own theme?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum