Two lightbox on same page

There is something wrong with Lightbox

The Lightbox feature doesn’t seem to work on your page either:

Could it be due to having two lightboxes on the same page?

Hello @agenzia_gamma,

Thanks for writing to us.

There might be some other issue on the demo, I went ahead and tested the shortcodes on my localhost test site and it is working fine on my end. I have tested with multiple light boxes and single shortcodes and both of them working fine. I am using the latest version of the Pro theme 6.1.0.

In case you are having issues I would suggest you must troubleshoot a few of the common issues.

Hope it helps
Thanks

Hallo prakash_s

I recreated a very simple page with 2 Responsive Lightboxes:
https://www.agenziagammariccione.it/test/
but the Lightbox function doesn’t work.

If instead I delete the second Lightbox, everything seems to work fine.

Thank You

Hello @agenzia_gamma,

I tried to access your given page URL but it is taking me to a page not found page(404 page). To better assist you we need to check your settings I would request you please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin-level username and password
  • Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

Sorry, the page is in DRAFT mode.

Hello @agenzia_gamma,

It seems that you are using multiple selectors for the lightbox I would suggest you use only one selector class and then check it again. I have created a page on your server and used an Image element and Raw content element for the lightbox selector. Please check the settings.


Themeco-Test-Pagina-Cornerstone (1)
Themeco-Test-Pagina-Cornerstone (2)

Hope it helps
Thanks

Hallo @prakash_s

The problem is just that, because I have to use 2 different Lightbox blocks with 2 different selectors:

  1. the first group of images must have a separate LightBox
  2. the second group of images must have another separate LightBox

On the page:


the suggestion is just to use a different selector for each group of LightBoxes on the same page.

Hello @agenzia_gamma,

As I mentioned in the above post it seems that the issue is with multiple selectors, you may use multiple Lightbox blocks and use only one selector anywhere on the page and then check it.

Thanks

But if I use only one selector, it will open ALL images into the full screen lightbox!
I would like to avoid this behavior, as it worked before the latest updates.

Hello @agenzia_gamma,

If you use one selector then it will not open all the images in the lightbox on a single-click event.

Hope it helps
Thanks

Sorry @prakash_s

I’m sorry but maybe I don’t understand.
If I use one selector, on-click it will open Lightbox that image, bit slider navigation (prev/next) with ALL images with the same selector.

Hey Daniele,

Sorry for the confusion. I have inspected the test page and I am seeing 12 images with 1 lightbox shortcode. This will allow you to open the image in a lightbox and allow you to scroll to the next or previous image. Is your lightbox issue resolved already?

Best Regards.

Hi @ruenel

I apologize if I wasn’t clear in my explanation

I would like to have, on the sam page, a FIRST group of images activating a FIRST SEPARATE Lightbox (that allow you to scroll ONLY FIRST group of images) from a SECOND group of images activating another SECOND SEPARATE Lightbox (that allow you to scroll ONLY SECOND group of images)

As explained on the page:


this can only be achieved only by using DIFFERENT selectors for each group of images.
But if I use different selectors (in the same page), after the last updates, the Responsive Lightbox component stops working.
Even the demo page

It doesn’t seem to work anymore after the latest updates

Thank You and sorry for the confusion

Hello Daniele,

You may need to use 3 shortcodes in your Raw Content:

[lightbox selector=".group_one" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]


[lightbox selector=".group_two" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]

[lightbox selector=".group_three" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]

And then in your Image element, you will have to add custom classes group_one, group_two, and group_three so that in each lightbox, different sets of images will be displayed.

Best Regards.

Hi @ruenel

That’s exactly the issue I’m reporting:
When I switch from 1 selector to 2 or more selectors into the same page, the function Responsive Lightbox stops working.

I implemented your suggestion into the draft test page created by @prakash_s:
https://www.agenziagammariccione.it/cornerstone/edit/6245
but as you can see the feature Responsive Lightbox doesn’t work on the front end.

Hello Daniele,

I have investigated the issue thoroughly and I believe that this is a bug and conflicts with the latest release. I will be adding this to our issue tracking to let our developers know about this issue. They have to investigate the issue further. In the meantime, it is best that you use other lightbox plugins that will display your image. Perhaps, the Envira Gallery can help you:

Best Regards.

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