Results 1 to 7 of 7

Thread: http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

  1. #1
    Join Date
    Jan 2009
    Location
    Johannesburg, South Africa
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

    1) Script Title: Image Thumbnail Viewer

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

    3) Describe problem: I realise that someone else has queried this but I could not find a resolution. I have the problem on a page with many images that if you click on a thumbnail before all images have downloaded on the page then the image clicked on is displayed in a window over-writing the current page instead of opening up in the image window.

    Please can someone help me as to what I can do to prevent this. My affected page is http://www.tanyatiboxers.co.za/a_litter.html

    Thanks so much for any help offered!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Use this version of the script I just modified:

    Code:
    // -------------------------------------------------------------------
    // Image Thumbnail Viewer Script- By Dynamic Drive, available at: http://www.dynamicdrive.com
    // Last updated: January 1st, 2009- eliminate need for onload/onunload events
    // -------------------------------------------------------------------
    
    var thumbnailviewer={
    enableTitle: true, //Should "title" attribute of link be used as description?
    enableAnimation: true, //Enable fading animation?
    definefooter: '<div class="footerbar">Click window to Close X</div>', //Define HTML for footer interface
    defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML for "loading" div
    
    /////////////No need to edit beyond here/////////////////////////
    
    scrollbarwidth: 16,
    opacitystring: 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',
    targetlinks:[], //Array to hold links with rel="thumbnail"
    
    createthumbBox:function(){
    //write out HTML for Image Thumbnail Viewer plus loading div
    document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div id="thumbImage"></div>'+this.definefooter+'</div>')
    document.write('<div id="thumbLoading">'+this.defineLoading+'</div>')
    this.thumbBox=document.getElementById("thumbBox")
    this.thumbImage=document.getElementById("thumbImage") //Reference div that holds the shown image
    this.thumbLoading=document.getElementById("thumbLoading") //Reference "loading" div that will be shown while image is fetched
    this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
    },
    
    
    centerDiv:function(divobj){ //Centers a div element on the page
    var ie=document.all && !window.opera
    var dom=document.getElementById
    var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
    var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
    var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth
    var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
    var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document
    var objwidth=divobj.offsetWidth //width of div element
    var objheight=divobj.offsetHeight //height of div element
    var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px" //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
    divobj.style.left=docwidth/2-objwidth/2+"px" //Center div element horizontally
    divobj.style.top=Math.floor(parseInt(topposition))+"px"
    divobj.style.visibility="visible"
    },
    
    showthumbBox:function(){ //Show ThumbBox div
    thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div
    this.centerDiv(this.thumbBox)
    if (this.enableAnimation){ //If fading animation enabled
    this.currentopacity=0.1 //Starting opacity value
    this.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 20)
    }
    },
    
    
    loadimage:function(link){ //Load image function that gets attached to each link on the page with rel="thumbnail"
    if (this.thumbBox.style.visibility=="visible") //if thumbox is visible on the page already
    this.closeit() //Hide it first (not doing so causes triggers some positioning bug in Firefox
    var imageHTML='<img src="'+link.getAttribute("href")+'" style="'+this.opacitystring+'" />' //Construct HTML for shown image
    if (this.enableTitle && link.getAttribute("title")) //Use title attr of the link as description?
    imageHTML+='<br />'+link.getAttribute("title")
    this.centerDiv(this.thumbLoading) //Center and display "loading" div while we set up the image to be shown
    this.thumbImage.innerHTML=imageHTML //Populate thumbImage div with shown image's HTML (while still hidden)
    this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference shown image itself
    if (this.featureImage.complete)
    thumbnailviewer.showthumbBox()
    else{
    this.featureImage.onload=function(){ //When target image has completely loaded
    thumbnailviewer.showthumbBox() //Display "thumbbox" div to the world!
    }
    }
    if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug: panoramio.com/blog/onload-event/
    this.featureImage.src=link.getAttribute("href")
    this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
    thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div, game over
    }
    },
    
    setimgopacity:function(value){ //Sets the opacity of "thumbimage" div per the passed in value setting (0 to 1 and in between)
    var targetobject=this.featureImage
    if (targetobject.filters && targetobject.filters[0]){ //IE syntax
    if (typeof targetobject.filters[0].opacity=="number") //IE6
    targetobject.filters[0].opacity=value*100
    else //IE 5.5
    targetobject.style.filter="alpha(opacity="+value*100+")"
    }
    else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
    targetobject.style.MozOpacity=value
    else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
    targetobject.style.opacity=value
    else //Non of the above, stop opacity animation
    this.stopanimation()
    },
    
    opacityanimation:function(){ //Gradually increase opacity function
    this.setimgopacity(this.currentopacity)
    this.currentopacity+=0.1
    if (this.currentopacity>1)
    this.stopanimation()
    },
    
    stopanimation:function(){
    if (typeof this.opacitytimer!="undefined")
    clearInterval(this.opacitytimer)
    },
    
    
    closeit:function(){ //Close "thumbbox" div function
    this.stopanimation()
    this.thumbBox.style.visibility="hidden"
    this.thumbImage.innerHTML=""
    this.thumbBox.style.left="-2000px"
    this.thumbBox.style.top="-2000px"
    },
    
    
    dotask:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
    var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
    if (target.addEventListener)
    target.addEventListener(tasktype, functionref, false)
    else if (target.attachEvent)
    target.attachEvent(tasktype, functionref)
    },
    
    init:function(){ //Initialize thumbnail viewer script by scanning page and attaching appropriate function to links with rel="thumbnail"
    if (!this.enableAnimation)
    this.opacitystring=""
    var pagelinks=function(e){
    var t;
    e = e || window.event;
    t = e.target || e.srcElement;
    while(t.parentNode && t.nodeName != 'A')
    t = t.parentNode;
    if (t.nodeName == 'A' && t.rel && t.rel=="thumbnail"){ //Begin if statement
    if(e.preventDefault) e.preventDefault();
    thumbnailviewer.stopanimation(); //Stop any currently running fade animation on "thumbbox" div before proceeding
    thumbnailviewer.loadimage(t); //Load image
    return false;
    } //end if statement
    return undefined;
    }
    this.dotask(document, pagelinks, 'click');
    //Reposition "thumbbox" div when page is resized
    this.dotask(window, function(){if (thumbnailviewer.thumbBox.style.visibility=="visible") thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)}, "resize")
    
    
    } //END init() function
    
    }
    
    thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail viewer
    thumbnailviewer.init()
    It doesn't require the page to load, it's ready to go as soon as someone can click on a link.
    - John
    ________________________

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

  3. #3
    Join Date
    Jan 2009
    Location
    Johannesburg, South Africa
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John.

    I bow in the presence of such greatness!

    That seems to work great, no white page with just the image, but it does appear to wait until the entire page has loaded before it displays the image - 'loading image' is displayed while all the images load. Is that correct? This is not a huge problem, and is of course much better than the previous version, so if this is a quirk of the script I can sure live with that.

    Thank you SO much for your help!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    I didn't think of that, but of course something like that would happen. The browser and the server do a dance whenever they load the page. Items are requested, items are sent, generally they are sent no more than 2 at a time, in the order that they're found, but also in the order requested. When the browser asks for the larger image, if it is still waiting for the results of all of the rest of the page requests, the request for the larger image must wait. The only way to avoid that would be to preload all of the larger images, but that would take so much more time, and in a sense be unnecessary unless the user were going to be viewing everyone.
    - John
    ________________________

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

  5. #5
    Join Date
    Jan 2009
    Location
    Johannesburg, South Africa
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John.

    Thanks for the explanation - makes sense to me and I did not know that was how it worked - still learning at the moment.

    Thanks again for your help - it looks so much more professional now that a white screen plus image is not displayed.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    One other thing that occurred to me is that you can always do anything you can to speed up the loading of the rest of the page. Things like but not limited to (in approximate order of usefulness, varies with different pages):

    • Optimize your images.
    • Use less images.
    • Remove tables, especially nested tables.
    • Use less scripts.
    • Use less css.
    • Remove anything unnecessary, and compress the white space out of all text and code wherever possible without damage.
    - John
    ________________________

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

  7. #7
    Join Date
    Jan 2009
    Location
    Johannesburg, South Africa
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John.

    Thanks for this. I'll see what I can do. Images are already optimised and I can't really reduce the number of images due to the nature of the page.

    At the end of the day, the fact that the 'loading image' is displayed should keep people waiting as they can see something is happening, albeit rather slowly due to the number of images!

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
  •