Results 1 to 3 of 3

Thread: Script DD:Thumbnail viewer http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

  1. #1
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Script DD:Thumbnail viewer http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

    1) Script Title: Thumbnail Viewer

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

    3) Describe problem: Hi, its not so much a problem really, I want to know if it is possible to add an option to the enlarged picture to either go right or left to bring up other pictures, I know there are other scripts that do this but I like the functionality of thumbnail viewer and wondered if it was possible.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    I'm not sure what you mean by functionality. Those other scripts have the same or similar functionality. Anyways, it would be a fair amount of trouble to add that capability. For something very simple that already has it, try SlimBox2:

    http://www.digitalia.be/software/slimbox2
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,780
    Thanks
    2
    Thanked 414 Times in 408 Posts

    Default

    something like this

    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[*/
    
    .popup {
      position:absolute;overflow:hidden;left:400px;background-Color:#FFCC66;width:250px;height:195px;border:solid red 1px;
    }
    
    .popup IMG{
      position:absolute;left:20px;top:20px;width:200px;height:150px;
    }
    
    .popup2 {
      position:absolute;overflow:hidden;left:400px;background-Color:#CCFFFF;width:240px;height:225px;border:solid blue 1px;
    }
    
    .popup2 IMG{
      position:absolute;left:20px;top:10px;
    }
    
    .mask {
      background-Color:#FFFFCC;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    .forward {
      position:absolute;z-Index:101;top:90px;left:5px;width:15px;height:13px;background-Repeat:no-repeat;
      background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/left.gif);
    }
    
    .back {
      position:absolute;z-Index:101;top:90px;right:5px;width:15px;height:13px;background-Repeat:no-repeat;
      background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/right.gif);
    }
    
    .auto {
      position:absolute;z-Index:101;bottom:5px;left:210px;width:15px;height:13px;background-Repeat:no-repeat;
      background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/autoright.gif);
    }
    
    .pause {
      position:absolute;z-Index:101;bottom:5px;right:5px;width:15px;height:13px;background-Repeat:no-repeat;
      background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/pause1.gif);
    }
    
    .close {
      position:absolute;z-Index:101;top:5px;right:5px;width:15px;height:13px;background-Repeat:no-repeat;
      background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/X[1].gif);
    }
    
    .captions {
      position:absolute;z-Index:101;bottom:5px;left:75px;width:120px;height:15px;text-Align:center;font-Size:14px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
    <a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" rel="Egypt 1,Egypt 2" rev="captions" class="zxcThumbnail MaskClass:mask PopUpClass:popup Speed:600 AutoHold:2000 ControlClass:close,forward,back,auto,pause SRCArray:http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg,http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" rev=""><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" style="width: 100px; height: 75px" /></a></p>
    <a href="http://www.vicsjavascripts.org.uk/StdImages/1.gif" rel="" rev="" class="zxcThumbnail MaskClass:mask PopUpClass:popup2 Speed:600 AutoHold:2000 SRCArray:http://www.vicsjavascripts.org.uk/StdImages/1.gif,http://www.vicsjavascripts.org.uk/StdImages/2.gif" rev=""><img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" style="width: 100px; height: 75px" /></a></p>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Thumbnail Viewer. (31-March-2013)  DRAFT
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    function zxcThumbnailViewer(opt){
     var ld=opt.ImageLoad,els=document.body.getElementsByTagName('A'),msk=document.createElement('DIV'),img=document.createElement('IMG'),mk,pop,o,s,i,objs=[],z0=0,z0a,z1=0,z1a;
     for (;z0<els.length;z0++){
      if((' '+els[z0].className+' ').match(' '+opt.CommonClass+' ')){
       o={a:els[z0],nu:z0};
       s=els[z0].className.split(' ');
       for (z0a=0;z0a<s.length;z0a++){
        i=s[z0a].indexOf(':');
        if (i>2){
         o[s[z0a].substring(0,i).toLowerCase()]=s[z0a].substring(i+1);
        }
       }
       objs.push(o);
      }
     }
     this.d=msk.cloneNode(false)
     msk.style.position='fixed';
     msk.style.visibility='hidden';
     mk=msk.cloneNode(false);
     pop=msk.cloneNode(false);
    
     msk.style.left='0px';
     msk.style.top='0px';
     msk.style.width='100%';
     this.msk=msk;
    
     mk.style.width=mk.style.height='0px'
     mk.style.bottom='0px';
     mk.style.right='0px';
     document.body.appendChild(mk);
     this.pop=pop;
     this.msk=msk;
     this.mk=mk;
     this.img=img;
     for (;z1<objs.length;z1++){
      o=objs[z1];
      s=o.srcarray;
      s=s?s.split(','):[a.href];
      o.ary=[];
      for (z1a=0;z1a<s.length;z1a++){
       o.ary[z1a]=new Image();
       o.ary[z1a].src=s[z1a];
      }
      this.load(o,new Date(),(typeof(ld)=='number'&&ld>0?ld:5)*1000);
     }
    }
    
    zxcThumbnailViewer.prototype={
    
     load:function(o,d,ms){
      clearTimeout(o.to);
      for (var oop=this,z0=0,z1=0;z0<o.ary.length;z0++){
       if (o.ary[z0].width<40&&new Date()-d<ms){
        o.to=setTimeout(function(){ oop.load(o,d,ms); },200);
        return;
       }
      }
      for (;z1<o.ary.length;z1++){
       if (o.ary[z1].width<40){
        o.ary.splice(z1--,1);
       }
      }
      o.ary.length>0?oop.ready(o):null;
     },
    
     ready:function(o){
      var ccls=o.a.rev,caps=o.a.rel,bcls=o.controlclass,ms=o.speed,hold=o.autohold,ms=isFinite(ms*1)&&ms>0?ms*1:1000,caps=caps?caps.split(','):[],bcls=bcls?bcls.split(','):[],pop=this.pop.cloneNode(false),msk=this.msk.cloneNode(false),i,b,c,z0=0,z1=0;
      msk.className=o.maskclass;
      document.body.appendChild(msk);
      pop.className=o.popupclass;
      document.body.appendChild(pop);
      o.lgth=o.ary.length-1;
      o.c=document.createElement('DIV');
      o.c.className=ccls;
      ccls&&caps[0]?pop.appendChild(o.c):null;
      for (;z0<=o.lgth;z0++){
       i=this.img.cloneNode(false);
       i.src=o.ary[z0].src;
       pop.appendChild(i);
       c=(pop.offsetWidth-i.width)/2;
       w=pop.offsetWidth;
       i.style.left=(z0>0?w:c)+'px';
       o.ary[z0]=[i,'left',c,w,-i.width,0,caps[z0]||''];
       this.addevt(i,'mouseup','next',o);
      }
      for (;z1<bcls.length;z1++){
       if (bcls[z1]&&o.lgth>0){
        b=document.createElement('DIV');
        b.className=bcls[z1];
        pop.appendChild(b);
        this.addevt(b,'mouseup',z1==0?'open':z1==3?'auto':z1==4?'pause':'next',o,z1==1?1:z1==2?-1:null);
       }
      }
      o.msk=msk;
      o.w=w;
      o.clip=['0px,'+o.w+'px,'+0+'px,0px']
      o.w=w;
      o.pop=[pop,'',0,pop.offsetHeight,0,0];
      o.cnt=0;
      o.ms=ms;
      o.hold=isFinite(hold*1)&&hold>0?hold*1:ms*4;
      o.auto=false;
      o.ud=1;
      o.a.onclick=function(){ return false; }
      this.addevt(o.a,'mouseup','open',o,true);
      this.addevt(o.msk,'mouseup','open',o,false);
      this.addevt(window,'resize','resize',o);
     },
    
     next:function(o,ud,auto){
      ud=typeof(ud)=='number'?ud<0?-1:1:o.ud;
      var nu=o.cnt+ud,a=o.ary[o.cnt],d=new Date();
      this.pause(o);
      o.auto=auto===true;
      nu=nu<0?o.lgth:nu>o.lgth?0:nu;
      this.animate(o,a,a[0].offsetLeft,a[ud<0?3:4],d,o.ms);
      a=o.ary[nu];
      this.animate(o,a,a[ud<0?4:3],a[2],d,o.ms,true);
      o.c.innerHTML=a[6];
      o.cnt=nu;
      o.ud=ud;
     },
    
     resize:function(o){
      this.pause(o);
      o.msk.style.height=this.mk.offsetTop+'px';
      o.pop[0].style.left=(o.msk.offsetWidth-o.w)/2+'px';
      o.pop[0].style.top=(o.msk.offsetHeight-o.pop[0].offsetHeight)/2+'px';
     },
    
     open:function(o,ud){
      this.resize(o);
      o.msk.style.visibility=o.pop[0].style.visibility='visible';
      this.animate(o,o.pop,o.pop[5],o.pop[ud?3:2],new Date(),o.ms);
      o.c.innerHTML=o.ary[o.cnt][6];
     },
    
     auto:function(o,ms){
      var oop=this;
      o.to=setTimeout(function(){ oop.next(o,o.ud,true); },ms||200);
     },
    
     pause:function(o,ud){
      clearTimeout(o.to);
      o.auto=false;
     },
    
     animate:function(o,a,f,t,srt,mS,z){
      clearTimeout(a[7]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
       if (isFinite(n)){
        a[1]?a[0].style[a[1]]=n+'px':a[0].style.clip='rect(0px,'+o.w+'px,'+n+'px,0px)';
        a[5]=n;
       }
      if (ms<mS){
       a[7]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,z); },10);
      }
      else {
       a[5]=t;
       a[1]?a[0].style[a[1]]=t+'px':a[0].style.clip='rect(0px,'+o.w+'px,'+t+'px,0px)';;
       z&&o.auto?oop.auto(o,o.hold):null;
       !a[1]&&t==0?o.msk.style.visibility=o.pop[0].style.visibility='hidden':null;
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
      }
     }
    
    
    }
    // ** CLASS Name Options
    //    MaskClass:mask                               // the class name of the page mask.
    //    PopUpClass:popup                             // the class name of the popup DIV element.
    //    SRCArray:Egypt5.jpg;Egypt6.jpg               //(optional) a list of SRCs for a slide show.                        (alternative = the link href(no slide show))
    //    ControlClass:close,forward,back,auto,pause,  //(optional) the class names if the slide show control DIV elements. (default = image click)
    //    Slide:500                                    //(optional) the slide duration in milli seconds.                    (default = 1000)
    //    AutoHold:2000                                // the auto rotate 'hold' delay in milli seconds.                    (default = Slide*4)
    
    // ** Link Options
    //    href="Egypt5.jpg"                            //(optional) the SRC for a single Pop Up image.                      (alternative = CLASS Name Option 'SRCArray')
    //    rel="Egypt 1,Egypt 2"                        //(optional) the slide captions inner HTML.                          (default = no captions)
    //    rev="captions"                               //(optional) the class name of the caption DIV element.              (default = no captions)
    
       new zxcThumbnailViewer({
        CommonClass:'zxcThumbnail', // the common class name of the thumbnail elements. (string)
        ImageLoad:5                 //(optional) the time to allow the images to load in seconds. (number, default = 5)
       });
    /*]]>*/
    </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. http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm
    By HotelsInColombia in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 08-21-2012, 10:09 PM
  2. http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm
    By Tanyati in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 01-01-2009, 07:18 PM
  3. Replies: 0
    Last Post: 11-03-2005, 07:10 PM
  4. RE:http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm
    By morleymc in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-29-2005, 03:29 PM
  5. Replies: 3
    Last Post: 07-01-2005, 08:49 PM

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
  •