Lightbox based on two different pictures

Support
#1

Used a lightbox in my site based on one image. Now I would like to differ the starting image from the lightbox image you see after clicking. How?

#2

Hi There,

Please add another image to the HREF attribute.

Something like this:

<a class="x-img x-img-link x-img-none none" href="http://localhost/x/wp-content/uploads/layerslider/Carousel/edvin-duck.png" data-options="thumbnail: 'https://ondernap.nl/wp-content/uploads/2017/11/Presentatie-MMM-site.jpg'" style="outline: none;"><img src="https://ondernap.nl/wp-content/uploads/2017/11/Presentatie-MMM-site.jpg" alt="Mind Mood Map"></a>

[lightbox selector=".x-img-link" orientation="horizontal"]
#3

Sorry I dont quite understand and didnt get it working.
I did not need a caroussel of whatever. Sorry, maybe I did not express myself very well.
My intention is:
Image A is starting point.
When you click on image A the lightbox is opened with image B. Thats all.
At this moment the lightbox is working with only one picture.
Thanks

#4

Hello There,

Thanks for updating in! The carousel displayed because @Thai uses the same selector. To point out what you want, please use this code instead:

<a class="x-img x-img-link x-img-none none my-image-link" href="http://via.placeholder.com/350x150/B4CDCD/ffffff/?text=Image%20B" data-options="thumbnail: 'http://via.placeholder.com/350x150/e5e5e5/0000ff/?text=Image%20A'" style="outline: none;"><img src="http://via.placeholder.com/350x150/e5e5e5/0000ff/?text=Image%20A" alt="Mind Mood Map"></a>

[lightbox selector=".my-image-link" orientation="horizontal"]

This code is for a demonstration only. For the final code, please replace the image path for A and B.

Hope this make sense.

#5

Thanks. That works just fine.
One extra wish: would like to add a subtile shadow to my starting image…

#6

Hi There,

Please use this code instead:

<a class="x-img x-img-link x-img-none none my-image-link" href="http://via.placeholder.com/350x150/B4CDCD/ffffff/?text=Image%20B" data-options="thumbnail: 'http://via.placeholder.com/350x150/e5e5e5/0000ff/?text=Image%20A'" style="outline: none;"><img style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);" src="http://via.placeholder.com/350x150/e5e5e5/0000ff/?text=Image%20A" alt="Mind Mood Map"></a>

[lightbox selector=".my-image-link" orientation="horizontal"]

Hope it helps

#7

It helps. Thanks!

#8

You’re welcome glad we could help.

Cheers!

#9

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