Skip to content

Instantly share code, notes, and snippets.

@tlehman
Created March 17, 2012 00:43
Show Gist options
  • Save tlehman/2053912 to your computer and use it in GitHub Desktop.
Save tlehman/2053912 to your computer and use it in GitHub Desktop.
Make images larger when clicked, and restores original size on next click, (depends on jQuery or similar library)
// imgscale by tlehman: Fri 03/16/2012
// toggles the size of images by some factor, defined as the variable "scale"
//
// NOTE: To change how much an image scales, just set the "scale" variable to
// some number, with 1.0 being 100%, 2.0 being 200% ... etc
//
// select images
var imgs = $("img");
// to be attached to each image's onclick event
function imgScaleToggle() {
// get current image size
var h=$(this).height();
var w=$(this).width();
// scale determines how much the image is to be magnified
var scale = 2.0;
// check if image has been clicked before
if($(this).hasClass("clicked")) {
var factor=1/scale;
$(this).removeClass("clicked");
} else {
var factor=scale;
$(this).addClass("clicked");
}
$(this).css("height", h*factor);
$(this).css("width", w*factor);
}
// attach the handler to all of the selected images' onclick methods
imgs.click( imgScaleToggle );
@axolotlagatsuma
Copy link

Thanks man, gonna try it on my website!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment