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/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 ?

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./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 ?

• jquery
• jquery-ui
• lightbox
• javascript

4 Answers 4

Get a fresh lightbox.js file from here: Lightbox 2 plugin
Open lightbox.js in any editor:
Find the below written code:

Lightbox.prototype.enable = function() {
  var _this = this;
  return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) {
    _this.start($(e.currentTarget));
    return false;
  });
};

In that replace third line with following code:

return $('body').on('click', 'img[rel^=lightbox], area[rel^=lightbox]', function(e) {

Now inside lightbox.js search for the word href and replace it with src. Do this for all href in that .js file.
Include this .js file in your project.
HTML code for your image will bee:

<img class="popout" 
     src="www.photobucket./myimage.jpg" 
     rel="lightbox[plants]" 
     title="Say something about this image">

Basically what we are changing is

• adding rel attribute:
  If two or more images contains same rel attribute they will shown as image set.
• Adding Title attribue:
  It will just show info of your image on light box.

UPDATE:
If your thumbnail image src is different than your actual image src then you can add one more attribute to the <image> as value:

<img class="popout" 
     src="thumbnail path" 
     value="actual image path"
     rel="lightbox[plants]" 
     title="Say something about this image">

But again to add this you have to change the href keyword from lightbox.js to value.
Then you all done.

You can use pretty much any lightbox-like script which has ability to call it manually. Example (using fancybox): http://jsfiddle/eXaGn/

Like with fancbybox:

$("img").click(function() {    
    $.fancybox.open(this.src);    
    return false;    
});​

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

Then your code can look like this:

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

I needed a similar functionality and decided on SimpalModal

http://www.ericmmartin./projects/simplemodal/

I liked that you could pass in a html string and it would generate the modal from that and I could generate a modal programatically, no need for embedded content nor tags to trigger the modal