A simple JavaScript / jQuery plug-in that looks like "quicklooks"

Question

Is there any good javascript / jQuery that will be "quicklook" for an image on click?

I want it to be simple, so when you click the thumbnail of the image, it just scales to full size.

Ideally, this would be fine-tuned by simply providing the image to the class, and JavaScript / jQuery will do the rest.

Like some of the images on this Apple.com page, see the first image in the Import section.

I’m not looking for something as complicated as a lightbox, I don’t need slide shows, lengthy presentations and the disappearance of the background.

Answer 1

This may be the one you are looking for:

http://gettopup.com/

Hope this helps.

Answer 2

It's pretty easy to use the jQuery UI dialog plugin. This assumes your thumb class reduces the size of the image to thumbnails by reusing the same src URL for the image. If the thumb has a different url i.e. This is another image, then you need a way to either save the full size image using the thumbnail image (custom attribute?), Or convert the sketch thumbnail to a full size URL. The latter is trivial, if you say add “_thumb" to the image thumbnail name; just use the replace string.

 $('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 like this in action at: http://cs-services.its.uiowa.edu/launchpad . Click the ad in the upper left.

Answer 3

You can try my lightbox http://jslightbox.felixhagspiel.de/ It does not require jQuery and is responsive and compatible with IE8. You can simply add the data-jslghtbx to your images and open them when clicked. for example, you can transfer links to a larger image like this data-jslghtbx='img/lightbox/apple-big.jpg' , so you can use small images for thumbnails that open large dimensions in a lightbox. In addition, you can use groups to display multiple images.