How to link lightbox2 in a table?

Question

On my webpage, I have added a table and converted all into links by using the following code:

HTML- <tr data-href="../images/accept.png" > <td> Blah Blah </td> </tr>

JQUERY-

$(document).ready(function(){
    $('table tr').click(function(){
        window.location = $(this).data('href');
        return false;
    });
});

I want to use lightbox on each of these links such that whenever I click on any row, lightbox opens up. I am using lightbox2 and unable to find a way to do it. This is the page for lightbox2: http://lokeshdhakar.com/projects/lightbox2/

Lightbox2 requires `data-lightbox="something"`. Did you try adding that to your tr: ` Blah Blah ` — Macsupport, Aug 18 '15 at 22:06
I did try it. It doesn't work. lightbox specifically looks for tags and I am using tag. — Mansimar Singh, Aug 19 '15 at 06:14

score 0 · Answer 1 · answered Aug 18 '15 at 21:03

Looked at the lightbox2 page, and it wants you to use an <a> tag, so I'd recommend doing that. I don't know this tool very well, but it probably looks specifically for <a> tags, so trying to mimic that functionality won't do the trick.

You could try reworking your table layout by wrapping the content of an entire row in an <a> tag:

<tr>
  <td>
    <a href='#' data-lightbox='test'>
      <div class='col1'>Col1</div>
      <div class='col2'>Col2</div>
    </a>
  </td>
</tr>

This would require you to do the 'cell' formatting with styling on your DIVs, but you might get it to work. If you're not married to the table layout, then you've got options. (Also, tables within tables, while a pain in the ass, might do what you want...)

In my experience, don't fight the API / tool you're trying to work with. If you want to use it, figure out a way to use it rather than hacking it. Hacking it can be fun, but will ultimately lead to headaches (especially in production code!!!).

How to link lightbox2 in a table?

1 Answers1