Make an image in a text area lightbox on mobile

[Donkified]

Hi guys,

Is it possible to make an image that is added in a text element area (i.e., in between two paragraphs of text for example) modal on mobile, or like a lightbox effect? Or can i make them lightbox in general?

The images are fine looking on desktop but they’re quite small on mobile so I need to make them zoomable.

Ideally, can i do this without any of the extensions plugins? ( which i dont have access to right now)

Thanks,.

[friech]

Hi @Donkified,

Thank you for writing in, do you mean an inline text link that will open an image lightbox? If so, you can use this Responsive Lightbox shortcode here.

The way this works, is you need to add a lightbox shortcode anywhere on your page, probably at the bottom so it does not get in your design. Use the Content Area element for pasting this shortcode.

e.g.

[lightbox selector=".lbx"]

Then take note of that lbx selector (that can be anything). Apply that as a class on your anchor link text.

e.g.

<a class="lbx" href="YOUR-IMAGE-URL-HERE">lightbox link text</a>

Replace the phrase YOUR-IMAGE-URL-HERE with an actual image URL.

Hope it helps,
Cheers!

[Donkified]

Thank you friech, i got this to work

One more question:

Can I make an image element do this too?

I have tried to add the class=lbx to an image element in the customiser, but it doesn’t work so im assuming I can’t?

[ruenel]

Hey @Donkified,

In the image element settings, fin the “Customize” tab and insert the “lbx” class.

• 

And then use the .lbx img as your class selector.

Hope this helps. Please let us know how it goes.