www.webdeveloper.com
+ Reply to Thread
Results 1 to 12 of 12
  1. 10-22-2012 01:47 PM #1
    daysable
    daysable is offline Registered User
    Join Date
    Oct 2011
    Posts
    33

    Top 10 - Show 1 div at a time

    Hi guys,
    I have a top 10 list (Top 10 Reasons To Go To College), that I want to display in a div, but I only want one div(reason) to show at a time. The container will show #1 as default, and to display each div/reason, the user needs to click the right-arrow button to cycle through them....he/she should be able to go back and forth, using the left and right arrows.
    I need a little help with the javascript to make this happen.

    Here is my html to give an idea on what I'm looking for...thanks so much.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
#topReasons {
	height: 76px;
	width: 644px;
	border: 1px solid #e9e9e9;
	float: left;
	margin-top: 20px;
	background-color: #f4f4f4;
}
#topReasons_bkgrd {
	background-color: #e9e9e9;
	float: left;
	height: 27px;
	width: 635px;
	padding-top: 9px;
	padding-left: 9px;
}
#topReasons_header {
	font-size: 16px;
	font-weight: bold;
	color: #d8151b;
	float: left;
	height: 21px;
	width: 370px;
}
#topArrow_B {
	float: left;
	height: 21px;
	width: 22px;
	margin-left: 200px;
}
#topArrow_F {
	float: left;
	height: 21px;
	width: 22px;
	padding-left: 10px;
}
.reasons {
	float: left;
	height: 30px;
	margin-top: 10px;
	margin-left: 10px;
	width: 600px;
	display: none;
}
</style>
<div id="topReasons">
      <div id="topReasons_bkgrd">
      	<div id="topReasons_header">Top 10 Reasons You Should Go to College</div>
      	<div id="topArrow_B"><img src="imgs/img_arrowleft.jpg" width="22" height="17" /></div>
      	<div id="topArrow_F"><img src="imgs/img_arrowright.jpg" width="22" height="17" /></div>
      </div>
   	  <div class="reasons" style="display: block;">1. Reason 1</div>
      <div class="reasons">2. Reason 2</div>
      <div class="reasons">3. Reason 3</div>
      <div class="reasons">4. Reason 4</div>
      <div class="reasons">5. Reason 5</div>
      <div class="reasons">6. Reason 6</div>
      <div class="reasons">7. Reason 7</div>
      <div class="reasons">8. Reason 8</div>
      <div class="reasons">9. Reason 9</div>
      <div class="reasons">10. Reason 10</div>
    </div>        
  </div> 
</html>
    Reply With Quote Reply With Quote
  2. 10-22-2012 08:43 PM #2
    daysable
    daysable is offline Registered User
    Join Date
    Oct 2011
    Posts
    33
    Any help here at all would be awesome. Thank you!
    Reply With Quote Reply With Quote
  3. 10-23-2012 05:30 AM #3
    vwphillips
    vwphillips is offline Super Moderator
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,550
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#topReasons {
	height: 76px;
	width: 644px;
	border: 1px solid #e9e9e9;
	float: left;
	margin-top: 20px;
	background-color: #f4f4f4;
}
#topReasons_bkgrd {
	background-color: #e9e9e9;
	float: left;
	height: 27px;
	width: 635px;
	padding-top: 9px;
	padding-left: 9px;
}
#topReasons_header {
	font-size: 16px;
	font-weight: bold;
	color: #d8151b;
	float: left;
	height: 21px;
	width: 370px;
}
#topArrow_B {
	float: left;
	height: 21px;
	width: 22px;
	margin-left: 200px;
}
#topArrow_F {
	float: left;
	height: 21px;
	width: 22px;
	padding-left: 10px;
}
.reasons {
	float: left;
	height: 30px;
	margin-top: 10px;
	margin-left: 10px;
	width: 600px;
	display: none;
}
</style>

<script type="text/javascript">

function Reveal(id,ud){
 var o=Reveal['zxc'+id],obj=document.getElementById(id),ud=typeof(ud)=='number'&&ud<0?-1:1,divs,z0=0;
 if (obj&&!o){
  divs=obj.getElementsByTagName('DIV');
  o=Reveal['zxc'+id]={
   divs:divs,
   lgth:divs.length-1,
   cnt:0
  }
 }
 if (o){
  o.cnt+=ud;
  o.cnt=o.cnt<0?o.lgth:o.cnt>o.lgth?0:o.cnt;
  for (z0=0;z0<o.divs.length;z0++){
   o.divs[z0].style.display=z0!=o.cnt?'none':'block';
  }
 }
}

</script>
</head>
<body>

 <div id="topReasons">
  <div id="topReasons_bkgrd">
   <div id="topReasons_header">Top 10 Reasons You Should Go to College</div>
   <div id="topArrow_B"><img src="imgs/img_arrowleft.jpg" width="22" height="17" onmouseup="Reveal('tst',1);" /></div>
   <div id="topArrow_F"><img src="imgs/img_arrowright.jpg" width="22" height="17" onmouseup="Reveal('tst',-1);" /></div>
  </div>
  <div id="tst" >
   <div class="reasons" style="display: block;">1. Reason 1</div>
   <div class="reasons">2. Reason 2</div>
   <div class="reasons">3. Reason 3</div>
   <div class="reasons">4. Reason 4</div>
   <div class="reasons">5. Reason 5</div>
   <div class="reasons">6. Reason 6</div>
   <div class="reasons">7. Reason 7</div>
   <div class="reasons">8. Reason 8</div>
   <div class="reasons">9. Reason 9</div>
   <div class="reasons">10. Reason 10</div>
  </div>
 </div>

</body>

</html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org.uk
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  4. 10-23-2012 10:03 AM #4
    daysable
    daysable is offline Registered User
    Join Date
    Oct 2011
    Posts
    33
    Thank you so much Vic!! Your code works perfectly! You're awesome!!

    One last question.
    I also took your code and tried to make it work with the below HTML.
    It's a slideshow - It's 4 slides, and underneath are 4 thumbnails. The 1st slide is shown by default, but as you click the thumbnails it fades to the slide that corresponds with the thumbnail.

    How can this code be tweaked to make this happen??
    Right now, it works, but the slides don't fade (they just change in and out), and in addition, slides 2,3,4 are showing until I click on a thumbnail.

    Thanks again for all your help!

    Code:
    <style type="text/css">
#slider_container {
	height: 378px;
	width: 647px;
}
#slides {
	float: left;
	height: 244px;
	width: 647px;
}
#thumbnails {
	float: left;
	height: 132px;
	width: 647px;
}
.slide {
	float: left;
	height: 244px;
	width: 647px;
}
#thumbnail1 {
	float: left;
	height: 132px;
	width: 152px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e8e8e8;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #e8e8e8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
	padding: 4px;
}
#thumbnail2 {
	float: left;
	height: 132px;
	width: 153px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e8e8e8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
	padding: 4px
}
#thumbnail3 {
	float: left;
	height: 132px;
	width: 152px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e8e8e8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
	padding: 4px
}
#thumbnail4 {
	float: left;
	height: 132px;
	width: 153px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e8e8e8;
	padding: 4px

}

body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.bold_blue {
	font-size: 12px;
	font-weight: bold;
	color: #3459F5;
	padding-top: 5px;
}
.font10 {
	font-size: 10px;
	color: #3459F5;
}
</style>
<script type="text/javascript">

function Reveal(id,ud){
 var o=Reveal['zxc'+id],obj=document.getElementById(id),ud=typeof(ud)=='number'&&ud<0?-1:1,divs,z0=0;
 if (obj&&!o){
  divs=obj.getElementsByTagName('DIV');
  o=Reveal['zxc'+id]={
   divs:divs,
   lgth:divs.length-1,
   cnt:0
  }
 }
 if (o){
  o.cnt+=ud;
  o.cnt=o.cnt<0?o.lgth:o.cnt>o.lgth?0:o.cnt;
  for (z0=0;z0<o.divs.length;z0++){
   o.divs[z0].style.display=z0!=o.cnt?'none':'block';
  }
 }
}

</script>
<div id="slider_container">
  <div id="slides">
    <div class="slide" style="display: block;"><img src="img/slide_1.jpg" width="647" height="244"></div>
    <div class="slide" style="display: block;"><img src="img/slide_2.jpg" width="647" height="244"></div>
    <div class="slide" style="display: block;"><img src="img/slide_3.jpg" width="647" height="244"></div>
    <div class="slide" style="display: block;"><img src="img/slide_4.jpg" width="647" height="244"></div>
  
  </div>
  <div id="thumbnails">
    <div id="thumbnail1"><img src="img/thumbnail_1.jpg" width="151" height="74" onmouseup="Reveal('slides',1);"><div class="bold_blue">Thumbnail title 1</div>
    <div class="font10">description</div></div>
    <div id="thumbnail2"><img src="img/thumbnail_2.jpg" width="151" height="74" onmouseup="Reveal('slides',1);"><div class="bold_blue">Thumbnail title 2</div></div>
    <div id="thumbnail3"><img src="img/thumbnail_3.jpg" width="151" height="74" onmouseup="Reveal('slides',1);"><div class="bold_blue">Thumbnail title 3</div></div>
    <div id="thumbnail4"><img src="img/thumbnail_4.jpg" width="151" height="74" onmouseup="Reveal('slides',1);"><div class="bold_blue">Thumbnail title 4</div></div>
  
  </div>
</div>
    Reply With Quote Reply With Quote
  5. 10-23-2012 10:07 AM #5
    daysable
    daysable is offline Registered User
    Join Date
    Oct 2011
    Posts
    33
    Also, i don't know if this is possible with just javascript, but can the slides fade in and out slowly once when the person first visits the website?
    So it would fade through slide,1,2,3,4 and then stop at slide 1.

    Thanks!
    Reply With Quote Reply With Quote
  6. 10-23-2012 11:36 AM #6
    vwphillips
    vwphillips is offline Super Moderator
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,550
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">
#slider_container {
	height: 378px;
	width: 647px;
}
#slides {
	position:relative;
	height: 244px;
	width: 647px;
}
#thumbnails {
	float: left;
	height: 132px;
	width: 647px;
}
.slide {
	position:absolute;
    left:0px;
    top:0px;
	height: 244px;
	width: 647px;
}
#thumbnail1 {
	float: left;
	height: 132px;
	width: 152px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e8e8e8;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #e8e8e8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
	padding: 4px;
}
#thumbnail2 {
	float: left;
	height: 132px;
	width: 153px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e8e8e8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
	padding: 4px
}
#thumbnail3 {
	float: left;
	height: 132px;
	width: 152px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e8e8e8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
	padding: 4px
}
#thumbnail4 {
	float: left;
	height: 132px;
	width: 153px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e8e8e8;
	padding: 4px

}

body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.bold_blue {
	font-size: 12px;
	font-weight: bold;
	color: #3459F5;
	padding-top: 5px;
}
.font10 {
	font-size: 10px;
	color: #3459F5;
}
</style>
<script type="text/javascript">

function zxcFade(id,ms,hold){
 var o=zxcFade['zxc'+id],obj=document.getElementById(id),ms=typeof(ms)=='number'?ms:1000,divs,z0=0;
 if (obj&&!o){
  divs=obj.getElementsByTagName('DIV'),lgth=divs.length-1,ary=[];
  for (var z0=lgth;z0>=0;z0--){
   divs[z0].style.zIndex=z0<lgth?'0':'1';
   zxcOpacity(divs[z0],z0<lgth?0:100);
   ary.push([divs[z0],z0<lgth?0:100,'dly'+z0]);
  }
  o=zxcFade['zxc'+id]={
   id:id,
   ary:ary,
   lgth:ary.length-1,
   cnt:0,
   ms:ms,
   hold:typeof(hold)=='number'?hold:ms*2
  }
 }
 zxcAuto(id,o.hold);
}

function zxcAuto(id,ms){
 var o=zxcFade['zxc'+id];
 if (o){
  o.dly=setTimeout(function(){ zxcGoTo(id,o.cnt+1,true); },o.hold);
 }
}

function zxcGoTo(id,nu,auto){
 var o=zxcFade['zxc'+id];
 if (o&&o.ary[nu]){
  clearTimeout(o.dly);
  o.auto=auto===true;
  ary[o.cnt][0].style.zIndex='0';
  clearTimeout(o[o.ary[o.cnt][2]]);
  this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],0,new Date(),o.ms);
  o.cnt=nu;
  ary[o.cnt][0].style.zIndex='1';
  clearTimeout(o[o.ary[o.cnt][2]]);
  this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],100,new Date(),o.ms);
 }
}

function animate(o,ary,f,t,srt,mS,auto){
 var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
 if (isFinite(now)){
  zxcOpacity(ary[0],now);
  ary[1]=now;
 }
 if (ms<mS){
  o[ary[2]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,auto); },10);
 }
 else {
  zxcOpacity(ary[0],t);
  ary[1]=t;
  if (o.auto&&t==100){
   if (o.cnt==o.lgth){
    zxcGoTo(o.id,0);
   }
   else {
    zxcAuto(o.id,o.hold);
   }
  }
 }
}

function zxcOpacity(obj,opc){
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

</script>
</head>
<body onload="zxcFade('slides',1000,1000);">
<div id="slider_container">
  <div id="slides">
    <div class="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="647" height="244"></div>
    <div class="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="647" height="244"></div>
    <div class="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="647" height="244"></div>
    <div class="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="647" height="244"></div>

  </div>
  <div id="thumbnails">
    <div id="thumbnail1"><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="151" height="74" onmouseup="zxcGoTo('slides',0);"><div class="bold_blue">Thumbnail title 1</div>
    <div class="font10">description</div></div>
    <div id="thumbnail2"><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="151" height="74" onmouseup="zxcGoTo('slides',1);"><div class="bold_blue">Thumbnail title 2</div></div>
    <div id="thumbnail3"><img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="151" height="74" onmouseup="zxcGoTo('slides',2);"><div class="bold_blue">Thumbnail title 3</div></div>
    <div id="thumbnail4"><img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="151" height="74" onmouseup="zxcGoTo('slides',3);"><div class="bold_blue">Thumbnail title 4</div></div>

  </div>
</div>

</body>
</html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org.uk
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  7. 10-23-2012 11:57 AM #7
    daysable
    daysable is offline Registered User
    Join Date
    Oct 2011
    Posts
    33
    This is awesome Vic. Thanks so much! Just 3 more questions, then I'm done heh!
    -Can you point me to where I can adjust the timing of the first 4 slides?? They are moving a bit too fast.
    -Is there a way that when you hover your mouse over the thumbnail imgs that the mouse can turn into a hand?? (not sure if this is possible, just figured i'd ask!)
    -When you click on a thumbnail, can the background of that thumbnail area go to color #e7e7e7 ??
    So when a user clicks the thumbnails and the slides change he/she knows where they are.

    Thanks again!
    Last edited by daysable; 10-23-2012 at 12:19 PM.
    Reply With Quote Reply With Quote
  8. 10-23-2012 12:27 PM #8
    daysable
    daysable is offline Registered User
    Join Date
    Oct 2011
    Posts
    33
    I answered one of my questions. I changed the cursor to the pointer by adding the CSS code "cursor: pointer;"
    Reply With Quote Reply With Quote
  9. 10-24-2012 03:44 AM #9
    vwphillips
    vwphillips is offline Super Moderator
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,550
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">
#slider_container {
	height: 378px;
	width: 647px;
}
#slides {
	position:relative;
	height: 244px;
	width: 647px;
}
#thumbnails {
	float: left;
	height: 132px;
	width: 647px;
}
#thumbnails IMG{
	cursor: pointer;
}

.active {
  border:solid black 2px;
}

.slide {
	position:absolute;
    left:0px;
    top:0px;
	height: 244px;
	width: 647px;
}
#thumbnail1 {
	float: left;
	height: 132px;
	width: 152px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e8e8e8;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #e8e8e8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
	padding: 4px;
}
#thumbnail2 {
	float: left;
	height: 132px;
	width: 153px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e8e8e8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
	padding: 4px
}
#thumbnail3 {
	float: left;
	height: 132px;
	width: 152px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e8e8e8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
	padding: 4px
}
#thumbnail4 {
	float: left;
	height: 132px;
	width: 153px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e8e8e8;
	padding: 4px

}

body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.bold_blue {
	font-size: 12px;
	font-weight: bold;
	color: #3459F5;
	padding-top: 5px;
}
.font10 {
	font-size: 10px;
	color: #3459F5;
}
</style>
<script type="text/javascript">

function zxcFade(o){
 var id=o.SlideID,oop=zxcFade['zxc'+id],obj=document.getElementById(id),ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.AutoHold,tn=document.getElementById(o.ThumbnailID),tn=tn?tn.getElementsByTagName('IMG'):[],tary=[],cls=o.ActiveClass,img,divs,z0=0;
 if (obj&&!oop){
  divs=obj.getElementsByTagName('DIV'),lgth=divs.length-1,ary=[];
  for (var z0=lgth;z0>=0;z0--){
   divs[z0].style.zIndex=z0<lgth?'0':'1';
   zxcOpacity(divs[z0],z0<lgth?0:100);
   img=tn[z0];
   if (img&&z0==0){
    img.className=img.className+' '+cls;
   }
   tary.push([img,img?img.className+' ':'']);
   ary.push([divs[z0],z0<lgth?0:100,'dly'+z0]);
  }
  tary.reverse();
  zxcFade['zxc'+id]={
   id:id,
   ary:ary,
   tary:tary,
   cls:cls,
   lgth:ary.length-1,
   cnt:0,
   ms:ms,
   hold:typeof(hold)=='number'?hold:ms*2
  }
  zxcAuto(id,o.hold);
 }
}

function zxcAuto(id,ms){
 var o=zxcFade['zxc'+id];
 if (o){
  o.dly=setTimeout(function(){ zxcGoTo(id,o.cnt+1,true); },o.hold);
 }
}

function zxcGoTo(id,nu,auto){
 var o=zxcFade['zxc'+id];
 if (o&&o.ary[nu]){
  clearTimeout(o.dly);
  o.auto=auto===true;
  if (o.tary[o.cnt][0]){
   o.tary[o.cnt][0].className=o.tary[o.cnt][1];
  }
  ary[o.cnt][0].style.zIndex='0';
  clearTimeout(o[o.ary[o.cnt][2]]);
  this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],0,new Date(),o.ms);
  o.cnt=nu;
  if (o.tary[o.cnt][0]){
   o.tary[o.cnt][0].className=o.tary[o.cnt][1]+o.cls;
  }
  ary[o.cnt][0].style.zIndex='1';
  clearTimeout(o[o.ary[o.cnt][2]]);
  this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],100,new Date(),o.ms);
 }
}

function animate(o,ary,f,t,srt,mS,auto){
 var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
 if (isFinite(now)){
  zxcOpacity(ary[0],now);
  ary[1]=now;
 }
 if (ms<mS){
  o[ary[2]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,auto); },10);
 }
 else {
  zxcOpacity(ary[0],t);
  ary[1]=t;
  if (o.auto&&t==100){
   if (o.cnt==o.lgth){
    o.dly=setTimeout(function(){ zxcGoTo(o.id,0,false); },o.hold);
   }
   else {
    zxcAuto(o.id,o.hold);
   }
  }
 }
}

function zxcOpacity(obj,opc){
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

window.onload=function(){

zxcFade({
 SlideID:'slides',
 FadeDuration:1000,
 AutoHold:1000,
 ThumbnailID:'thumbnails',
 ActiveClass:'active'
});

}

</script>
</head>
<body >
<div id="slider_container">
  <div id="slides">
    <div class="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="647" height="244"></div>
    <div class="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="647" height="244"></div>
    <div class="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="647" height="244"></div>
    <div class="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="647" height="244"></div>

  </div>
  <div id="thumbnails">
    <div id="thumbnail1"><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="151" height="74" onmouseup="zxcGoTo('slides',0);"><div class="bold_blue">Thumbnail title 1</div>
    <div class="font10">description</div></div>
    <div id="thumbnail2"><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="151" height="74" onmouseup="zxcGoTo('slides',1);"><div class="bold_blue">Thumbnail title 2</div></div>
    <div id="thumbnail3"><img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="151" height="74" onmouseup="zxcGoTo('slides',2);"><div class="bold_blue">Thumbnail title 3</div></div>
    <div id="thumbnail4"><img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="151" height="74" onmouseup="zxcGoTo('slides',3);"><div class="bold_blue">Thumbnail title 4</div></div>

  </div>
</div>

</body>
</html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org.uk
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  10. 10-24-2012 06:21 AM #10
    daysable
    daysable is offline Registered User
    Join Date
    Oct 2011
    Posts
    33
    Thanks again Vic!
    The #1 thumbnail though seems to stay highlighted even when I am clicking on the other tiles. Can the only active thumbnail be highlighted??
    And I was thinking more along the lines of the background of the thumbnail highlighting to gray (not the img itself)....so the background of the thumbnail that (currently white) changing to gray.

    Thank you!
    Reply With Quote Reply With Quote
  11. 10-24-2012 08:19 AM #11
    vwphillips
    vwphillips is offline Super Moderator
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,550
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">
#slider_container {
	height: 378px;
	width: 647px;
}
#slides {
	position:relative;
	height: 244px;
	width: 647px;
}
#thumbnails {
	float: left;
	height: 132px;
	width: 647px;
}
#thumbnails IMG{
	cursor: pointer;
}

.default {
  background-Color:green;
}

.active {
  background-Color:red;
}

.slide {
	position:absolute;
    left:0px;
    top:0px;
	height: 244px;
	width: 647px;
}
#thumbnail1 {
	float: left;
	height: 132px;
	width: 152px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e8e8e8;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #e8e8e8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
	padding: 4px;
}
#thumbnail2 {
	float: left;
	height: 132px;
	width: 153px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e8e8e8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
	padding: 4px
}
#thumbnail3 {
	float: left;
	height: 132px;
	width: 152px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e8e8e8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
	padding: 4px
}
#thumbnail4 {
	float: left;
	height: 132px;
	width: 153px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e8e8e8;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e8e8e8;
	padding: 4px

}

body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.bold_blue {
	font-size: 12px;
	font-weight: bold;
	color: #3459F5;
	padding-top: 5px;
}
.font10 {
	font-size: 10px;
	color: #3459F5;
}
</style>
<script type="text/javascript">

function zxcFade(o){
 var id=o.SlideID,oop=zxcFade['zxc'+id],obj=document.getElementById(id),ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.AutoHold,tn=document.getElementById(o.ThumbnailID),tn=tn.childNodes,tary=[],cls=o.ActiveClass,img,divs,z0=0,z1=0;
 if (obj&&!oop){
  divs=obj.getElementsByTagName('DIV'),lgth=divs.length-1,ary=[];
  for (var z0=lgth;z0>=0;z0--){
   divs[z0].style.zIndex=z0<lgth?'0':'1';
   zxcOpacity(divs[z0],z0<lgth?0:100);
   img=tn[z0];
   ary.push([divs[z0],z0<lgth?0:100,'dly'+z0]);
  }
  for (var z1=0;z1<tn.length;z1++){
   if (tn[z1].nodeType==1){
    tary.push([tn[z1],tn[z1].className+' ']);
    if (tary.length==1){
     tn[z1].className=tn[z1].className+' '+cls;
    }
   }
  }
  zxcFade['zxc'+id]={
   id:id,
   ary:ary,
   tary:tary,
   cls:cls,
   lgth:ary.length-1,
   cnt:0,
   ms:ms,
   hold:typeof(hold)=='number'?hold:ms*2
  }
  zxcAuto(id,o.hold);
 }
}

function zxcAuto(id,ms){
 var o=zxcFade['zxc'+id];
 if (o){
  o.dly=setTimeout(function(){ zxcGoTo(id,o.cnt+1,true); },o.hold);
 }
}

function zxcGoTo(id,nu,auto){
 var o=zxcFade['zxc'+id];
 if (o&&o.ary[nu]){
  clearTimeout(o.dly);
  o.auto=auto===true;
  if (o.tary[o.cnt][0]){
   o.tary[o.cnt][0].className=o.tary[o.cnt][1];
  }
  ary[o.cnt][0].style.zIndex='0';
  clearTimeout(o[o.ary[o.cnt][2]]);
  this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],0,new Date(),o.ms);
  o.cnt=nu;
  if (o.tary[o.cnt][0]){
   o.tary[o.cnt][0].className=o.tary[o.cnt][1]+o.cls;
  }
  ary[o.cnt][0].style.zIndex='1';
  clearTimeout(o[o.ary[o.cnt][2]]);
  this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],100,new Date(),o.ms);
 }
}

function animate(o,ary,f,t,srt,mS,auto){
 var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
 if (isFinite(now)){
  zxcOpacity(ary[0],now);
  ary[1]=now;
 }
 if (ms<mS){
  o[ary[2]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,auto); },10);
 }
 else {
  zxcOpacity(ary[0],t);
  ary[1]=t;
  if (o.auto&&t==100){
   if (o.cnt==o.lgth){
    o.dly=setTimeout(function(){ zxcGoTo(o.id,0,false); },o.hold);
   }
   else {
    zxcAuto(o.id,o.hold);
   }
  }
 }
}

function zxcOpacity(obj,opc){
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

window.onload=function(){

zxcFade({
 SlideID:'slides',
 FadeDuration:1000,
 AutoHold:1000,
 ThumbnailID:'thumbnails',
 ActiveClass:'active'
});

}

</script>
</head>
<body >
<div id="slider_container">
  <div id="slides">
    <div class="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="647" height="244"></div>
    <div class="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="647" height="244"></div>
    <div class="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="647" height="244"></div>
    <div class="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="647" height="244"></div>

  </div>
  <div id="thumbnails">
    <div id="thumbnail1" class="default" ><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="151" height="74" onmouseup="zxcGoTo('slides',0);"><div class="bold_blue">Thumbnail title 1</div><div class="font10">description</div></div>
    <div id="thumbnail2" class="default" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="151" height="74" onmouseup="zxcGoTo('slides',1);"><div class="bold_blue">Thumbnail title 2</div></div>
    <div id="thumbnail3" class="default" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="151" height="74" onmouseup="zxcGoTo('slides',2);"><div class="bold_blue">Thumbnail title 3</div></div>
    <div id="thumbnail4" class="default" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="151" height="74" onmouseup="zxcGoTo('slides',3);"><div class="bold_blue">Thumbnail title 4</div></div>

  </div>
</div>

</body>
</html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org.uk
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  12. 10-25-2012 08:07 PM #12
    daysable
    daysable is offline Registered User
    Join Date
    Oct 2011
    Posts
    33
    Thank you so much Vic. This was absolutely perfect! You're a genius!
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Forum Rules

 HTML5 Development Center



Recent Articles