Results 1 to 5 of 5

Thread: Dots showing images

  1. #1
    Join Date
    Sep 2010
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Dots showing images

    1) Script Title: Continuous Reel Slideshow

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lslideshow.htm

    3) Describe problem: Is it possible to have dots for the number of images rather next/previous buttons. I'd ideally like to have a grey dot for images that aren't show then a, say black, dot for the current image. Then when you click on one of the dots it shows that image?

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    667
    Thanks
    97
    Thanked 26 Times in 26 Posts

    Default

    do you mean like the dots at the bottom of this slider?
    http://cssslider.com/

  3. #3
    Join Date
    Sep 2010
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    yep that's the sort of thing I'm after. Although I don't want to dots to show the image when you roll over them. I also don't want the image to move other than when it scrolls if that makes any sense.

  4. #4
    Join Date
    Jan 2009
    Location
    NH
    Posts
    667
    Thanks
    97
    Thanked 26 Times in 26 Posts

    Default

    in the settings you can choose to enable the dots to show a thumbnail preview or not have them
    http://cssslider.com/help/using-the-...sslider-5.html

    Click image for larger version. 

Name:	general-settings-1.jpg 
Views:	111 
Size:	76.5 KB 
ID:	5656

    you would leave the show bullets navigation unchecked

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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[*/
    
    #myreel {
      position:relative;width:300px;height:200px;border:solid red 1px;
    }
    
    #paginate {
      position:relative;width:300px;height:20px;border:solid red 1px;
    }
    
    #paginate .page {
      position:relative;float:left;margin:5px;width:10px;height:10px;background-Color:#C9C9C9;border-radius: 5px;;
    }
    
    #paginate  .active{
      position:relative;width:10px;height:10px;border:solid #000000 1px;background-Color:#000000;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
    <div id="myreel" ></div>
    <div id="paginate" >
    
    </div>
    
    <input id="b1" type="button" name="" value="Next" />
    <input id="b2" type="button" name="" value="Prev" />
    <input type="button" name="" value="GoTo 1" onclick="zxcReelSlideShow.GoTo('myreel',0)"/>
    <input type="button" name="" value="GoTo 2" onclick="zxcReelSlideShow.GoTo('myreel',1)"/>
    <input id="b5" type="button" name="" value="GoTo 3" onclick="zxcReelSlideShow.GoTo('myreel',2)"/>
    <input type="button" name="" value="GoTo 4" onclick="zxcReelSlideShow.GoTo('myreel',3)"/>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Reel Slide Show (02-April-2015)
    // by: Vic Phillips - http://www.vicsjavascripts.org/
    
    var zxcReelSlideShow={
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o&&o.a[n]){
       this.Pause(id);
       if (n!=o.n){
        o.ud=n>o.n?1:-1;
        this.rotate(o,n);
       }
      }
     },
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=oop['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     Init:function(o){
      var id=o.WrapperID,a=o.ImageArray,p=document.getElementById(id),z0=0;
      if (p&&a instanceof Array){
       o.id=id;
       o.p=p;
       for (;z0<a.length;z0++){
        if (a[z0][0]&&typeof(a[z0][0])=='string'){
         a[z0][3]=new Image();
         a[z0][3].src=a[z0][0];
        }
       }
       this.load(o,a);
      }
     },
    
     load:function(o,a){
      clearTimeout(o.to);
      var oop=this,z0=0,z1=0;
      for (;z0<a.length;z0++){
       if (a[z0][3]&&a[z0][3].width<40){
        o.to=setTimeout(function(){ oop.load(o,a); },200);
       }
      }
      oop.ready(o,a);
     },
    
     ready:function(o,a){
      var d=o.Cookie,d=typeof(d)=='string'&&d.charAt(0).toUpperCase()=='S'?'S':typeof(d)=='number'?d:-1,c=this.cookie(o.id),n=d!=-1&&c?c*1:0;
      var m=o.Orientation,ms=o.SlideDuration,ah=o.AutoHold,as=o.AutoStart,add=o.AddEvents,add=add instanceof Array?add:[],w=this.css(o.p,'width'),h=this.css(o.p,'height'),m=typeof(m)=='string'?m.charAt(0).toUpperCase():'H',m=m=='V'?['top','left',h]:['left','top',w];
      var p=document.getElementById(o.PaginateID),clds=p?p.getElementsByTagName('*'):[],d,an,i,z0=0,z1=0,z2=0,z3=0;
      o.a=[];
      for (;z0<a.length;z0++){
       if (a[z0][3]&&a[z0][3].width>40){
        d=document.createElement('DIV');
        o.p.appendChild(d);
        an=document.createElement('A');
        d.appendChild(an);
        i=document.createElement('IMG');
        i.src=a[z0][0];
        an.appendChild(i);
        i.style.position=d.style.position='absolute';
        d.style[m[0]]=(o.a.length!=n?m[2]:0)+'px';
        d.style[m[1]]='0px';
        d.style.width=w+'px';
        d.style.heigth=h+'px';
        i.style.left=(w-i.width)/2+'px';
        i.style.top=(h-i.height)/2+'px';
        a[z0][1]?a.href=a[z0][1]:null;
        a[z0][2]?a.target=a[z0][2]:null;
        o.a.push([d,m[0]]);
       }
      }
      o.l=o.a.length;
      o.pgs=[];
      for (;z1<clds.length;z1++){
       c=clds[z1].className;
       if ((' '+c+' ').indexOf(' page ')>=0){
        o.pgs.push([clds[z1],c]);
       }
      }
      for (;z2<o.l;z2++){
       if (!o.pgs[z2]){
        d=document.createElement('DIV');
        d.className='page';
        o.pgs[z2]=[d,'page'];
        p?p.appendChild(d):null;
       }
       z2!=n?null:o.pgs[z2][0].className+=' active';
       this.addevt(o.pgs[z2][0],'click','GoTo',o.id,z2);
      }
      for (;z3<add.length;z3++){
       if (add[z3]&&add[z3][0]){
        p=document.getElementById(add[z3][0]);
        if (p&&this[add[z3][2]]){
         c=add[z3][1];
         this.addevt(p,c=='mouseover'||c=='mouseout'||c=='mouseup'||c=='mousedown'||c=='mousemove'?c:'click',add[z3][2],o.id,add[z3][3]);
        }
       }
      }
      o.days=d;
      o.sz=m[2];
      o.ms=typeof(ms)=='number'&&ms>0?ms:1000;
      o.h=typeof(ah)=='number'&&ah>0?ah:o.ms*4;
      o.n=n;
      o.ud=1;
      this['zxc'+o.id]=o;
      o.p.style.overflow='hidden';
      typeof(as)=='number'&&as>0?this.Auto(o.id,as):null;
     },
    
     rotate:function(o,n){
      this.Pause(o.id);
      o.auto=n===true;
      n=o.auto?o.n+o.ud:n;
      n=(n+o.l)%o.l;
      this.animate(o,o.a[o.n],0,o.sz*(o.ud>0?-1:1),new Date(),o.ms);
      this.animate(o,o.a[n],o.sz*(o.ud>0?1:-1),0,new Date(),o.ms,true);
      o.pgs[o.n][0].className=o.pgs[o.n][1];
      o.n=n;
      o.pgs[o.n][0].className=o.pgs[o.n][1]+' active';
      o.days!=-1?document.cookie=o.id+'='+n+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path/;':';'):null;
     },
    
     animate:function(o,a,f,t,srt,mS,x){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[0].style[a[1]]=n+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,x); },10);
      }
      else {
       a[0].style[a[1]]=t+'px';
       x===true&&o.auto?oop.Auto(o.id,o.h):null;
      }
     },
    
     css:function(o,p){
      return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
     },
    
     cookie:function(nme){
      var re=new RegExp(nme+'=[^;]+','i');
      return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
     },
    
     setc:function(o,n,v){
      o.days!=-1?document.cookie=n+'='+v+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path/;':';'):null;
     },
    
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcReelSlideShow.Init({
    	WrapperID:"myreel", //ID of blank DIV on page to house Slideshow
    	ImageArray:[
    		["http://www.vicsjavascripts.org/StdImages/1.gif"], //["image_path", "optional_link", "optional_target"]
    		["http://www.vicsjavascripts.org/StdImages/2.gif", "http://en.wikipedia.org/wiki/Cave", "_new"],
    		["http://www.vicsjavascripts.org/StdImages/3.gif"],
    		["http://www.vicsjavascripts.org/StdImages/4.gif"] //<--no trailing comma after very last image element!
    	],
    	Orientation:"h", //Valid values: "h" or "v"
    	Cookie:1, //remember last viewed slide and recall within same session?
    	SlideDuration:1000, //transition duration (milliseconds)
        AutoHold:2000,
        AutoStart:2000,
        PaginateID:'paginate', //(optional) the unique ID of the paginate wrapper element.
        AddEvents:[
        // field 0 = the unique ID of the element.
        // field 1 = the event type.
        // field 2 = the script function name.
        // field 3 = the command parameter to pass to the function.
         ['b1','click','Next',1],
         ['b2','click','Next',-1],
         ['b5','click','GoTo',2],
         ['myreel','mouseover','Pause'],
         ['myreel','mouseout','Auto']
        ]
    });
    
    
    /*]]>*/
    </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/

Similar Threads

  1. Resolved IE 8 is not showing images
    By gurmeet in forum CSS
    Replies: 1
    Last Post: 12-20-2010, 02:31 PM
  2. Script images not showing
    By farrolla in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-03-2010, 12:28 PM
  3. images not showing, just the X's
    By getpage in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 04-22-2010, 01:27 AM
  4. White dots appear on some images
    By kdumas in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-18-2008, 04:14 AM
  5. Window Images Not Showing
    By psquillace in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 04-05-2008, 01:22 PM

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
  •