Question

Would like to bring a single image to the front or on top of the page, when selected.

After searching, it seems there are many plug-ins that support this – but also have a lot of other functionality and overhead I don’t need (gallery, support for video, thumbnails, etc.)

Is it possible to just bring a single image on top with basic JavaScript, CSS, HTML and jQuery, specifically in FireFox?

Thank You.

(Please note*: This is an in house product, hence these requirements and constraints.)

Answer 1

Here is a very basic example I whipped up. Hopefully good to learn from:

http://jsfiddle.net/v9LTP/2/

$('img').click(function(){  //bind a click event handler to images
    var img = $(this).clone().addClass('modal').appendTo($('#blackout')); //clone the clicked image element and add to the blackout div which gives the dark background.
    $('#blackout > #close').click(function(){ //attach click handler to close button
        $('#blackout').fadeOut(function(){ //fade the blackout div
            img.remove(); //remove the image element we cloned, so we can do it again.
        }); 
    });
    $('#blackout').fadeIn(); //show the blackout div
});

​