www.webdeveloper.com
Results 1 to 4 of 4

Thread: Image Slideshow & Scaling

  1. #1
    Join Date
    Nov 2011
    Posts
    82

    Image Slideshow & Scaling

    Hello,

    I am trying to create an image slideshow that just fades automatically. I think the tough part is complete, but the site I am building is responsive and the javascript I am using has a set width and height of the image. Is there a way I can input a variable in this code so it responds to the CSS width and height? Here is a link for the initial set up: www.andyrichin.com/index2.php

    Javascript code in the header file

    Code:
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [1400, 625], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["/Images/Home/image1.jpg"],
    		["/Images/Home/image2.jpg"],
    		["/Images/Home/image3.jpg"]
    	],
    	displaymode: {type:'auto', pause:6000, cycles:0, wraparound:false},
    	persist: true, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "always",
    	togglerid: ""
    })
    
    </script>
    As you can see, the actual HTML code is a simple DIV tag with the ID "fadeshow1". The dimensions are right below that. If you scale the webpage that I provided above you'll notice everything responds except for this, due to the fixed width and height in the javascript. Any thoughts or solutions? Is there a better tutorial or way to do this? I essentially want a background image that spans the browser, fades 3 images, and also responds to the browser size. Thanks a lot in advance!

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    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[*/
    
    body {
      margin:0px;
    }
    
    .ss {
      position:relative;
    }
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    
    <div id="fadeshow1" class="ss" >
    </div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // ReSize Fade Slide Show (11-March-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcReSizeFadeSS={
    
     Auto:function(id,ms){
      var oop=this,o=this['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,o.cnt+1,true); },ms||200);
      }
     },
    
     Pause:function(id,ms){
      var oop=this,o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.ParentID,ia=o.ImageArray,obj=document.getElementById(id),ary=[],z0=0;
      for (;z0<ia.length;z0++){
       ary[z0]=new Image();
       ary[z0].src=ia[z0];
      }
      o.iu=id;
      o.obj=obj;
      this.load(o,ary);
     },
    
     load:function(o,ary,d,ms){
      clearTimeout(o.to);
      for (var oop=this,z0=0;z0<ary.length;z0++){
       if (ary[z0].width<40){
        o.to=setTimeout(function(){ oop.load(o,ary,d,ms); },200);
        return;
       }
      }
      oop.ready(o,ary);
     },
    
     ready:function(o,ary){
      var ms=o.FadeDuration,hold=o.AutoHold,w=ary[0].width,h=ary[0].height,r=w/h,img=document.createElement('IMG'),ms=typeof(ms)=='number'&&ms>20?ms:1000,z0=0;
      o.obj.style.width='100%';
      img.style.position='absolute';
      img.style.left='0px';
      img.style.top='0px';
      img.style.width='100%';
      for (;z0<ary.length;z0++){
       img=img.cloneNode(false);
       img.src=ary[z0].src;
       o.obj.appendChild(img);
       img.style.zIndex=z0>0?'0':'1';
       ary[z0]=[img];
       this.opc(img,z0>0?0:100);
      }
      o.ary=ary;
      o.r=r;
      o.ms=ms;
      o.lgth=ary.length-1;
      o.hold=typeof(hold)=='number'&&ms>20?hold:ms*4;
      o.cnt=0;
      this['zxc'+o.id]=o;
      this.resize(o);
      this.addevt(window,'resize','resize',o);
      this.Auto(o.id,o.hold);
     },
    
     rotate:function(o,nu,auto){
      this.Pause(o.id);
      o.auto=auto===true;
      nu=nu>o.lgth?0:nu<0?o.lgth:nu;
      o.ary[o.cnt][0].style.zIndex='0';
      this.animate(o,o.ary[o.cnt],100,0,new Date(),o.ms);
      o.ary[nu][0].style.zIndex='1';
      this.animate(o,o.ary[nu],0,100,new Date(),o.ms);
      o.cnt=nu;
    },
    
     animate:function(o,ary,f,t,srt,mS){
      clearTimeout(ary[1]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       oop.opc(ary[0],n);
      }
      if (ms<mS){
       ary[1]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
      }
      else {
       oop.opc(ary[0],t);
       if (o.auto&&t==100){
        oop.Auto(o.id,o.hold);
       }
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     resize:function(o,n){
      for (var z0=0;z0<o.ary.length;z0++){
       o.ary[z0][0].style.height=o.ary[z0][0].width/o.r+'px';
      }
      o.obj.style.height=o.ary[0][0].height+'px';
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p); });
      }
     }
    
    }
    
     zxcReSizeFadeSS.init({
     	ParentID:'fadeshow1', // the unique ID name of the parent DIV.                    (string)
    	ImageArray:[          // an array defining the image SRCs.                        (array)
    		['http://www.andyrichin.com/Images/Home/image1.jpg'],
    		['http://www.andyrichin.com/Images/Home/image2.jpg'],
    		['http://www.andyrichin.com/Images/Home/image3.jpg']
    	],
        FadeDuration:1000,   //(optional) the duration in milli seconds.                  (number, default = 1000)
        AutoHold:2000        //(optional) the 'auto rotate 'hold' delay in milli seconds. (number, default = 1000)
    });
    /*]]>*/
    </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/

  3. #3
    Join Date
    Nov 2011
    Posts
    82
    Thanks homie! I appreciate the response, worked like a charm.

  4. #4
    Join Date
    Nov 2011
    Posts
    82
    Is there a way to set the height to "auto"? It seems like there are times, when the browser is at a certain size, the images are not viewed proportionately. In particular, they seem to be squeezed horizontally. Then if you adjust the browser it fixes it. Any thoughts?

Thread Information

Users Browsing this Thread

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

Posting Permissions

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



Recent Articles