Reputation: 5820
Is there any good JavaScript/jQuery plug-in that will 'quicklook' an image on click?
I want it simple so when you click the image thumbnail it just zooms out to full size.
Ideally it would be set up by just giving said image a class and the JavaScript/jQuery does the rest.
Similar to the some on the images on this page of Apple.com, see the first image under 'Import'.
I'm not looking for something as complicated as lightbox, no need for slideshow, lengthy introductions and fading out the background.
Upvotes: 4
Views: 1083
Reputation: 2947
You can try my lightbox http://jslightbox.felixhagspiel.de/ It does not require jQuery and is responsive and IE8 compatible.
You can just add the data-jslghtbx
-attribute to your images and it opens them on click. alternatively you can pass references to a bigger image like this data-jslghtbx='img/lightbox/apple-big.jpg'
, so you can use small-sized pictures for thumbnails which will open the big-sized pictures in the lightbox. In addition you can use groups to show multiple images.
Upvotes: 0
Reputation: 532615
Pretty easy using the jQuery UI dialog plugin. This assumes that your thumb
class sizes the image to thumbnail size, reusing the same src url for the image. If the thumb has a different url, i.e., it's a different image, then you need a way to either store the full size image with the thumbnail image (custom attribute?) or transform the thumbnail url into the full size image's url. The latter is trivial if you say append "_thumb" to the name of the image's thumbnail; just use the string replace
function.
$('img.thumb').click( function() {
$('<div><img src="' + $(this).attr('src') + '" /></div>').dialog({
autoOpen: true,
modal: true, // if you want it to be modal
close : function(event,ui) {
$(this).destroy();
}
});
});
You can see something similar in action at: http://cs-services.its.uiowa.edu/launchpad. Click on the announcement in the upper left.
Upvotes: 1