Image Thumbnail Viewer

**firstsnow** · 06-13-2009, 12:16 PM

hi.
i have a problem with Image Thumbnail Viewer.
now i'm programming and testing my website of photography http://new.igorkoltun.info//slide2/street.php

when i open image i don't like white narrow stripe in below of image. please help

**vwphillips** · 06-15-2009, 03:43 PM

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[*/
#display {
  position:absolute;z-Index:101;visibility:hidden;border:solid black 10px
}

#loading {
 position:absolute;z-Index:100;visibility:hidden;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (14-May-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner and an optional 'Bounce'.

// **** Application Notes


// omitted to allow posting

// **** Functional Code - NO NEED to Change


function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
 if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
 if (!obj) return;
 var oop=obj[mde.replace(/\W/g,'')+'oop'];
 if (oop){
  if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
  else oop.update([srt,fin],ms,scale,curve);
 }
 else oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
 return oop;
}

function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
 this.srtfin=[srt,fin];
 this.to=null;
 this.obj=obj;
 this.mde=mde.replace(/\W/g,'');
 this.update([srt,fin],ms,scale,curve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
 clearTimeout(this.to);
 this.time=ms||this.time||2000;
 this.data=[srtfin[0],srtfin[0],srtfin[1]];
 this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
 this.ms=this.mS;
 this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
 this.inc=Math.PI/(2*this.mS);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
 this.ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];
 this.apply();
 if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
 else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Bounce&&this.Bounce[2]>0) this.bounce();
 }
}

zxcBAnimatorOOP.prototype.apply=function(){
 if (isFinite(this.data[0])){
  if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

zxcBAnimatorOOP.prototype.bounce=function(){
 if (this.Bounce[2]%2==0)
 this.Bounce[1]+=(this.Bounce[0]-this.Bounce[1])/(this.Bounce[2])
 this.update([this.data[0],this.Bounce[this.Bounce[2]%2==0?1:0]],this.Bounce[3]/this.Bounce[2]);
 this.Bounce[2]--;
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function zxcThumbNail(cls,from,to,mid,lid,ms){
 var thumbs=zxcByClassName(cls);
 this.thumbs=[];
 for (var z0=0;z0<thumbs.length;z0++){
  this.thumbs[z0]=[thumbs[z0],thumbs[z0].src.replace(from,to)];
  this.addevt(thumbs[z0],'click','Expand',z0);
 }
 this.main=document.getElementById(mid);
 this.mainsrc=this.main.getElementsByTagName('IMG')[0].src;
 this.addevt(this.main,'click','Close');
 this.loading=document.getElementById(lid);
 this.cnt=0;
 this.ms=ms||1000;
}

zxcThumbNail.prototype.Expand=function(nu){
 if (!this.thumbs[nu]) return false;
 var oop=this,pos=zxcWWHS(),img=this.main.getElementsByTagName('IMG')[0];
 if (typeof(this.thumbs[nu][1])=='string'){
  if (this.loading){
   this.cnt=0;
   this.loading.style.visibility='visible';
   this.loading.style.left=zxcPos(this.thumbs[nu][0])[0]+(this.thumbs[nu][0].width-this.loading.width)/2+'px';
   this.loading.style.top=zxcPos(this.thumbs[nu][0])[1]+(this.thumbs[nu][0].height-this.loading.height)/2+'px';
  }
  var src=this.thumbs[nu][1];
  this.thumbs[nu][1]=new Image();
  this.thumbs[nu][1].src=src;
 }
 if (this.thumbs[nu][1].width<50){
  this.cnt++;
  if (this.cnt>20){
   if (this.loading) this.loading.style.visibility='hidden';
   this.thumbs[nu]=false;
   return false;
  }
  return setTimeout(function(){ oop.Expand(nu); },500);
 }
 if (this.loading) this.loading.style.visibility='hidden';
 if (img.src==this.thumbs[nu][1].src) return false;
 this.main.style.visibility='visible';
 img.src=this.thumbs[nu][1].src;
 this.top=[pos[3],pos[3]+Math.max((pos[1]-this.thumbs[nu][1].height)/2,10)];
 zxcBAnimator('opacity',this.main,0,100,this.ms);
 zxcBAnimator('left',this.main,pos[0]/2,Math.max((pos[0]-this.thumbs[nu][1].width)/2,10),this.ms);
 zxcBAnimator('width',this.main,0,this.thumbs[nu][1].width,this.ms);
 zxcBAnimator('top',this.main,pos[1]/2,this.top[1],this.ms);
 zxcBAnimator('height',this.main,0,this.thumbs[nu][1].height,this.ms);
 zxcBAnimator('width',img,0,this.thumbs[nu][1].width,this.ms);
 zxcBAnimator('height',img,0,this.thumbs[nu][1].height,this.ms);
}

zxcThumbNail.prototype.Close=function(){
 this.main.style.visibility='hidden';
 this.main.getElementsByTagName('IMG')[0].src=this.mainsrc;
}

zxcThumbNail.prototype.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); });
 else {
  var prev=o['on'+t];
  if (prev) o['on'+t]=function(e){ prev(e); oop[f](p); };
  else o['on'+t]=o[f];
 }
}

function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}

function zxcPos(obj){
 var rtn=[obj.offsetLeft,obj.offsetTop];
 while(obj.offsetParent!=null){
  var objp=obj.offsetParent;
  rtn[0]+=objp.offsetLeft;
  rtn[1]+=objp.offsetTop;
  obj=objp;
 }
 return rtn;
}

function zxcWWHS(){
 if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
 else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}


/*]]>*/
</script></head>

<body onload="TN=new zxcThumbNail('cls','p.jpg','.jpg','display','loading',1000);" >

<div style="height:100px;"></div>
<img class="cls" src="http://www.igorkoltun.info/photo/h007p.jpg" />
<img class="cls" src="http://www.igorkoltun.info/photo/h010p.jpg" />
<div style="height:500px;"></div>

<div id="display" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" /></div>
<img id="loading" src="http://www.dynamicdrive.com/dynamicindex4/loading.gif" />
</body>

</html>

**firstsnow** · 06-16-2009, 08:48 PM

Originally Posted by vwphillips

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[*/
#display {
  position:absolute;z-Index:101;visibility:hidden;border:solid black 10px
}

#loading {
 position:absolute;z-Index:100;visibility:hidden;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (14-May-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner and an optional 'Bounce'.

// **** Application Notes


// omitted to allow posting

// **** Functional Code - NO NEED to Change


function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
 if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
 if (!obj) return;
 var oop=obj[mde.replace(/\W/g,'')+'oop'];
 if (oop){
  if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
  else oop.update([srt,fin],ms,scale,curve);
 }
 else oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
 return oop;
}

function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
 this.srtfin=[srt,fin];
 this.to=null;
 this.obj=obj;
 this.mde=mde.replace(/\W/g,'');
 this.update([srt,fin],ms,scale,curve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
 clearTimeout(this.to);
 this.time=ms||this.time||2000;
 this.data=[srtfin[0],srtfin[0],srtfin[1]];
 this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
 this.ms=this.mS;
 this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
 this.inc=Math.PI/(2*this.mS);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
 this.ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];
 this.apply();
 if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
 else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Bounce&&this.Bounce[2]>0) this.bounce();
 }
}

zxcBAnimatorOOP.prototype.apply=function(){
 if (isFinite(this.data[0])){
  if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

zxcBAnimatorOOP.prototype.bounce=function(){
 if (this.Bounce[2]%2==0)
 this.Bounce[1]+=(this.Bounce[0]-this.Bounce[1])/(this.Bounce[2])
 this.update([this.data[0],this.Bounce[this.Bounce[2]%2==0?1:0]],this.Bounce[3]/this.Bounce[2]);
 this.Bounce[2]--;
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function zxcThumbNail(cls,from,to,mid,lid,ms){
 var thumbs=zxcByClassName(cls);
 this.thumbs=[];
 for (var z0=0;z0<thumbs.length;z0++){
  this.thumbs[z0]=[thumbs[z0],thumbs[z0].src.replace(from,to)];
  this.addevt(thumbs[z0],'click','Expand',z0);
 }
 this.main=document.getElementById(mid);
 this.mainsrc=this.main.getElementsByTagName('IMG')[0].src;
 this.addevt(this.main,'click','Close');
 this.loading=document.getElementById(lid);
 this.cnt=0;
 this.ms=ms||1000;
}

zxcThumbNail.prototype.Expand=function(nu){
 if (!this.thumbs[nu]) return false;
 var oop=this,pos=zxcWWHS(),img=this.main.getElementsByTagName('IMG')[0];
 if (typeof(this.thumbs[nu][1])=='string'){
  if (this.loading){
   this.cnt=0;
   this.loading.style.visibility='visible';
   this.loading.style.left=zxcPos(this.thumbs[nu][0])[0]+(this.thumbs[nu][0].width-this.loading.width)/2+'px';
   this.loading.style.top=zxcPos(this.thumbs[nu][0])[1]+(this.thumbs[nu][0].height-this.loading.height)/2+'px';
  }
  var src=this.thumbs[nu][1];
  this.thumbs[nu][1]=new Image();
  this.thumbs[nu][1].src=src;
 }
 if (this.thumbs[nu][1].width<50){
  this.cnt++;
  if (this.cnt>20){
   if (this.loading) this.loading.style.visibility='hidden';
   this.thumbs[nu]=false;
   return false;
  }
  return setTimeout(function(){ oop.Expand(nu); },500);
 }
 if (this.loading) this.loading.style.visibility='hidden';
 if (img.src==this.thumbs[nu][1].src) return false;
 this.main.style.visibility='visible';
 img.src=this.thumbs[nu][1].src;
 this.top=[pos[3],pos[3]+Math.max((pos[1]-this.thumbs[nu][1].height)/2,10)];
 zxcBAnimator('opacity',this.main,0,100,this.ms);
 zxcBAnimator('left',this.main,pos[0]/2,Math.max((pos[0]-this.thumbs[nu][1].width)/2,10),this.ms);
 zxcBAnimator('width',this.main,0,this.thumbs[nu][1].width,this.ms);
 zxcBAnimator('top',this.main,pos[1]/2,this.top[1],this.ms);
 zxcBAnimator('height',this.main,0,this.thumbs[nu][1].height,this.ms);
 zxcBAnimator('width',img,0,this.thumbs[nu][1].width,this.ms);
 zxcBAnimator('height',img,0,this.thumbs[nu][1].height,this.ms);
}

zxcThumbNail.prototype.Close=function(){
 this.main.style.visibility='hidden';
 this.main.getElementsByTagName('IMG')[0].src=this.mainsrc;
}

zxcThumbNail.prototype.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); });
 else {
  var prev=o['on'+t];
  if (prev) o['on'+t]=function(e){ prev(e); oop[f](p); };
  else o['on'+t]=o[f];
 }
}

function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}

function zxcPos(obj){
 var rtn=[obj.offsetLeft,obj.offsetTop];
 while(obj.offsetParent!=null){
  var objp=obj.offsetParent;
  rtn[0]+=objp.offsetLeft;
  rtn[1]+=objp.offsetTop;
  obj=objp;
 }
 return rtn;
}

function zxcWWHS(){
 if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
 else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}


/*]]>*/
</script></head>

<body onload="TN=new zxcThumbNail('cls','p.jpg','.jpg','display','loading',1000);" >

<div style="height:100px;"></div>
<img class="cls" src="http://www.igorkoltun.info/photo/h007p.jpg" />
<img class="cls" src="http://www.igorkoltun.info/photo/h010p.jpg" />
<div style="height:500px;"></div>

<div id="display" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" /></div>
<img id="loading" src="http://www.dynamicdrive.com/dynamicindex4/loading.gif" />
</body>

</html>

thanks. it's interesting variant, i'll try

**gloryforixseal** · 06-16-2009, 11:43 PM

Hi there,

I am trying to make my "latest products" images show up larger. I thought about rebuilding the thumbnails but I want the thumbnails to stay the same size on the website, as they are the right size for the "feature product" and such.

So in content/index.tpl I find VAL_IMG_SRC and give it a width to 200. That works but looks like crap because Im just stretching out the thumbnail.

How do you reference the product picture for this and not the thumbnail picture, from the content/index.tpl file?

Thread: Image Thumbnail Viewer

Thread Tools

Search Thread

Image Thumbnail Viewer

Image Thumbnail Viewer

Bookmarks

Bookmarks

Posting Permissions