Results 1 to 5 of 5

Thread: Single image slideshow

  1. #1
    Join Date
    Nov 2007
    Posts
    151
    Thanks
    67
    Thanked 0 Times in 0 Posts

    Question Single image slideshow

    I'm looking for a basic image slideshow, similar to: this.

    However my photos have different width and height and I want the slider to enable it.


    Thanks in advanced!

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    The best i can suggest is this: http://www.dynamicdrive.com/dynamici...box2/index.htm.
    Check Demo 2
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. #3
    Join Date
    Nov 2007
    Posts
    151
    Thanks
    67
    Thanked 0 Times in 0 Posts

    Default

    thank you but it doesn't match with what I'm looking for

  4. #4
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,287
    Thanks
    97
    Thanked 104 Times in 102 Posts

    Default

    To choose the lesser of two evils is still to choose evil. My personal site

  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[*/
    .ss {
      position:relative;width:300px;height:300px;border:solid red 1px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
    <div id="ss1" class="ss" >
     <img src="http://pinuy-binuy.co.il/images/project1.jpg" width="200" />
     <img src="http://pinuy-binuy.co.il/images/project2.jpg" />
     <img src="http://pinuy-binuy.co.il/images/project3.jpg" />
    </div>
    
    <input type="button" name="" value="NEXT" onclick="zxcSSS.Next('ss1',1);" />
    <input type="button" name="" value="BACK" onclick="zxcSSS.Next('ss1',-1);" />
    <input type="button" name="" value="Pause" onclick="zxcSSS.Pause('ss1');" />
    <input type="button" name="" value="Auto" onclick="zxcSSS.Auto('ss1');" />
    <input type="button" name="" value="GoTo 0" onclick="zxcSSS.GoTo('ss1',0);" />
    <input type="button" name="" value="GoTo 1" onclick="zxcSSS.GoTo('ss1',1);" />
    <input type="button" name="" value="GoTo 2" onclick="zxcSSS.GoTo('ss1',2);" />
    
    
    <div id="ss2" class="ss"  onmouseover="zxcSSS.Pause('ss2');" onmouseout="zxcSSS.Auto('ss2');" >
     <img src="http://pinuy-binuy.co.il/images/project1.jpg" width="200" />
     <img src="http://pinuy-binuy.co.il/images/project2.jpg" />
     <img src="http://pinuy-binuy.co.il/images/project3.jpg" />
    </div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Slide Show (31-July-2014)
    // by: Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcSSS={
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(id);;
       if (o.a[n]&&o.n!=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 o=this['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ zxcSSS.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 p=document.getElementById(o.ID),m=o.Mode,ms=o.Animate,h=o.AutoHold,s=o.AutoStart,i=p?p.getElementsByTagName('IMG'):null;
      if (i[1]){
       var m=typeof(m)=='string'&&m.charAt(0).toUpperCase()=='V'?['top','offsetHeight','offsetTop','left','offsetWidth']:['left','offsetWidth','offsetLeft','top','offsetHeight'],z0=0;
       o.a=[];
       for (;z0<i.length;z0++){
        i[z0].style.position='absolute';
        i[z0].style[m[0]]=(z0!=0?p[m[1]]:(p[m[1]]-i[z0][m[1]])/2)+'px';
        i[z0].style[m[3]]=(p[m[4]]-i[z0][m[4]])/2+'px';
        o.a[z0]=[i[z0],m[0]];
       }
       o.id=o.ID;
       o.lgth=o.a.length-1;
       o.p=p;
       o.m=m;
       o.n=0;
       o.ud=1;
       o.ms=typeof(ms)=='number'&&ms>100?ms:1000;
       o.h=typeof(h)=='number'&&h>100?h:o.ms*4;
       p.style.overflow='hidden';
       this['zxc'+o.ID]=o;
       typeof(s)=='number'&&s>0?this.Auto(o.id,s):null;
      }
     },
    
     rotate:function(o,n){
      this.Pause(o.id);
      o.auto=n===true;
      var n=o.auto?o.n+o.ud:n,a=o.a[o.n],f=a[0][o.m[2]],t=o.ud>0?-a[0][o.m[1]]:o.p[o.m[1]];
      n=n<0?o.lgth:n>o.lgth?0:n;
      this.animate(o,a,f,t,new Date(),o.ms*Math.abs((t-f)/o.p[o.m[1]]));
      a=o.a[n];
      f=o.ud>0?o.p[o.m[1]]:-a[0][o.m[1]],t=(o.p[o.m[1]]-a[0][o.m[1]])/2;
      this.animate(o,a,f,t,new Date(),o.ms*Math.abs((t-f)/o.p[o.m[1]]),true);
      o.n=n;
     },
    
     animate:function(o,a,f,t,srt,mS,nxt){
      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,nxt); },10);
      }
      else {
       a[0].style[a[1]]=t+'px';
       nxt&&o.auto?oop.Auto(o.id,o.h):null;
      }
     }
    
    }
    
    zxcSSS.init({
     ID:'ss1',          // the unique ID name of the parent DIV.                       (string)
     Mode:'Horizontal', //(optional) the display mode, 'Horizontal' or 'Vertical'.     (string, default = 'Horizontal')
     Animate:1000,      //(optional) the animation duration in milliseconds.           (number, default = 1000)
     AutoHold :2000,    //(optional) the auto rotate 'hold' delay in milliseconds.     (number, default = Animate*4)
     AutoStart:3000     //(optional) the auto rotate auto start delay in milliseconds. (number, default = no auto start)
    });
    
    zxcSSS.init({
     ID:'ss2',
     Mode:'Vertical',
     Animate:1000,
     AutoHold :2000,
     AutoStart:3000
    });
    
    
    /*]]>*/
    </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. Single Responsive Photo Gallery plus Slideshow
    By temp304 in forum Submit a DHTML or CSS code
    Replies: 5
    Last Post: 06-26-2013, 03:15 PM
  2. Bouncing image script (single image version)
    By okaiche in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-25-2012, 10:13 AM
  3. lightbox image viewer gallery with single image
    By timondeks in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-13-2010, 10:22 AM
  4. Single Image CSS Rollover???
    By TheJoshMan in forum CSS
    Replies: 1
    Last Post: 03-11-2008, 03:25 AM
  5. fade in a single image
    By vkbarefoot in forum Looking for such a script or service
    Replies: 5
    Last Post: 04-14-2007, 08:19 AM

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
  •