PDA

View Full Version : Script DD:Thumbnail viewer http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm



oohryan
03-26-2013, 10:07 AM
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.

jscheuer1
03-30-2013, 10:01 PM
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

vwphillips
03-31-2013, 05:21 PM
something like this


<!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>