Results 1 to 4 of 4

Thread: Keep image inside div - Image Thumbnail Viewer II

  1. #1
    Join Date
    Jul 2013
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Keep image inside div - Image Thumbnail Viewer II

    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.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,946
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

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

  4. #4
    Join Date
    Jul 2013
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thanks very much!

Similar Threads

  1. Replies: 4
    Last Post: 02-09-2013, 08:55 PM
  2. Image Thumbnail Viewer II - Default Large Image on Page load
    By doriggidy in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-17-2012, 03:53 AM
  3. Resolved Loading larger image on page load, image thumbnail viewer 2
    By Lucy92 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 11-24-2010, 09:38 PM
  4. image thumbnail viewer II (set image sizes, default image)
    By ramtanion in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 05-07-2008, 12:26 AM
  5. Setting the size of a single popup link inside Image Thumbnail Viewer II
    By Vagrant Logic in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-08-2005, 06:43 AM

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
  •