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.)
