Simple JavaScript/jQuery plug-in that 'quicklooks' images.

Question

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.

Answer 1

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.

Answer 2

This might be the one that you're looking for:

http://gettopup.com/

I hope it helps.