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 Coder
    Join Date
    Dec 2012
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Image and content slider full width

    Hello everyone,

    I was wondering what should be done to create an image/ content (displayed in html) slider particularly having image full width no matter what resolution a pc has.

    An example of such slider would be: http://radiumone.com

    no matter which pc I use the website always displays the content slider in full width from side to side. What should I do to make my content slider's images act like that?

    Grateful,

    Renovatio

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,533
    Thanks
    3
    Thanked 512 Times in 499 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[*/
    .SS {
      position:absolute;overflow:hidden;left:0px;top:100px;width:100%;height:300px;
    }
    
    .box {
      position:absolute;overflow:hidden;top:50px;width:200px;height:140px;border:solid green 1px;text-Align:center;font-Size:24px;font-Weight:bold;color:green;
    }
    
    .slide {
      position:absolute;left:0px;top:0px;width:1400px;height:300px;
    }
    
    .left {
      position:absolute;overflow:hidden;left:50px;top:100px;width:50px;height:50px;border:solid red 1px;
    }
    
    .right {
      position:absolute;overflow:hidden;right:50px;top:100px;width:50px;height:50px;border:solid red 1px;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    // Fade Slide Show (30-December-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcFadeSS={
    
     init:function(o){
      var id=o.ID,obj=document.getElementById(id),ary=o.ImageArray,ms=o.FadeDuration,hold=o.HoldDuration,ms=typeof(ms)=='number'?ms:1000,hold=typeof(hold)=='number'?hold:ms*2,srt=o.AutoStart,clone=document.createElement('IMG'),imgs=obj.getElementsByTagName('IMG'),divs=obj.getElementsByTagName('DIV'),src,z0=0;
      for (;z0<ary.length;z0++){
       if (divs[z0]){
        ary[z0][1]=divs[z0];
       }
      }
      imgs[0].src=ary[0][0];
      imgs[1].src=ary[0][0];
      imgs[2].style.zIndex='10';
      imgs[3].style.zIndex='10';
      o=zxcFadeSS['zxc'+id]={
       id:id,
       obj:obj,
       imgs:[imgs[0],imgs[1],0],
       w:imgs[0].width,
       ary:ary,
       lgth:ary.length-1,
       ms:ms,
       hold:hold,
       cnt:0,
       ud:1
      }
      this.resize(o);
      this.addevt(window,'resize','resize',o);
      this.addevt(imgs[2],'mouseup','next',o,1);
      this.addevt(imgs[3],'mouseup','next',o,-1);
      this.addevt(obj,'mouseover','Pause',id);
      this.addevt(obj,'mouseout','Auto',id);
      if (typeof(srt)=='number'){
       this.Auto(id,srt);
      }
     },
    
     GoTo:function(id,nu){
      var o=this['zxc'+id];
      if (o&&o.ary[nu]&&nu!=o.cnt){
       o.cnt=nu;
       this.rotate(o,false,nu);
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=this['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ oop.next(o,o.ud,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     next:function(o,ud,auto){
      this.Pause(o.id);
      ud=typeof(ud)=='number'?ud<0?-1:1:o.ud;
      o.ud=ud;
      o.auto=auto===true;
      nu=o.cnt+ud;
      nu=nu<0?o.lgth:nu>o.lgth?0:nu;
      if (o.imgs[2]==0){
       if (o.ary[o.cnt][1]){
        o.ary[o.cnt][1].style.zIndex='0';
       }
       o.imgs[1].src=o.ary[nu][0];
       o.imgs[1].style.top='0px';
       this.animate(o,o.imgs[2],100,new Date(),o.ms);
       o.cnt=nu;
      }
     },
    
     animate:function(o,f,t,srt,mS){
      clearTimeout(o.dly);
      var oop=this,obj=o.imgs[1],ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       obj.style.filter='alpha(opacity='+now+')';
       obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
       o.imgs[2]=now;
      }
      if (ms<mS){
       o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
      }
      else {
       if (o.ary[o.cnt][1]){
        o.ary[o.cnt][1].style.zIndex='5';
       }
       o.imgs[0].src=obj.src;
       o.imgs[2]=0;
       obj.style.top='-3000px';
       if (o.auto){
        oop.Auto(o.id,o.hold);
       }
      }
     },
    
     resize:function(o){
      for (var z0=0,z1=0;z0<2;z0++){
       o.imgs[z0].style.left=(o.obj.offsetWidth-o.w)/2+'px';
       o.imgs[z0].style.zIndex=z0*2+1+'';
      }
      for (;z1<o.ary.length;z1++){
       if (o.ary[z1][1]){
        o.ary[z1][1].style.zIndex=z1!=o.cnt?'0':'5';
        o.ary[z1][1].style.left=(o.obj.offsetWidth-o.ary[z1][1].offsetWidth)/2+'px';
       }
      }
      o.imgs[0].src=o.imgs[1].src;
      o.imgs[2]=0;
      o.imgs[1].style.top='-3000px';
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
      }
     }
    
    }
    
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
    <br />
    <br />
     <div id="slide" class="SS" >
      <img class="slide" src="http://i1253.photobucket.com/albums/hh590/vzcrdo5/GivingHeart-3.jpg" />
      <img class="slide" src="http://i1253.photobucket.com/albums/hh590/vzcrdo5/StartaClub-1.jpg" />
      <img class="left" src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" alt="left" />
      <img class="right" src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" alt="left" />
      <div class="box" ><br /><br />Image 1</div>
      <div class="box" ><br /><br />Image 2</div>
      <div class="box" ><br /><br />Image 3</div>
      <div class="box" ><br /><br />Image 4</div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    zxcFadeSS.init({
     ID:'slide',        // the unique ID name of the image.                             (string)
     ImageArray:[       // an array defining the slide show images SRCs.                (array)
      ["http://i1253.photobucket.com/albums/hh590/vzcrdo5/GivingHeart-3.jpg"],
      ["http://i1253.photobucket.com/albums/hh590/vzcrdo5/StartaClub-1.jpg"],
      ["http://i1253.photobucket.com/albums/hh590/vzcrdo5/FoodTrucks-1.jpg"],
      ["http://i1253.photobucket.com/albums/hh590/vzcrdo5/SocialNetwork.jpg"]
     ],
     FadeDuration:1000, //(optional) the fade duration in milli seconds.                (number, default = 1000)
     HoldDuration:2000, //(optional) the auto rotation fade duration in milli seconds.  (number, default = FadeDuration)
     AutoStart:2000     //(optional) the delay before starting auto rotation.           (number, default = no auto start)
    })
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 12-30-2012 at 08:55 PM. Reason: Added Caption Boxes
    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/

  • Users who have thanked vwphillips for this post:

    Renovatio (01-04-2013)

  • #3
    New Coder
    Join Date
    Dec 2012
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank You!


  •  

    Posting Permissions

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