Watson.me.uk

I use the funky highslide.js javascript to do the thumbnail enlargement on here. Previously I have had to add the markup for each thumbnail manually, which is a bit boring.

So tonight I wrote a bit of code to apply the highslide stuff onto any thumbnails on the page (which don’t already have it). And here it is.

function highSlideEm(){
  //This function will loop through all the a tags on the page that link to images,
  //have a thumbnail image as a child tab and apply the highslide stuff.

  var arrLinks = document.getElementsByTagName("a");
  var iLink;
  for(iLink = 0; iLink < arrLinks.length; iLink++){
    var objLink = arrLinks[iLink];
    //alert(objLink.innerHTML);
    //do we have an img tag as the immediate child?
    var arrImgs = objLink.getElementsByTagName("img");
    if(arrImgs.length == 1){
      //alert(arrImgs[0].src);
      if(isThumbnail(arrImgs[0].src) == true){
        addClass(objLink, 'highslide');
        //alert(objLink.onclick);
        //if the onclick event is undefined then add the highslide stuff
        if( (objLink.onclick == undefined) || (objLink.onclick == 'undefined') ){
          //we need to add it
          //alert('add it');
          objLink.onclick = function(){ return hs.expand(this); };
        };//end if onclick
      };//end if isThumbnail
      //isThumbnail(arrImgs[0].src);
    };//end if
  };//end for iLink

};//end function highSlideEm

function isThumbnail(sPath){
  //Is the path passed in a thumbnail? Worked out from the filename,
  //which will end in .thumbnail.ext
  //alert(sPath);
  var lDot = sPath.lastIndexOf(".");
  //alert('lDot = ' + lDot);
  if(lDot > -1){
    var nDot = sPath.lastIndexOf(”.”, lDot - 1);
    if(nDot > -1){
      var bitName = sPath.substring(nDot + 1, lDot);
      //alert(bitName);
      if(bitName.toLowerCase() == “thumbnail”){
        return true;
      };//end if bitName
    };//end if nDot
  };//end if lDot
  return false;
};//end function isThumbnail

function addClass(objLink, sClass){
  //This function will examine the list of classNames applied to a link,
  //if the sClass specified one is not yet applied it will add it
  var itExists = false;
  var arrC = objLink.className.split(” “);
  var iC;
  for(iC = 0; iC < arrC.length; iC++){
    //look for a match (case sensitive)
    if(arrC[iC] == sClass){
      itExists = true;
    };//end if
  };//end for iC

  if(itExists == false){
    objLink.className += ' ' + sClass;
  };//end if
};//end function

Maybe someone will find it useful.

(View the source to get a nicely spaced out, readable version. Wordpress has messed up the display, I’ve not really done a left-hand margin Mike.)