Lightbox Question

Support
#1

On all of my blog posts, I’ve been using the [caption] shortcode for my images rather than [image]. The reason is that I want the text of my post to wrap the image and of course have an image caption. I haven’t been able to figure out how to do either of those with the [image] shortcode.

Unfortunately, now I’m trying to implement Lightbox shortcode on all of these images, and it seems that it only works with the [image] shortcode.

Please help. Is there any way to use Lightbox with [caption] shortcodes?

Thanks

#2

Hi there,

Yes, you can make the image that is wrapped in a [caption] shortcode open in a lightbox.

What you will have to do is to wrap the image that is in the caption shortcode in an <a> tag then indicate the class name to the image that will be referenced by the lightbox shortcode.

It should be something like this:

[caption width="300"]
    <a class="lightbox" href="THE_IMAGE_URL_HERE">
        <img src="THE_IMAGE_URL_HERE" width="300" height="205" class="size-medium wp-image-6" /> 
        The Caption Goes Here
    </a>
[/caption]

[lightbox selector=".lightbox"]

Notice that the class assigned to the <a> tag is what is referenced by the lightbox shortcode through the selector attribute.

Hope this helps.

#3

Ok… So this did make the Lightbox pop up, however it’s showing more than one copy of each image. Also, when scrolling through the images, they cover each other.

I’m probably not explaining it well… here’s a link:

Thanks again!

#4

Hi there,

You should use unique classes for each link and lightbox. Example,

<a class="lightbox-1" href="THE_IMAGE_URL_HERE">
...
.
.
[lightbox selector=".lightbox-1"]
...
.
.
<a class="lightbox-2" href="THE_IMAGE_URL_HERE">
...
.
.
[lightbox selector=".lightbox-2"]

It’s the lightbox-1 and lightbox-2

Hope this helps.

#5

Unfortunately not…

Using this method would mean adding a separate class to every image on every post on my website. That’s several hundred and counting…

#6

Hi There,

That issue is happening because you have multiple instances of the lightbox shortcode.

[lightbox selector=".lightbox"]

You’re only using 1 class for all of your images, so you should have only one instance of this shortcode in the page.

Cheers!

#7

I’ve removed all the [lightbox selector=".lightbox"] code except for one, yet the slideshow is still displaying doubles of every image.

#8

Hi there,

I tested the case and you are right. Unfortunately, the method my colleague mentioned will have that double image effect on the lightbox

We are very sorry for the inconvenience but unfortunately, you can not have the option you are looking for using our Lightbox feature of the theme.

I suggest that you consider using the Essential Grid and its LightBox Options to achieve the effect in question.

Thank you.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.