I searched a lot, but didn't find a solution...
Short version
Is there a way to call the Lightbox without the <a>
-tag?
Long version :P
I want to display my pics in a table, for every pic a new table cell.
The pic should be centered.
It should be possible to click anywhere inside the table cell to open the lightbox.
The size of the pic is 100px * 100px.
At the moment the code for a table cell looks like this:
<td align="center" width="150" height="150">
<a href="mypic.jpg" data-lightbox="mygallery" data-title="My Title" class="linkcell">
<img src="mypic.jpg">
</a>
</td>
Additional CSS-File
a.linkcell{
display: block;
width: 100%;
height: 100%;
}
td:hover{
background-color: #b6849c;
}
Since the position of the pic isn't centered(hovering on the left table cell)
and I can't change the position, no matter what I do, I'd like to use onclick
, which is working quite fine, but for lightbox.
That came to my mind:
<td align="center" width="150" height="150" onclick="...">
<img src="mypic.jpg">
</td>
What do I have to write instead of ..., to open the lightbox? It'd be okay to use some JavaScript. An alternative to lightbox2 would be okay, too. Or do you have another solution?
Thank you so much in advance, MasterBolle
i think this would help you :
//set album values
IMG = $('<a href="...">')
.attr('data-lightbox','roadtrip')
.append('<img src="...">')
//lightbox open:
IMG.click(function(){
lighbox.start($(this));
return false;
})
Reference : lightbox 2: how to add dynamically images via javascript