6

Turning a caption into a link doesn't work in Lightbox 2.51 downloaded from here
Here is the code:

<a href="images/examples/image-1.jpg" rel="lightbox" 
  title="&lt;a target='_self' href='http://www.google.com'&gt;Google&lt;/a&gt;">
  <img src="images/examples/thumb-1.jpg" alt="" />
</a>

What should I do?
Thanks :)

Junuxx
  • 14,011
  • 5
  • 41
  • 71

4 Answers4

11

I found a solution for this problem in the lightbox.js. You must edit the if case, adding the else condition that avoid always return false when you click in the div "lightbox" .

 $lightbox.hide().on('click', function(e) {
    if ($(e.target).attr('id') === 'lightbox') { 
        _this.end();
        return false;
    }
    else { // HERE
        return true; 
    }
  });
zenpoy
  • 19,490
  • 9
  • 60
  • 87
Rafael Rudnik
  • 111
  • 1
  • 3
  • This method will probably work in most cases but I think it could have some unintentional side effects, because it will effect all clicks that bubble up to the lightbox. I've added a more limited intervention in my answer below, which will only register an event on links inside the caption. – NateWr Mar 25 '14 at 13:38
3

I found what I think is a better solution than those listed above using Lightbox 2 version 2.6. On line 252 of lightbox.js (unminified), you'll see this line which adds the caption:

this.$lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast');

Once the caption is added, you can register the click event and force the browser to follow any link in the caption by adding onto the chain like this:

this.$lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast').find('a').on('click', function() { location.href = $(this).attr('href') });

I've initiated a pull request with this change so you can follow the status and any further discussions there.

NateWr
  • 235
  • 3
  • 12
1

Try using javascript in tag

onClick="window.location.href='http://www.google.com'"

Sample

    <a href="images/examples/image-1.jpg" rel="lightbox" 
  title="&lt;a target='_self' onClick=&quot;window.location.href=&#x27;http://www.google.com&#x27;&quot;   href='http://www.google.com'&gt;Google&lt;/a&gt;">
 <img src="images/examples/thumb-1.jpg" alt="" />
</a>
GustavoAndrade
  • 11
  • 1
0

I have been unable to get any of the answers here to work for me. However, I have found that Slimbox2 does work and is very straightforward to swap as it uses the same syntax.

Badger
  • 467
  • 4
  • 17