Image Slideshow & Scaling

@andy_richinMar 11.2013

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: ~~[url]~~www.andyrichin.com/index2.php[/url]

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> [/CODE]

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!

to post a comment

JavaScript

3 Comments(s) _↴

@vwphillipsMar 11.2013 — #

[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>[/CODE]

@andy_richinauthorMar 12.2013 — #Thanks homie! I appreciate the response, worked like a charm.

@andy_richinauthorMar 12.2013 — #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?

Also in #JavaScript _↴

selected list items not actually selected Ajax menu problems How do i autoupdate a field with something depending on what selection is selected

Success!

Help @andy_richin spread the word by sharing this article on Twitter...

Tweet This

Image Slideshow & Scaling

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Image Slideshow & Scaling

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴