Created
March 17, 2012 00:43
-
-
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks man, gonna try it on my website!