Docs

[fsyingc]

Hello,

We’re working on a site and implemented the lightbox solution to enlarge images on the About page.

There appears to be a problem with the lightbox rotation. Once you rotate to the next image on the right, the old image appears underneath and then the user is stuck and cannot rotate back and forth easily. The two images are the map and the collage on the bottom of this page…

Here’s the test URL: http://41c.2df.mwp.accessdomain.com/about/
WordPress 4.6
X version 4.6.1
Cornerstone version 1.3.0

Ideally we’d just like each image to show up on its own without being related to any other image on the page. What do we need to do to implement this?

Thanks!

[Rad]

Hi there,

Thanks for posting in.

It’s the correct use of selectors. For example, if we like to apply the ratio of 1 image : 1 lightbox then you’ll have to use unique selectors.

Let’s say image-selector-1, inspect your image and add image-selector-1 to it’s class input. If it’s shrotcode, then add it to shortcode attribute (eg. [image class=”image-selector-1″]). Then edit your lightbox shortcode and apply that class as selector (eg. [lightbox class=”.image-selector-1″] ). Selector should have a dot, while image class shouldn’t have.

Then apply image-selector-2, image-selector-3, image-selector-n… to other images and lightbox. The number of lightbox shortcode should equal to the count of your image.

Hope this helps.

[fsyingc]

Hi Rad,

Thank you for your help! I tried your selector advice and it doesn’t appear to be working for me. I’m likely doing something wrong… Here are the shortcodes I’m using for each image.

[image src=”/wp-content/uploads/2016/08/StatesServiced.jpg” link=”true” class=”image-selector-1″ lightbox][lightbox class=”.image-selector-1″]

[image src=”/wp-content/uploads/2016/08/Texas.jpg” link=”true” class=”image-selector-2″ lightbox][lightbox class=”.image-selector-2″]

Both images are still showing in the broken carousel when I click them.

Please let me know what I’m doing wrong. I appreciate your assistance!

[Joao]

Would you mind providing 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

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

[fsyingc]

This reply has been marked as private.

[Paul R]

Hi,

Thank you for providing your login credentials.

I was able to fix it, I changed your codes to this.

[image src="/wp-content/uploads/2016/08/Texas.jpg" link="true" class="image-selector-2"]
[lightbox selector=".image-selector-2"]

and this

[image src="/wp-content/uploads/2016/08/StatesServiced.jpg" link="true" class="image-selector-1"]
[lightbox selector=".image-selector-1"]

For more information you may refer to the link below.

https://community.theme.co/kb/shortcode-walkthrough-lightbox/

Hope that helps.

[Author]

Posts