Skip to content

Instantly share code, notes, and snippets.

@tlehman
Created March 17, 2012 00:43
Show Gist options
  • Select an option

  • Save tlehman/2053912 to your computer and use it in GitHub Desktop.

Select an option

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
Copy Markdown

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