Docs

[macmike78]

I’m trying to get this to open the following image in a lightbox but am not having much luck. Hope you can help…

<p>Level: <?php the_field('level'); ?> <a href="http://mywebsite/wp-content/uploads/2015/05/<?php the_field('location'); ?>.jpg"><?php the_field('location'); ?></a></p>

How can I get this image to open in your lightbox from within the template files?

Thanks in advance!

[Prasant Rai]

Hello There,

Thanks for writing in! There is a great lightbox shortcode walkthrough available – http://theme.co/x/member/kb/shortcode-walkthrough-lightbox/

I would recommend watching this and coming back if you have additional questions.

Hope that helps.

Thanks.

[bak]

Hi, i read through a few threads and you normally refer to the shortcode walkthrough mentioned above. but i do not understand much more after reading it. would you mind telling me what to do to have a text link that opens up a lightbox to an image which I can upload like I usually do with images?

[Zeshan]

You need to add a class to your link tag and then use it as a selector to your [lightbox] shortcode. So your final code would be:

<p>Level: <?php the_field('level'); ?> <a class="open-in-lightbox" href="http://mywebsite/wp-content/uploads/2015/05/<?php the_field('location'); ?>.jpg"><?php the_field('location'); ?></a></p>

Then the shortcode you need to add after this would be:

[lightbox selector=".open-in-lightbox"]

If you are making a template change, you can wrap the shortcode in WordPress do_shortcode() function.

Thanks!

[bak]

thanks for your reply but I don’t see a class field when the link box opens

http://prntscr.com/8g92gc

[Jade]

Hi there,

You can do it by selecting Text view and adding in the class name just like here: http://prntscr.com/8gatri

Hope this helps.

[bak]

This reply has been marked as private.

[Friech]

Hi There,

Sorry, we’re a bit confuse too, may I know what element is this? http://prntscr.com/8g92gc
If you hardcode the anchor tag that should look like this

<p>Level: <?php the_field('level'); ?> <a class="lbx" href="http://mywebsite/wp-content/uploads/2015/05/<?php the_field('location'); ?>.jpg"><?php the_field('location'); ?></a></p>

If you notice the class="lbx" added to the anchor, that should be the selector you set on the lightbox shortcode.

[lightbox selector=".lbx"]

Thanks!

[bak]

This reply has been marked as private.

[Paul R]

Hi Bak,

You can add all code in a text element.

<a class="open-in-lightbox" href="http://194.126.200.62/~bakronat/wp-content/uploads/2015/08/TSP-Pro-Logger.jpg">Your text here</a>
[lightbox selector=".open-in-lightbox"]

Please see screenshot

http://screencast.com/t/nsIc5riZvP

Change http://194.126.200.62/~bakronat/wp-content/uploads/2015/08/TSP-Pro-Logger.jpg with the url of your image
and change Your text here with the word/text that you want

Hope that helps

[bak]

This reply has been marked as private.

[Jade]

Hi there,

Alternatively, you can upload images by going to Media > Add New then get the image URL from there.

Then you can use the URL inside href=”” like the previous code provided.

Hope this helps.

[bak]

got it. thanks!

[Prasant Rai]

If you have any questions or concerns, feel free to post here and we’d be happy to provide further assistance!

[Author]

Posts