Keep image inside div - Image Thumbnail Viewer II

**Nightasy** · 07-18-2013, 08:39 AM

1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem:

I am trying to keep the large image fit to a specific div size. Percentages are fine. I searched the forums already and found a script change here:
http://www.dynamicdrive.com/forums/s...p-title-format

The problem is that when using the code on that thread the image will still expand in height outside of the div. Landscape orientation photos are fine since they are wider then they are in height. It does keep it from expanding outside of the div due to width but for portrait orientation type photos the image just goes right outside the div in height. I've tried adding max-height to the css code for the DDImage class and that doesn't seem to do me any good at all.

What I am hoping is for a way to keep that enlarged image inside that div. Properly ratio'd in height:width but inside the div.

Edit: Oh and before I forget to say so, thanks very much for the scripts and the help.

**Beverleyh** · 07-18-2013, 12:21 PM

This might be a job for CSS3's "background-size" http://www.css3.info/preview/background-size/

If you need further help, please post a link to your page.

**vwphillips** · 07-18-2013, 01:52 PM

with fade only and no captions at the moment

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>
</head>

<body>
<a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea,fxduration:1000" title="The Universe is just waiting to be explored">Saturn #1</a><br />
<a href="http://www.nasa.gov/images/content/168177main_image_feature_749_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea,fxduration:1000,link:http://dynamicdrive.com">The Moon #1</a><br />


<div id="loadarea" style="position:relative;width:600px;height:300px;border:solid red 1px;"></div>

<script type="text/javascript">
/*<![CDATA[*/
// ThumbnailViewer (18-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcThumbnailViewer={

 loadingimage:'http://www.vicsjavascripts.org.uk/StdImages/loading.gif',

 init:function(){
  var lks=document.body.getElementsByTagName('A'),r,i,o,a,ld,z0=0,z0a;
  for (;z0<lks.length;z0++){
   r=lks[z0].rev;
   if (lks[z0].rel=='enlargeimage'&&lks[z0].href&&r){
    r=r.split(',');
    o={lk:lks[z0]}
    for (z0a=0;z0a<r.length;z0a++){
     i=r[z0a].indexOf(':');
     if(i>2){
      o[r[z0a].slice(0,i)]=r[z0a].slice(i+1);
     }
    }
    i=o.targetdiv;
    o.obj=document.getElementById(i);
    if (o.obj){
     o.ni=new Image();
     o.src=lks[z0].href;
     o.preload!='no'?o.ni.src=o.src:null;
     lks[z0].onclick=function(){ return false; }
     this.addevt(lks[z0],o.trigger=='click'?'click':'mouseover','show',o);
     o.img=document.createElement('IMG');
     a=document.createElement('A');
     o.link?a.href=o.link:null;
     o.img.style.position='absolute';
      o.img.style.left='-3000px';
     o.img.style.top='-30000px';
     o.img.style.borderWidth='0px';
     o.ow=o.obj.offsetWidth;
     o.oh=o.obj.offsetHeight;
     o.a=[o.img,0];
     o.ms=isFinite(o.fxduration*1)?o.fxduration*1:20;
     o.i=i;
     a.appendChild(o.img);
     o.obj.appendChild(a);
     if (!this['zxcload'+i]){
      ld=o.img.cloneNode(false);
      ld.src=this.loadingimage;
      ld.id='tst';
      ld.style.zIndex='101';
      o.obj.appendChild(ld);
      this['zxcload'+i]=[ld]
     }
     this['zxc'+i]=o;
    }
   }
  }
 },

 show:function(o){
  var oop=this,r,a=this['zxc'+o.i],ld=this['zxcload'+o.i];
  clearTimeout(ld[1]);
  clearTimeout(a.to);
  a.a[0].style.zIndex='0';
  this.animate(a,a.a,a.a[1],0,new Date(),o.ms);
  if (o.ni.width>40){
   ld[0].style.top='-30000px';
   r=o.ni.width/o.ni.height;
   if (o.ni.width>o.ow){
    o.ni.width=o.ow;
    o.ni.height=o.ni.width/r;
   }
   if (o.ni.height>o.oh){
    o.ni.height=o.oh;
    o.ni.width=o.ni.height*r;
   }
   this.animate(o,o.a,o.a[1],100,new Date(),o.ms);
   o.img.style.zIndex='100';
   o.img.style.width=o.ni.width+'px';
   o.img.style.height=o.ni.height+'px';
   o.img.style.left=(o.ow-o.ni.width)/2+'px';
   o.img.style.top=(o.oh-o.ni.height)/2+'px';
   o.img.src=o.ni.src;
   this['zxc'+o.i]=o;
  }
  else {
   o.ni.src=o.src;
   ld[0].style.left=(o.ow-ld[0].width)/2+'px';
   ld[0].style.top=(o.oh-ld[0].height)/2+'px';
   ld[1]=setTimeout(function(){ oop.show(o); },200);
  }
 },

 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[1]=n;
   oop.opc(a[0],n);
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[1]=t;
   t==0?a[0].style.top='-30000px':null;
   oop.opc(a[0],t);
  }
 },

 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;
 }

}

zxcThumbnailViewer.init();
/*]]>*/
</script>
</body>

</html>