[hazael00Participant]

Hello,
I’m trying to figure out how to link using a lightbox.

What I need is when user click the small images or thumbnails a lightbox opens with a higher resolution image.

Searching on the forum I found this:

<a href="http://localhost:8888/x/wp-content/uploads/2014/08/slide1.jpg">Trigger LightboX!</a>

[lightbox selector=".link-lightbox"]

But is not working on my site.

Here is the code I’m using (inside a text element on cornerstone)

<div style="width:355px; height:370px;border:solid 1px #DDDDDD; margin-bottom:5px;"><a href="http://zstreambox.com/w/wp-content/uploads/2016/03/ZSBPackagenbg.jpg" class="link-lightbox"><img src="http://zstreambox.com/w/wp-content/uploads/2016/03/ZSBPackageSM.jpg" alt="Z Stream Box" width="353" height="368" class="alignnone size-full wp-image-13918" /></a></div>
<div style="width:85px; height:85px;border:solid 1px #DDDDDD; float:left; margin-right:5px;"><a href="#"><img src="http://zstreambox.com/w/wp-content/uploads/2016/03/ZSB45nbgSSM2.jpg" alt="Z Stream Box" width="84" height="84" class="alignnone size-full wp-image-13915" /></a></div>
<div style="width:85px; height:85px;border:solid 1px #DDDDDD; float:left; margin-right:5px;"><a href="#"><img src="http://zstreambox.com/w/wp-content/uploads/2016/03/ZSB45nbgSSM.jpg" alt="Z Stream Box" width="84" height="84" class="alignnone size-full wp-image-13917" /></a></div>
<div style="width:85px; height:85px;border:solid 1px #DDDDDD; float:left; margin-right:5px;"><a href="#"><img src="http://zstreambox.com/w/wp-content/uploads/2016/03/ZSBBackSSM.jpg" alt="Z Stream Box" width="84" height="84" class="alignnone size-full wp-image-13914" /></a></div>
<div style="width:85px; height:85px;border:solid 1px #DDDDDD; float:left;"><a href="#"><img src="http://zstreambox.com/w/wp-content/uploads/2016/03/ZSBPackagessm.jpg" alt="Z Stream Box" width="84" height="84" class="alignnone size-full wp-image-13916" /></a></div>

When I click the images they just open on the same window instead of a lightbox.

What code do I need to make this work?

Thanks.

My site is : http://zstreambox.com

Attachments:

You must be logged in to view attached files.

[LelyModerator]

Hi There,

Something like this should work:

<a href="http://localhost:8888/x/wp-content/uploads/2014/08/slide1.jpg" class="link-lightbox">Trigger LightboX!</a>
[lightbox selector=".link-lightbox"]

As you can see, I’ve added link-lightbox on the class field of the link.

Try this code

<div style="width:355px; height:370px;border:solid 1px #DDDDDD; margin-bottom:5px;"><a href="http://zstreambox.com/w/wp-content/uploads/2016/03/ZSBPackagenbg.jpg" class="link-lightbox"><img src="http://zstreambox.com/w/wp-content/uploads/2016/03/ZSBPackageSM.jpg" alt="Z Stream Box" width="353" height="368" class="alignnone size-full wp-image-13918" /></a></div>
<div style="width:85px; height:85px;border:solid 1px #DDDDDD; float:left; margin-right:5px;"><a href="#"><img src="http://zstreambox.com/w/wp-content/uploads/2016/03/ZSB45nbgSSM2.jpg" alt="Z Stream Box" width="84" height="84" class="alignnone size-full wp-image-13915" /></a></div>
<div style="width:85px; height:85px;border:solid 1px #DDDDDD; float:left; margin-right:5px;"><a href="#"><img src="http://zstreambox.com/w/wp-content/uploads/2016/03/ZSB45nbgSSM.jpg" alt="Z Stream Box" width="84" height="84" class="alignnone size-full wp-image-13917" /></a></div>
<div style="width:85px; height:85px;border:solid 1px #DDDDDD; float:left; margin-right:5px;"><a href="#"><img src="http://zstreambox.com/w/wp-content/uploads/2016/03/ZSBBackSSM.jpg" alt="Z Stream Box" width="84" height="84" class="alignnone size-full wp-image-13914" /></a></div>
<div style="width:85px; height:85px;border:solid 1px #DDDDDD; float:left;"><a href="#"><img src="http://zstreambox.com/w/wp-content/uploads/2016/03/ZSBPackagessm.jpg" alt="Z Stream Box" width="84" height="84" class="alignnone size-full wp-image-13916" /></a></div>
[lightbox selector=".link-lightbox"]

On this code, I’ve added the lightbox shortcode. You’ve added it on the class of the link but thee lightbox shortcode is missing.

Hope this helps.

[hazael00Participant]

Thank you very much for the super quick answer! that works perfectly… thank you!

[RadModerator]

You’re so much welcome!

[Author]

Posts