Question

I’m looking for a library or script to open a single image in a lightbox.
All the libs I found so far do need a html-anchor as parent-tag of the image and a thumbnail.

<a href="image.jpg" class="popout"><img src="thmumbnail.jpg"></a>

I don’t have any thumbnails since I’m loading/embedding the pics directly from an online storage place in “web-friendly” resolution/size. So what I would like to be able to do, is something like this:

<img class="popout" src="www.photobucket.com/myimage.jpg" height="300" width="500">

while the height/width would be specified in a css as well. One reasen I would like to do it that way is, I already have articles written with about 100pics. So I don’t want to embed them all in anchors…

so back to the question: is there a lib or script that let me do that ?

Answer 1

You can use Colorbox: http://www.jacklmoore.com/colorbox

Then your code can look like this:

$(".popout").on("click", showImage);
function showImage(e)
{
    $.colorbox({href:$(e.currentTarget).attr("src")});
}