Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Trouble Linking Thumbnails to Javascript Slider

    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...)

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Tags for this Thread

    Posting Permissions

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