Docs

[cdnmike]

Hi,

I’m trying to set up a page where I can display product designs images that when clicked, open the image and one other image in a lightbox .
You can view what I want by going to the following page on my current site and clicking any image in the content area.
http://reportadvantage.com/report-designs.html

I added the following code in a cornerstone text box but the page displays both images (Front and Back) whereas I only want to display the front image but be able to view both in the lihjtbox by clicking a next button similar to my current site at the above link.

[x_image src=”http://x-theme.reportadvantage.com/wp-content/uploads/2016/07/1_1.jpg” link=”true” lightbox_opacity=”.5″ lightbox_caption=”Caption1″]
[x_image src=”http://x-theme.reportadvantage.com/wp-content/uploads/2016/07/1_2.jpg” link=”true” lightbox_opacity=”.5″ lightbox_caption=”Caption2″]
[x_lightbox thumbnails=”true”]

The new page can be viewed at: http://x-theme.reportadvantage.com/report-page-lightbox

Thanks for the help!

[Rad]

Hi there,

Thanks for writing.

You should add unique selector, it decides to which lightbox the image should belong to.

Example,

[x_image src="http://x-theme.reportadvantage.com/wp-content/uploads/2016/07/1_1.jpg" link="true"  lightbox_opacity=".5" lightbox_caption="Caption1" class="my_selector_1"]
[x_image src="http://x-theme.reportadvantage.com/wp-content/uploads/2016/07/1_2.jpg" link="true"  lightbox_opacity=".5" lightbox_caption="Caption2" class="my_selector_2"]
[x_lightbox thumbnails="true" selector=".my_selector_1"]
[x_lightbox thumbnails="true" selector=".my_selector_2"]

Hope this helps.

[cdnmike]

Thanks for the help.

The code loads both images on the page and each triggers a lightbox that only displays that particular image, but I only want one image displayed on the page, in this case http://x-theme.reportadvantage.com/wp-content/uploads/2016/07/1_1.jpg

Then once clicked I need both images to open in the same lightbox with a button to click back and forth between both images.

Here you can see the result from your code: http://x-theme.reportadvantage.com/test-lightbox/

Thanks

[Thai]

Hi There,

Please try with this:

[x_image src="http://x-theme.reportadvantage.com/wp-content/uploads/2016/07/1_1.jpg" link="true"  lightbox_opacity=".5" lightbox_caption="Caption1" class="my_selector_1"]
[x_image src="http://x-theme.reportadvantage.com/wp-content/uploads/2016/07/1_2.jpg" link="true"  lightbox_opacity=".5" lightbox_caption="Caption2" class="my_selector_1" style="display: none;"]
[x_lightbox thumbnails="true" selector=".my_selector_1"]

You can add more images then insert the style="display: none;" to the x_image shortcode.

Hope it helps 🙂

[cdnmike]

Thanks, that works! I have just one more question about this. Is there a way to add a next and previous button to the lightbox images?

Thanks

[Rad]

Hi there,

Not possible at this moment, it’s a library we don’t develop and only integrated to X theme. But I can add it as feature request. Other library may have it.

Thanks!

[Author]

Posts