Docs

[dbelkie]

Hi guys!
I am trying to have multiple lightboxes on a single page.

Here is some of the code I used for the first images:
[x_image class=”my-image-0” src=”http://www.everythingcloud.com/wp-content/uploads/2016/06/001-cf-sp-sm.jpg” alt=“Marketplace”type=”thumbnail” link=”true” href=”http://www.everythingcloud.com/wp-content/uploads/2016/06/001-cf-sp-lg.jpg” lightbox_caption=”Step 1: Log into the Microsoft portal.” title=“Step 1: Login Portal“][x_lightbox selector=”.my-image-0” opacity=”0.875″]

[x_image class=”my-image-0” src=”http://www.everythingcloud.com/wp-content/uploads/2016/06/002-cf-sp-sm.jpg” alt=“Marketplace”type=”thumbnail” link=”true” href=”http://www.everythingcloud.com/wp-content/uploads/2016/06/002-cf-sp-lg.jpg” lightbox_caption=”Step 2: Click blocks, then admin.” title=“Step 2: Log into admin.“][x_lightbox selector=”.my-image-0” opacity=”0.875″]

Then for the second set of images I used:
[x_image class=”my-image-10” src=”http://www.everythingcloud.com/wp-content/uploads/2016/06/001-cf-msprep-sm.jpg” alt=“Portal”type=”thumbnail” link=”true” href=”http://www.everythingcloud.com/wp-content/uploads/2016/06/001-cf-msprep-lg.jpg” lightbox_caption=”Step 1: Log into the portal.” title=“Portal-Login“][x_lightbox selector=”.my-image-10” opacity=”0.875″]

[x_image class=”my-image-10” src=”http://www.everythingcloud.com/wp-content/uploads/2016/06/002-cf-msprep-sm.jpg” alt=“Admin_Section”type=”thumbnail” link=”true” href=”http://www.everythingcloud.com/wp-content/uploads/2016/06/002-cf-msprep-lg.jpg” lightbox_caption=”Step 2: Go to your admin section.” title=“Admin-Section“][x_lightbox selector=”.my-image-10” opacity=”0.875″]

However if you click on a image, all images are displayed in the lightbox?

The URL is:
http://dev.everythingcloud.com/howto/software-as-a-service/backup-and-recovery/cloudfinder-office365/cloudfinder-office365-initial-setup/

The first 4 images should be part of one lightbox, then the next two images should be part of another lightbox.

Thoughts?

Thanks
Dan

[John Ezra]

Hi there,

Thanks for writing in! You need to set different Classes for the light boxes and images. The images and the light box that go together need to have the same class. If you still run into issues, please provide 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
– FTP credentials

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

[dbelkie]

Thanks for your response,

Myabe I mis understand your response. Isn’t that what i have already done in the code above? (set different classes)

[x_image class=”my-image-0”
and
[x_image class=”my-image-10”

Maybe I misunderstood?

Best,
Dan

[Rupok]

Hi Dan,

Thanks for writing back. Yes but I can see duplicate of each but no lightbox selector, only images.

Kindly follow the example from here – https://community.theme.co/kb/shortcode-walkthrough-lightbox/

[image class="folio-1" src="image-1.jpg" link="true"]
[lightbox selector=".folio-1"]

[image class="folio-2" src="image-4.jpg" link="true"]
[lightbox selector=".folio-2"]

Note the example, one is image with a class and another is lightbox selector for the same class.

Hope this makes sense.

[dbelkie]

Are you saying on the site you are seeing duplication?

This is the code i used below. If you notice the selector is unique as well as the class.

[x_image class=”my-image-0” src=”http://www.everythingcloud.com/wp-content/uploads/2016/06/001-cf-sp-sm.jpg” alt=“Marketplace”type=”thumbnail” link=”true” href=”http://www.everythingcloud.com/wp-content/uploads/2016/06/001-cf-sp-lg.jpg” lightbox_caption=”Step 1: Log into the Microsoft portal.” title=“Step 1: Login Portal“][x_lightbox selector=”.my-image-0” opacity=”0.875″]

[x_image class=”my-image-10” src=”http://www.everythingcloud.com/wp-content/uploads/2016/06/001-cf-msprep-sm.jpg” alt=“Portal”type=”thumbnail” link=”true” href=”http://www.everythingcloud.com/wp-content/uploads/2016/06/001-cf-msprep-lg.jpg” lightbox_caption=”Step 1: Log into the portal.” title=“Portal-Login“][x_lightbox selector=”.my-image-10” opacity=”0.875″]

Dan

[Joao]

Hi Dan,

Please use this code as reference, you can use two times, if you would like the images to be shwon on the same lightbox you just need to kep the same class and there is no need to create a second selector, if you want them to be separate use two different classes and two different selectors.

[image class="folio-1" src="http://www.unoosa.org/res/timeline/index_html/space-2.jpg" href="http://www.unoosa.org/res/timeline/index_html/space-2.jpg"]
[lightbox selector=".folio-1"]

Hope that helps,

Joao

[dbelkie]

Thanks for the update Joao!

Unfortunately this does not seem to work. It posts the picture but will not bring up a lightbox. I have not played with it yet in case I was able to catch you before you quit for the day. I will try and alter the example and see if I can get it going.
Dan

[dbelkie]

I also thought I would explain a little more what i am trying to do… maybe there is a better way to do it.

The page is a tutorial page. A person should be able to click on a screenshot and that will bring it up larger. You will notice that in the top section of the page:
http://dev.everythingcloud.com/howto/software-as-a-service/backup-and-recovery/cloudfinder-office365/cloudfinder-office365-initial-setup/ under the “Get your Sharepoint URL” heading are 4 steps with 4 images. If you click on any of those images, it will bring up that image larger in a lightbox, and then you can scroll left or right to see previous or future images. That is working perfect.

However to have this for multiple sections is proving to be the hard part. If I could replicate what I did in the “get your Sharepoint URL” in the other sections I would be done! 🙂

ideas?
Dan

[Joao]

Hi There,

I just reviewed the code I provided you and it was missing a part. The code below works.

[image class="folio-1" src="http://www.unoosa.org/res/timeline/index_html/space-2.jpg" link="true" href="http://www.unoosa.org/res/timeline/index_html/space-2.jpg"]
[lightbox selector=".folio-1"]

Since you have a section that seems to be working like you wish I could also reccomend you to clone that section, change the images and change the classes of the images and also on the lightbox selector.

Hope that helps,

if that does not help please provide us your WP Admin Credentials in a private reply so we can take a closer look.

Thanks

Joao

[dbelkie]

Hi Joao,

Im sorry it is still not working. It does pop up a lightbox, but you can still scroll through the other lightbox images. I will include a private login below.

Thanks

Dan

[dbelkie]

This reply has been marked as private.

[Rupok]

Hi Dan,

Thanks for the credentials. I have checked your code and you are doing the same mistake. That’s already mentioned several time that you need to use different class and selector for each lightbox setup but you are using my-image-0 for all of them.

First lightbox – http://prntscr.com/blqb83

Second lightbox – http://prntscr.com/blqbnh

Kindly use different selector and class for each lightbox setup to initiate them separately.

Hope this makes sense.

[dbelkie]

Hi Rupok,
I am not sure you are understanding my issue.

This page will have multiple lightboxes on it.
So the first 4 images (step1 through step4) is one lightbox. and this is working proper. If you click a image, that image comes up and you can go forward and backwards.

The 5th and 6th image you will see is labeled Step1 and Step2 again. This should be a totally separate lightbox and have nothing to do with the first 4 images.

This is a screenshot code from the 4th image:
http://prntscr.com/blrocq
You will notice it’s class is:
“my-image-0”

Then here is a screenshot of the 5th image (that should be in a new lightbox)
http://prntscr.com/blrp5l
You will notice it’s class is:
“my-image-10”

However if you click that image, it will open the lightbox and you can scroll back through the other images in the other lightbox.

I hope this makes sense?

Dan

[Lely]

Hello Dan,

First, please check you shortcodes. You’re using pretty quotes on some of your shortcode. This ” is different from this one ".
We don’t need to define multiple lightbox shortcode for same selector.
For example:

[x_image class="my-image-0" src="http://www.everythingcloud.com/wp-content/uploads/2016/06/002-cf-sp-sm.jpg" alt="Marketplace" type="thumbnail" link="true" href="http://www.everythingcloud.com/wp-content/uploads/2016/06/002-cf-sp-lg.jpg" lightbox_caption="Step 2: Click blocks, then admin." title="Step 2: Log into admin."]
[x_image class="my-image-0" src="http://www.everythingcloud.com/wp-content/uploads/2016/06/001-cf-sp-sm.jpg" alt="Marketplace" type="thumbnail" link="true" href="http://www.everythingcloud.com/wp-content/uploads/2016/06/001-cf-sp-lg.jpg" lightbox_caption="Step 1: Log into the Microsoft portal." title="Step 1: Login Portal"]
[x_lightbox selector=".my-image-0" opacity="0.875"]

Above shortcodes shows 2 image shortcodes and 1 lightbox shortcode. We don’t need to repeat the lightbox shortcode for the same selector. We can add other image shortcode with the same class my-image-0. Once you open one image, with class my-image-0 all other images with the same class will be available on that lightbox. Then for another group of lightbox, we can define another lightbox shortcode with selector like: .my-image-1. For this group, add my-image-1 for every image shortcode class. I can see that your setup is correct except that you have multiple shortcode for the same lightbox selector and other images is using pretty quotes.

On your case, for step 1 – 3, just remove the lightbox shortcode after image shortcode. The last lightbox shortcode after the last image shortcode is enough.

The selector groups the images on the lightbox.

Hope this helps.

[Author]

Posts