The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to create a widget like the Pick Your Theme widget here?

View previous topic View next topic Go down

Solved How to create a widget like the Pick Your Theme widget here?

Post by Diana on October 23rd 2010, 1:59 pm

How to create a widget like the Pick Your Theme widget here?
What is the code for it?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: How to create a widget like the Pick Your Theme widget here?

Post by MrMario on October 23rd 2010, 6:32 pm

This would be the code.

Sometimes you can get the code by clicking the source code on the page. Wink
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://illiweb.com/fa/optimisation_fdf/common/bouton1.gif';
 
 smallImg[1] = 'http://illiweb.com/fa/optimisation_fdf/common/bouton2.gif';
 
 smallImg[2] = 'http://illiweb.com/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
Helper

Male Posts : 22186
Reputation : 1830
Language : test

http://test.com

Back to top Go down

Solved Re: How to create a widget like the Pick Your Theme widget here?

Post by Diana on October 23rd 2010, 7:02 pm

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?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: How to create a widget like the Pick Your Theme widget here?

Post by MrMario on October 23rd 2010, 7:17 pm

Nope.

MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1830
Language : test

http://test.com

Back to top Go down

Solved Re: How to create a widget like the Pick Your Theme widget here?

Post by Diana on October 23rd 2010, 8:10 pm

Ok thanks, solved! Smile

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: How to create a widget like the Pick Your Theme widget here?

Post by Sanket on October 24th 2010, 5:44 am

Since this thread appears to be solved, I will lock this thread and mark it as solved.


Sanket Smile


Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum