Image Thumbnail Viewer (update)

[jscheuer1]

1) CODE TITLE: Image Thumbnail Viewer (update)

2) AUTHOR NAME/NOTES: Dynamic Drive - update by jscheuer1

3) DESCRIPTION: This simple and elegant script can be made AJAX friendly, while at the same time eliminating the need for onload/onunload events, and reducing the overall code size. This means that users may click on links before the page has loaded and still have the script perform as expected.

Also rewritten so as to facilitate compression by jsmin, if desired.

4) 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',

 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, dom = document.getElementById,
  scroll_top = ie? this.standardbody.scrollTop : window.pageYOffset,
  scroll_left = ie? this.standardbody.scrollLeft : window.pageXOffset,
  docwidth = ie? this.standardbody.clientWidth : window.innerWidth - this.scrollbarwidth,
  docheight = ie? this.standardbody.clientHeight: window.innerHeight,
  docheightcomplete = this.standardbody.offsetHeight > this.standardbody.scrollHeight?
   this.standardbody.offsetHeight : this.standardbody.scrollHeight, //Full scroll height of document
  objwidth = divobj.offsetWidth, //width of div element
  objheight = divobj.offsetHeight, //height of div element
//Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
  topposition = docheight>objheight? scroll_top + docheight / 2 - objheight / 2 + 'px' : scroll_top + 10 + 'px';
  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(function(){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 listening to the page for clicks on 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 && t.nodeName.toLowerCase() != 'a')
    t = t.parentNode;
   if (t.nodeName && t.nodeName.toLowerCase() == '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.init();
thumbnailviewer.createthumbBox(); //Output HTML for the image thumbnail viewer

[ddadmin]

Interesting! I'll take a closer look at the changes in the next couple of days, and if they are significant enough to justify replacing the current version with, do just that.

[jscheuer1]

Well, the major change is in the init function. Rather than setting onclick events onload for each rel="thumbnail" link, it sets a single event while the browser is parsing the page to listen for all clicks. If said clicks happen to be on links with rel="thumbnail", then the code performs.

This allows it to work both before page load is completed, and on imported content (the AJAX friendly part) with links that have the rel="thumbnail" syntax.

So no onload code. I also felt it reasonable to remove the onunload code, as only one event is attached/added. Hardly worth worrying about visa vis memory leaks.

The other code changes are merely cosmetic, to allow jsmin compression if desired, and to conform to my current coding indent/quoting style, the latter being just how I best read/write code, having nothing to do with its functionality.