Search code examples
htmltabslightbox2

Lightbox 2 removes target="_blank"'s behavior in data-title


I'm trying to use Lightbox's title function as a simple way to put PDF download links and website URLs so that people are able to see designs in full detail and actually visit interactive websites they've seen as images. I do it this way:

<a href="projects/img_full/my_project.png" data-lightbox="project1" data-title="<a href='http://example.com/' target='_blank'>Visit site</a>">
    <img src="projects/thumbs/my_project.png" alt="Project 1" />
</a>

The link outputs correctly under the Lightbox's image, and target='_blank' remains if I inspect it in my browser. However, the link still opens in the same tab.

Why does this happen? Is there a way to avoid it?


Solution

  • I have the same problem, on my project page I have gallery of places, and in title I have an url to wiki site with description of current place, when I click on the link page opens in the same window, in firebug everything looks fine (with attribute target etc.)

    I found something in Lightbox library that I think is responsible for running urls

      // Enable anchor clicks in the injected caption html.
      // Thanks Nate Wright for the fix. @https://github.com/NateWr
      if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
        this.$lightbox.find('.lb-caption')
          .html(this.album[this.currentImageIndex].title)
          .fadeIn('fast')
          .find('a').on('click', function(event){
            location.href = $(this).attr('href');
          });
      }
    

    but I'm not 100% sure that is this, could someone show where I can update code and depened opening links by the "target" attribute?

    EDIT:

    ok, found solution to this, need to replace code above with this and it works for me, found it on github https://github.com/lokesh/lightbox2/pull/299/files

    if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
                this.$lightbox.find('.lb-caption')
                        .html(this.album[this.currentImageIndex].title)
                        .fadeIn('fast')
                        .find('a').on('click', function (event) {
                    if ($(this).attr('target') !== undefined) {
                        window.open($(this).attr('href'), $(this).attr('target'));
                    } else {
                        location.href = $(this).attr('href');
                    }
                });
            }