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 5 of 5
  1. #1
    Vx_
    Vx_ is offline
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Developing an Image Display for Webpage

    Hi everyone. I have a task, I'm trying to complete something that acts like this:

    https://www.dropbox.com/s/ian6qhglpp...Untitled-1.jpg

    I'm wondering what are some of the resources I can work with. I'm sorry if I'm asking for a lot but I only know the very basic of Javascript at the moment. I'm okay with HTML and CSS and I can construct the necessary visuals. Just the code I need help with.

    Thank you in advance.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,468
    Thanks
    3
    Thanked 495 Times in 482 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[*/
    
    .box {
      position:absolute;left:100px;top:100px;width:480px;height:500px;border:solid red 1px;
    }
    
    .main IMG {
      position:absolute;left:0px;top:0px;width:225px;height:170px;
    }
    
    .thumbs {
      position:absolute;left:5px;top:5px;width:230px;height:120px;border:solid red 1px;
    }
    
    .thumbs IMG {
      width:70px;height:53px;float:left;margin-Top:5px;margin-Left:5px;cursor:pointer;
    }
    
    .main {
      position:absolute;left:245px;top:5px;width:225px;height:170px;border:solid red 1px;
    }
    
    .buttons {
      position:absolute;left:5px;top:135px;width:230px;height:30px;border:solid red 1px;
    }
    
    .buttons IMG {
      width:14px;height:14px;float:left;margin-Left:7px;margin-Top:5px;cursor:pointer;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
    <div class="box" >
    
     <div id="main" class="main" >
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt7.jpg" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt8.jpg" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt9.jpg" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt10.jpg" alt="main" />
     </div>
    
     <div id="thumbs" class="thumbs" >
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt7.jpg" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt8.jpg" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt9.jpg" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt10.jpg" alt="thumb" />
     </div>
    
     <div class="buttons" >
      <img src="http://www.vicsjavascripts.org/StdImages/left.gif" alt="forward" onmouseup="zxcSlideShow.Next('main',1);" />
      <img src="http://www.vicsjavascripts.org/StdImages/right.gif" alt="back"  onmouseup="zxcSlideShow.Next('main',-1);"/>
      <img src="http://www.vicsjavascripts.org/StdImages/pause1.gif" alt="pause" onmouseup="zxcSlideShow.Pause('main');" />
      <img src="http://www.vicsjavascripts.org/StdImages/autoright.gif" alt="auto " onmouseup="zxcSlideShow.Auto('main');" />
      <img src="http://www.vicsjavascripts.org/StdImages/1.gif" alt="GoTo 0" onmouseup="zxcSlideShow.GoTo('main',0);" />
      <img src="http://www.vicsjavascripts.org/StdImages/2.gif" alt="GoTo 1" onmouseup="zxcSlideShow.GoTo('main',1);" />
      <img src="http://www.vicsjavascripts.org/StdImages/3.gif" alt="GoTo 2" onmouseup="zxcSlideShow.GoTo('main',2);" />
      <img src="http://www.vicsjavascripts.org/StdImages/4.gif" alt="GoTo 3" onmouseup="zxcSlideShow.GoTo('main',3);" />
      <img src="http://www.vicsjavascripts.org/StdImages/5.gif" alt="GoTo 4" onmouseup="zxcSlideShow.GoTo('main',4);" />
      <img src="http://www.vicsjavascripts.org/StdImages/6.gif" alt="GoTo 5" onmouseup="zxcSlideShow.GoTo('main',5);" />
     </div>
    
     <div id="main2" class="main" style="top:200px;" onmouseover="zxcSlideShow.Pause('main2');" onmouseout="zxcSlideShow.Auto('main2');" >
      <img src="http://www.vicsjavascripts.org/StdImages/1.gif" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/2.gif" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/3.gif" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/4.gif" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/5.gif" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/6.gif" alt="main" />
     </div>
    
     <div id="thumbs2" class="thumbs" style="top:200px;" >
      <img src="http://www.vicsjavascripts.org/StdImages/1.gif" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/2.gif" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/3.gif" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/4.gif" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/5.gif" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/6.gif" alt="thumb" />
     </div>
    
     <div class="buttons" style="top:335px;" >
      <img src="http://www.vicsjavascripts.org/StdImages/left.gif" alt="forward" onmouseup="zxcSlideShow.Next('main2',1);" />
      <img src="http://www.vicsjavascripts.org/StdImages/right.gif" alt="back"  onmouseup="zxcSlideShow.Next('main2',-1);"/>
     </div>
    
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    //Fade Slide Show (07-December-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org/index.htm
    
    var zxcSlideShow={
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(o);
       if (o.a[n]&&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];
      o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200):null;
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.MainID,op=o.ThumbsOpacity,ms=o.Animate,h=o.AutoHold,s=o.AutoStart;t=document.getElementById(o.ThumbsID),p=document.getElementById(id),i=p?p.getElementsByTagName('IMG'):[],t=t?t.getElementsByTagName('IMG'):[];
      if (i[0]){
       var c,z0=0;
       o.op=typeof(op)=='number'&&op>0&&op<=100?op:50;
       o.a=[];
       for (;z0<i.length;z0++){
        i[z0].style.zIndex=z0!=0?'0':'2';
        this.opc(i[z0],z0!=0?0:100);
        o.a.push([i[z0],t[z0],z0!=0?0:100]);
        if (t[z0]){
         t[z0].className=z0!=0?'':' current';
         this.addevt(t[z0],'mouseup','GoTo',id,z0);
         this.opc(t[z0],z0!=0?o.op:100);
        }
       }
       o.id=id;
       o.lgth=o.a.length-1;
       o.ud=1;
       o.n=0;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
       this['zxc'+id]=o;
       typeof(s)=='number'&&s>0?this.Auto(id,s):null;
      }
     },
    
     rotate:function(o,a){
      this.Pause(o.id);
      var n=o.n;
      o.a[n][0].style.zIndex='0';
      o.a[n][1]?this.opc(o.a[n][1],o.op):null;
      this.animate(o,o.a[n],o.a[n][2],0,new Date(),o.ms*o.a[n][2]/100);
      o.auto=a===true;
      n=o.auto?n+o.ud:a;
      n=n<0?o.lgth:n>o.lgth?0:n;
      o.a[n][0].style.zIndex='2';
      o.a[n][1]?this.opc(o.a[n][1],100):null;
      this.animate(o,o.a[n],o.a[n][2],100,new Date(),o.ms*(100-o.a[n][2])/100);
      o.n=n;
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[2]=Math.max(0,n);
       this.opc(a[0],a[2]);
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[2]=t;
       this.opc(a[0],a[2]);
       o.auto&&t==100?oop.Auto(o.id,o.h):null;
      }
     },
    
     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;
     },
    
     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;
     }
    
    }
    
    zxcSlideShow.init({
     MainID:'main',     // the unique ID name of the main images parent DIV. (string)
     ThumbsID:'thumbs', //(optional) the unique ID name of the thumbnail images parent DIV. (string, default = no thumbnails)
     ThumbsOpacity:50,  //(optional) the thumbnail images opacity(1-100).                   (number, default = 50)
     Animate:1000,      //(optional) the fade duration in millisec.                         (number, default = 1000)
     AutoHold:2000,     //(optional) the auto rotate 'hold' delay in millisec.              (number, default = Animate*4)
     AutoStart:2000     //(optional) the auto rotate 'start' delay in millisec.             (number, default = no auto start)
    })
    
    zxcSlideShow.init({
     MainID:'main2',
     ThumbsID:'thumbs2',
     Animate:1000,
     AutoHold:2000,
     AutoStart:2000
    })
    
    /*]]>*/
    </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
    Vx_
    Vx_ is offline
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi vwphillips. I'm working with pre-built thumbnails, which are completely different assets to their full counterpart images. My intention was when if I clicked on it, it would bring up the counterpart image.

    I've noticed that the code works with the same type of image both as a thumbnail and in the display. Is it possible that I can do what I have previously mentioned in the first paragraph?

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,468
    Thanks
    3
    Thanked 495 Times in 482 Posts
    the main and thumbnail images may be different

    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[*/
    
    .box {
      position:absolute;left:100px;top:100px;width:480px;height:500px;border:solid red 1px;
    }
    
    .main IMG {
      position:absolute;left:0px;top:0px;width:225px;height:170px;
    }
    
    .thumbs {
      position:absolute;left:5px;top:5px;width:230px;height:120px;border:solid red 1px;
    }
    
    .thumbs IMG {
      width:70px;height:53px;float:left;margin-Top:5px;margin-Left:5px;cursor:pointer;
    }
    
    .main {
      position:absolute;left:245px;top:5px;width:225px;height:170px;border:solid red 1px;
    }
    
    .buttons {
      position:absolute;left:5px;top:135px;width:230px;height:30px;border:solid red 1px;
    }
    
    .buttons IMG {
      width:14px;height:14px;float:left;margin-Left:7px;margin-Top:5px;cursor:pointer;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
    <div class="box" >
    
     <div id="main" class="main" >
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt7.jpg" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt8.jpg" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt9.jpg" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt10.jpg" alt="main" />
     </div>
    
     <div id="thumbs" class="thumbs" >
      <img src="http://www.vicsjavascripts.org/StdImages/1.gif" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/2.gif" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/3.gif" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/4.gif" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/5.gif" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/6.gif" alt="thumb" />
     </div>
    
     <div class="buttons" >
      <img src="http://www.vicsjavascripts.org/StdImages/left.gif" alt="forward" onmouseup="zxcSlideShow.Next('main',1);" />
      <img src="http://www.vicsjavascripts.org/StdImages/right.gif" alt="back"  onmouseup="zxcSlideShow.Next('main',-1);"/>
      <img src="http://www.vicsjavascripts.org/StdImages/pause1.gif" alt="pause" onmouseup="zxcSlideShow.Pause('main');" />
      <img src="http://www.vicsjavascripts.org/StdImages/autoright.gif" alt="auto " onmouseup="zxcSlideShow.Auto('main');" />
      <img src="http://www.vicsjavascripts.org/StdImages/1.gif" alt="GoTo 0" onmouseup="zxcSlideShow.GoTo('main',0);" />
      <img src="http://www.vicsjavascripts.org/StdImages/2.gif" alt="GoTo 1" onmouseup="zxcSlideShow.GoTo('main',1);" />
      <img src="http://www.vicsjavascripts.org/StdImages/3.gif" alt="GoTo 2" onmouseup="zxcSlideShow.GoTo('main',2);" />
      <img src="http://www.vicsjavascripts.org/StdImages/4.gif" alt="GoTo 3" onmouseup="zxcSlideShow.GoTo('main',3);" />
      <img src="http://www.vicsjavascripts.org/StdImages/5.gif" alt="GoTo 4" onmouseup="zxcSlideShow.GoTo('main',4);" />
      <img src="http://www.vicsjavascripts.org/StdImages/6.gif" alt="GoTo 5" onmouseup="zxcSlideShow.GoTo('main',5);" />
     </div>
    
     <div id="main2" class="main" style="top:200px;" onmouseover="zxcSlideShow.Pause('main2');" onmouseout="zxcSlideShow.Auto('main2');" >
      <img src="http://www.vicsjavascripts.org/StdImages/1.gif" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/2.gif" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/3.gif" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/4.gif" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/5.gif" alt="main" />
      <img src="http://www.vicsjavascripts.org/StdImages/6.gif" alt="main" />
     </div>
    
     <div id="thumbs2" class="thumbs" style="top:200px;" >
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt7.jpg" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt8.jpg" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt9.jpg" alt="thumb" />
      <img src="http://www.vicsjavascripts.org/StdImages/Egypt10.jpg" alt="thumb" />
     </div>
    
     <div class="buttons" style="top:335px;" >
      <img src="http://www.vicsjavascripts.org/StdImages/left.gif" alt="forward" onmouseup="zxcSlideShow.Next('main2',1);" />
      <img src="http://www.vicsjavascripts.org/StdImages/right.gif" alt="back"  onmouseup="zxcSlideShow.Next('main2',-1);"/>
     </div>
    
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    //Fade Slide Show (07-December-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org/index.htm
    
    var zxcSlideShow={
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(o);
       if (o.a[n]&&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];
      o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200):null;
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.MainID,op=o.ThumbsOpacity,ms=o.Animate,h=o.AutoHold,s=o.AutoStart;t=document.getElementById(o.ThumbsID),p=document.getElementById(id),i=p?p.getElementsByTagName('IMG'):[],t=t?t.getElementsByTagName('IMG'):[];
      if (i[0]){
       var c,z0=0;
       o.op=typeof(op)=='number'&&op>0&&op<=100?op:50;
       o.a=[];
       for (;z0<i.length;z0++){
        i[z0].style.zIndex=z0!=0?'0':'2';
        this.opc(i[z0],z0!=0?0:100);
        o.a.push([i[z0],t[z0],z0!=0?0:100]);
        if (t[z0]){
         t[z0].className=z0!=0?'':' current';
         this.addevt(t[z0],'mouseup','GoTo',id,z0);
         this.opc(t[z0],z0!=0?o.op:100);
        }
       }
       o.id=id;
       o.lgth=o.a.length-1;
       o.ud=1;
       o.n=0;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
       this['zxc'+id]=o;
       typeof(s)=='number'&&s>0?this.Auto(id,s):null;
      }
     },
    
     rotate:function(o,a){
      this.Pause(o.id);
      var n=o.n;
      o.a[n][0].style.zIndex='0';
      o.a[n][1]?this.opc(o.a[n][1],o.op):null;
      this.animate(o,o.a[n],o.a[n][2],0,new Date(),o.ms*o.a[n][2]/100);
      o.auto=a===true;
      n=o.auto?n+o.ud:a;
      n=n<0?o.lgth:n>o.lgth?0:n;
      o.a[n][0].style.zIndex='2';
      o.a[n][1]?this.opc(o.a[n][1],100):null;
      this.animate(o,o.a[n],o.a[n][2],100,new Date(),o.ms*(100-o.a[n][2])/100);
      o.n=n;
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[2]=Math.max(0,n);
       this.opc(a[0],a[2]);
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[2]=t;
       this.opc(a[0],a[2]);
       o.auto&&t==100?oop.Auto(o.id,o.h):null;
      }
     },
    
     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;
     },
    
     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;
     }
    
    }
    
    zxcSlideShow.init({
     MainID:'main',     // the unique ID name of the main images parent DIV. (string)
     ThumbsID:'thumbs', //(optional) the unique ID name of the thumbnail images parent DIV. (string, default = no thumbnails)
     ThumbsOpacity:50,  //(optional) the thumbnail images opacity(1-100).                   (number, default = 50)
     Animate:1000,      //(optional) the fade duration in millisec.                         (number, default = 1000)
     AutoHold:2000,     //(optional) the auto rotate 'hold' delay in millisec.              (number, default = Animate*4)
     AutoStart:2000     //(optional) the auto rotate 'start' delay in millisec.             (number, default = no auto start)
    })
    
    zxcSlideShow.init({
     MainID:'main2',
     ThumbsID:'thumbs2',
     Animate:1000,
     AutoHold:2000,
     AutoStart:2000
    })
    
    /*]]>*/
    </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/

  • Users who have thanked vwphillips for this post:

    Vx_ (01-08-2014)

  • #5
    Vx_
    Vx_ is offline
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Integrated into website successfully.

    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
    •