Trouble Linking Thumbnails to Javascript Slider

ChristyM · 09-19-2012, 02:46 AM

This is the website I am working on:

http://rebeccakush.com/

I want to turn those little brown boxes (which were generated by the javascript) into thumbnail images.

I don't know javascript and I can't figure out how I would connect the thumbnail images to the slider.

Can anyone help? (Thank you in advance...)

devnull69 · 09-19-2012, 09:37 AM

You could add the <img> tags to the <a> anchor tags inside of the <ul> with class "pagination".

Code:

<a href="#3"><img src="thumbnail3.jpg"/></a>

When you do this you will realize that the images won't show. This is due to a CSS rule you specified for ".pagination a" elements

Code:

text-indent: -9999px;

This line should be removed because it will move the thumbnail images out of sight.

vwphillips · 09-19-2012, 11:47 AM

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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#slides_container {
  position:relative;width:519px;height:735px;
}

#slides_container IMG{
  border-Width:0px;
}

#pagination {
  position:relative;width:520px;height:50px;
}

.page {
  position:relative;width:50px;float:left;margin-Left:30px;margin-Top:10px;
}

.pagemouse {
  top:-5px;
}

.pageactive {
  top:5px;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Slider (19-September-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcSlider={

 init:function(o){
  var id=o.ID,nu=o.Display,ms=o.SlideDuration,pag=o.Pagination,obj=document.getElementById(id),w=obj.offsetWidth,h=obj.offsetHeight,clds=obj.childNodes,cld,ary=[],z0=0;
  obj.style.overflow='hidden';
  for (;z0<clds.length;z0++){
   cld=clds[z0].nodeType==1?clds[z0].nodeName.toUpperCase()=='A'?clds[z0].getElementsByTagName('IMG')[0]:clds[z0]:false;
   if (cld){
    cld.style.position='absolute';
    cld.style.left=w+'px';
    cld.style.top='0px';
    cld.style.width=w+'px';
    cld.style.height=h+'px';
    ary.push([cld,'dly'+z0]);
   }
  }
  nu=ary[nu]?nu:0;
  ary[nu][0].style.left='0px';
  o=this['zxc'+id]={
   id:id,
   ary:ary,
   w:w,
   nu:nu,
   ms:typeof(ms)=='number'?ms:1000,
   pary:[]
  }
  if (typeof(pag)=='object'&&this.paginate){
   this.paginate(o,pag);
  }
 },

 GoTo:function(id,nu){
  var o=this['zxc'+id],ud
  if (o&&o.ary[nu]&&nu!=o.nu){
   ud=nu>o.nu;
   clearTimeout(o.ary[o.nu][1]);
   this.animate(o,o.ary[o.nu],0,o.w*(ud?-1:1),new Date(),o.ms);
   clearTimeout(o.ary[nu][1]);
   this.animate(o,o.ary[nu],o.w*(ud?1:-1),0,new Date(),o.ms);
   this.page(o,nu);
   o.nu=nu;
  }
 },

 page:function(o,nu){
  if (o.pary[o.nu]){
   o.pary[o.nu][0].className=o.pary[o.nu][1];
  }
  if (o.pary[nu]){
   o.pary[nu][0].className=o.pary[nu][3];
  }
 },

 animate:function(o,ary,f,t,srt,mS){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   ary[0].style.left=now+'px';
  }
  if (ms<mS){
   this[ary[1]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
  }
  else {
   ary[0].style.left=t+'px';
  }
 },

 paginate:function(o,pag){
  var obj=document.getElementById(pag.ID);
  if (obj){
   var dcls=pag.DefaultClass,cls,clds=obj.childNodes,z0=0
   for (;z0<clds.length;z0++){
    cls=clds[z0].className;
    if (cls&&(' '+cls+' ').indexOf(dcls)){
     this.addevt(clds[z0],'mouseup','GoTo',o.id,o.pary.length);
     this.addevt(clds[z0],'mouseover','mse',o,o.pary.length);
     this.addevt(clds[z0],'mouseout','mse',o,o.pary.length);
     clds[z0].className=o.pary.length!=o.nu?cls:cls+' '+pag.ActiveClass;
     o.pary.push([clds[z0],cls,cls+' '+pag.MouseClass,cls+' '+pag.ActiveClass]);
    }
   }
  }
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
 },

 mse:function(o,nu,e){
  o.pary[nu][0].className=o.pary[nu][nu==o.nu?3:e.type=='mouseout'?1:2];
 }

}

/*]]>*/
</script>



</head>

<body>
<div class="slides">
 <div id="slides_container">
   <a href="" title="" target="_blank"><img src="http://rebeccakush.com/images/rebecca1.jpg" width="519" height="735" alt="Slide 1"></a>
   <a href="" title="" target="_blank"><img src="http://rebeccakush.com/images/rebecca2.jpg" width="519" height="735" alt="Slide 2"></a>
   <a href="" title="" target="_blank"><img src="http://rebeccakush.com/images/rebecca3.jpg" width="519" height="735" alt="Slide 3"></a>
   <a href="" title="" target="_blank"><img src="http://rebeccakush.com/images/rebecca4.jpg" width="519" height="735" alt="Slide 4"></a>
 </div>
 <div id="pagination">
   <img class="page" src="http://rebeccakush.com/images/rebecca1.jpg" alt="Slide 1">
   <img class="page" src="http://rebeccakush.com/images/rebecca2.jpg" alt="Slide 2">
   <img class="page" src="http://rebeccakush.com/images/rebecca3.jpg" alt="Slide 3">
   <img class="page" src="http://rebeccakush.com/images/rebecca4.jpg" alt="Slide 4">
 </div>

</div>

<script type="text/javascript">
/*<![CDATA[*/

zxcSlider.init({
 ID:'slides_container', // the unique ID of the parent DIV.                   (string)
 Display:0,             //(optional) the initial hotel to display.            (number, default = 0)
 SlideDuration:500,     //(optional) the slide duration in milli seconds.     (number, default = 1000)
 Pagination:{           //(optional) pagination options defined as an object. (object, default = no pagination)
  ID:'pagination',         // the unique ID of the pagination parent DIV.                        (string)
  DefaultClass:'page',     // the common class name of the page elements.                        (string)
  MouseClass:'pagemouse',  //(optional) the additional class name of the mouseover page element. (string, default = no mouseover class)
  ActiveClass:'pageactive' //(optional) the additional class name of the active page element.    (string, default = no active class)
 }
})



/*]]>*/
</script>

</body>

</html>