3

I want to use this library: http://lokeshdhakar.com/projects/lightbox2/

I can't attach rel="lightbox" to each image so I want to use jQuery to trigger the lightbox.

I was thinking about something like:

$('img').click(function(){
  //triger lightbox for this image
  //use self src as href
});

How can I trigger the lightbox for one image?

XCS
  • 27,244
  • 26
  • 101
  • 151
  • The lightbox uses the link on a thumbnail image to display the larger version. How would applying the effect to an image work? – j08691 May 30 '12 at 16:32
  • The image is not a thumbnail i'm showing, it's just the large image width max-width and max-height attributes set. I want the lightbox to show the same image (the link should be the same as image src) – XCS May 30 '12 at 16:39
  • I don't think the lightbox you pointed to can do that. – j08691 May 30 '12 at 16:40

2 Answers2

3

Solved the problem by wrapping the img tag in an a tag and triggering click on a after that.

$('img').click(function () {
    $(this).wrap('<a href="' + $(this).attr("src") + '" rel="lightbox" />');
    $(this).parent('a').trigger('click');
});
XCS
  • 27,244
  • 26
  • 101
  • 151
1

That plugin has to have the rel="lightbox" to work. That's mentioned on the How to use

You can add that attribute with jquery using

$('img').attr('rel', 'lightbox');

You will need to add that line inside your document ready function.

If that still doesn't work for you then I'd suggest you use this other plugin

http://fancyapps.com/fancybox/

Colin Brock
  • 21,267
  • 9
  • 46
  • 61
Federico Giust
  • 1,803
  • 4
  • 20
  • 45