Docs

[dthom]

Hi. I am trying to get a couple of my images to popup with the lightbox shortcode and have read several KB’s indicating a couple ways to do this. The two methods/shortcodes are below. The result is that the images open on the referenced linked page instead of poping-up.

[caption id="attachment_18109" align="alignleft" width="150"]<img src="https://mysalus.org/wp-content/uploads/2016/05/ATA_Top-5-Telemedicine-Trends_infographic-600x1141-150x150.jpg" alt="Telemedicine Infographic" width="150" height="150" /> Click to enlarge[lightbox selector=".x-img-link"][/caption]

and

<a href="https://mysalus.org/wp-content/uploads/2016/05/ATA_Top-5-Telemedicine-Trends_infographic-600x1141-150x150.jpg"><img src="https://mysalus.org/wp-content/uploads/2016/05/ATA_Top-5-Telemedicine-Trends_infographic-600x1141-150x150.jpg" /></a>[lightbox selector=".x-img-link"]

Not sure what I am doing wrong

Thanks

[dthom]

I see that the images (instead of code?) are showing but can’t tell if the code came through. Let me know and I can try to resend?

[Joao]

Hi There,

When you post code on the forum you have to wrap it with the code button.

Can you see where you make the text here, bold, italic, b-quote…..and code..close tags.

Paste your code, select, and push the code button to wrap it.

Now coming back to your question, are you using Cornerstone?

If you are you can add your image.

give it a class for example: my-img-lightbox

link this image to the content you want displayed on the lightbox, so for example, if you want the image displayed on the lightbox, you add a link to the image itself.

Add a RAW Element and add the following selector.

[lightbox selector=”.my-img-lightbox”]

Hope that helps,

Joao

[dthom]

Thanks for the reply, here is the code. I am not using cornerstone in this application of lightbox and was wondering if that was the issue – so – i tried it in cornerstone (same code and it did not seem to work). I think this code follows you above instructions?

[caption id="attachment_18109" align="alignleft" width="150"]<img class="x-img-link wp-image-18109" src="https://mysalus.org/wp-content/uploads/2016/05/ATA_Top-5-Telemedicine-Trends_infographic-600x1141-150x150.jpg" alt="Telemedicine Infographic" width="150" height="150" /> Click to enlarge[lightbox selector=".x-img-link"][/caption]

<a href="https://mysalus.org/wp-content/uploads/2016/05/ATA_Top-5-Telemedicine-Trends_infographic-600x1141-150x150.jpg" ><img src="https://mysalus.org/wp-content/uploads/2016/05/ATA_Top-5-Telemedicine-Trends_infographic-600x1141-150x150.jpg" class="x-img-link"></a>[lightbox selector=".x-img-link"]

Thanks

[Friech]

Hi There,

Lets inspect your two blocks of codes above.

First:
[caption id="attachment_18109" align="alignleft" width="150"]<img src="https://mysalus.org/wp-content/uploads/2016/05/ATA_Top-5-Telemedicine-Trends_infographic-600x1141-150x150.jpg" alt="Telemedicine Infographic" width="150" height="150" /> Click to enlarge[lightbox selector=".x-img-link"][/caption]

The image was not wrap with an anchor <a> tag, so the lightbox would not trigger because the image is not a link in the first place. Also place the lightbox shortcode outside the caption shortcode.

e.g.

<a href="https://mysalus.org/wp-content/uploads/2016/05/ATA_Top-5-Telemedicine-Trends_infographic-600x1141-150x150.jpg" class="x-img-link">
[caption id="attachment_18109" align="alignleft" width="150"]
<img src="https://mysalus.org/wp-content/uploads/2016/05/ATA_Top-5-Telemedicine-Trends_infographic-600x1141-150x150.jpg" alt="Telemedicine Infographic" width="150" height="150" />
Click to enlarge[/caption]
</a>
[lightbox selector=".x-img-link"]

Second:
<a href="https://mysalus.org/wp-content/uploads/2016/05/ATA_Top-5-Telemedicine-Trends_infographic-600x1141-150x150.jpg"><img src="https://mysalus.org/wp-content/uploads/2016/05/ATA_Top-5-Telemedicine-Trends_infographic-600x1141-150x150.jpg" /></a>[lightbox selector=".x-img-link"]

You almost got this, but you did not apply the class x-img-link to the <a> tag. You should apply that because that is the class to trigger the lightbox.

e.g.

<a href="https://mysalus.org/wp-content/uploads/2016/05/ATA_Top-5-Telemedicine-Trends_infographic-600x1141-150x150.jpg" class="x-img-link"><img src="https://mysalus.org/wp-content/uploads/2016/05/ATA_Top-5-Telemedicine-Trends_infographic-600x1141-150x150.jpg" /></a>
[lightbox selector=".x-img-link"]

You might want to change the href value of your anchor <a> tag to a bigger image.

Hope it helps, Cheers!

[dthom]

Thanks for the clarifications. I have added the following code to a test page here https://mysalus.org/test-page/

<a href="https://mysalus.org/wp-content/uploads/2016/05/ATA_Top-5-Telemedicine-Trends_infographic-600x1141-150x150.jpg" class="x-img-link">
[caption id="attachment_18109" align="alignleft" width="150"]
<img src="https://mysalus.org/wp-content/uploads/2016/05/ATA_Top-5-Telemedicine-Trends_infographic-600x1141.jpg" alt="Telemedicine Infographic" width="150" height="150" />
Click to enlarge[/caption]</a>[lightbox selector=".x-img-link"]

But the image still no poping up. I checked the console and no errors appear.

Other ideas?

Thanks

[Joao]

Hi There,

Use this code instead :

[image src="https://mysalus.org/wp-content/uploads/2016/05/ATA_Top-5-Telemedicine-Trends_infographic-600x1141-150x150.jpg" link="true" lightbox_caption="Click to enlarge"]
[lightbox]

Hope that helps

Joao

[dthom]

Thanks for the reply. I changed the code to the above but still not working. I also disabled all plugins – except for X related but it had no affect. Also I ran today’s theme updates.

Other thoughts?

Thanks

[Joao]

Hi There,

I tested the code provided and it works, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[dthom]

This reply has been marked as private.

[dthom]

This reply has been marked as private.

[Paul R]

Hi,

Thank you for providing the specific url.

I tried it and it seems to work.

See Video – http://screencast.com/t/l4hrPwEH

Please make sure that javascript is enabled in your browser.

Thanks

[dthom]

thanks! It is something with Chrome … although javascript is enabled. Works fine on firefox and ie

[Prasant Rai]

You are most welcome. 🙂

[dthom]

I am revisiting this post to see if there are any recent insights as to lightbox not working in chrome (that I might have missed). I have read many of the other posts here which indicate others have had problems but that X support has verified that lightbox works for you folks on windows 10 and chrome. After updating chrome today it still doesn’t work for me – even using the x demo page in chrome. all other browsers (except for safari which I don’t sue) see to work fine.

Thanks

[Author]

Posts