Enlarge image rollover

/*
*  Cycle Image Size Rollover. This script written for buddypress to create rollover effect on avatars.
*  The 'enlargementRatio' argument is the multiplyer applied to the original icon size
*  The 'childNumber' argument is to target the right img node, typically is 1 or zero
*  Add this to the avatar <a> parent:  onmouseover="cycleChildImage(this,1.1);" onmouseout="cycleChildImage(this,1.1);"
*  Add this to any image:  onmouseover="cycleImage(this,1.1,1);" onmouseout="cycleImage(this,1.1,1);"
*/

var existingWidth;
var existingHeight;
var isLarge = false;

function cycleImage(element,enlargementRatio){
var imageElement = element;
if(isLarge == true) reduceImage(imageElement,enlargementRatio);
else enlargeImage(imageElement,enlargementRatio);
}

function cycleChildImage(element,enlargementRatio,childNumber){
var imageElement = element.childNodes.item(childNumber);
if(isLarge == true) reduceImage(imageElement,enlargementRatio);
else enlargeImage(imageElement,enlargementRatio);
}

function enlargeImage(imageElement,enlargementRatio){
existingWidth = imageElement.width;
existingHeight = imageElement.height;
imageElement.style.width = (existingWidth * enlargementRatio) + 'px';
imageElement.style.height = (existingHeight * enlargementRatio) + 'px';
isLarge = true;
}

function reduceImage(imageElement,enlargementRatio){
imageElement.style.width = existingWidth + 'px';
imageElement.style.height = existingHeight + 'px';
isLarge = false;
}

2 Comments

You must be logged in to post a comment.


  1. This is a javascript snippet, based on your comment it looks like you are pasting it into a php file. Just wrap the functions in a js code block on the page template you are using.


  2. hi,

    I understand that it was long ago, but is there any way to get it working again?

    if I add full code to functions.php, I get error "Parse error: syntax error, unexpected T_VAR..." regarding var existingWidth;

    thanks!