[ThomxnjParticipant]

Hi, I’ve created a lightbox for a few of my images. Im looking to adjust the sizing of how the images display on the page to 150px x 150px. I want them all to be uniform. Then once they have been clicked and opened in the lightbox, they show their actual sizing.

I tried giving them all a class and setting the height and width to 150px, but it is resizing the container, rather than the image.

Thank you

[ThomxnjParticipant]

This reply has been marked as private.

[LelyModerator]

Hello There,

The rendering of the image will depend on their original width and height proportion. We can set it’s maximum height to 150px by adding the following custom CSS code in your Customizer via Appearance > Customize > Custom > CSS. All image will be 150px in height but their width will decrease according to their proportion.

.page-id-189 a.x-img>img {
  max-height: 150px;
}

Hope this helps.

[ThomxnjParticipant]

Gotcha. Do you know of anyway to make this more uniform? Sort of like a carousel of images.

Is there a way to have an image trigger a light box? Then I would be able to create thumbnails of the images with 150px x 150px dimensions, and then when they are clicked they would just launch the light box with the actual images.

Thanks!

[LelyModerator]

Hello There,

The setup you want would be best achieve using lightbox shortcode. Please check the following links:
https://community.theme.co//kb/shortcode-walkthrough-lightbox/
http://theme.co/x/demo/integrity/1/shortcodes/responsive-lightbox/#

Let us know how this goes.
Thanks.

[ThomxnjParticipant]

Hi, I will give this a try. But is there a way to have an image trigger a lightbox with completely different images. Sort of like what is done when having a button trigger a lightbox, except using an image – in my case a pre-made thumbnail.

Thanks

[FriechModerator]

Hi There,

Lightbox shortcode still works when place on text element. But, we’re not supporting it in the Cornerstone builder right now. It has some issues with touch screens, and other bugs, so instead of just forcing it in, we’re going to work on a more elegant solution for modals and light boxes.

Thank you for understanding.

[ThomxnjParticipant]

Hi, I have attempted to use the lightbox shortcode in conjunction with a gallery (from the provided link), but the images are not launching the lightbox. I did place all of this using the text element.

Also, if I wanted to have multiple gallery with light boxes on one page, how would I alter the lightbox selector for each?

Thank you!

[ThomxnjParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please make sure to use right lightbox selector, your code should looks like this:

[lightbox selector=".gallery-icon a"]

In regards with multiple galleries would you provide us with login credentials?

Hope it helps.

[ThomxnjParticipant]

I have it set to: [lightbox selector=”.gallery-icon > a”], going by the walkthrough link. I tried the snippet above, and that didn’t work as well.

[ThomxnjParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi again,

There was an error in your shortcode syntax. I just fixed it for you and now it works. Please check after clearing your browser’s cache.

Cheers!

[ThomxnjParticipant]

Thank you so much!

Right now I had it set up with the same gallery for the three light boxes as a place holder, but how would I go about adding the other two. Is there a way to change selector? Do I even have to do that?

[ThomxnjParticipant]

Nevermind, I figured it out. For anyone looking to do this – I just used the ID for each gallery as a selector. For instance, there is three galleries on my page, I used #gallery-1 for one, #gallery-2 for two, #gallery-3 for three.

Side note, is there a way to hide some of the thumbnail images in the gallery. I still want them to display in the lightbox. I tried with a “display:none”, but don’t know how to target the correct images.

Thank you in advance.

[Author]

Posts