Lightbox image size

Support
#1

Hi!

I used this code to added lightbox feature in image using raw content element.

[x_image class="my-image" src="http://yourdomain.com/image.jpg" alt="Example" type="thumbnail" link="true" href="http://yourdomain.com/image.jpg" title="Example Image"][x_lightbox selector=".my-image" opacity="0.875"]

However the lightbox opens in a “zoomed-in” mode with no scroll option. How do I restrict the height of lightbox to 100% so that it doesn’t cross the top of the screen?

#2

Hello Malav,

Thanks for writing in! We have checked the page in question and we cannot find the Floor Plan section. Can you please provide us the exact link to the page or at least send us a screenshot of where we can find the image or the lightbox?

We would love to investigate further if we can have access to the site. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

Best Regards.

#3

Hi!

I’ve changed the link in my secure note. It should be fine now. Floor Plan is at the bottom of the page.

#4

Hello Malav,

To be able to control the image inside the lightbox, please go to Cornerstone > Theme Options > CSS and add this custom CSS code:

.ilightbox-holder.light {
    top: 0 !important;
}

.ilightbox-holder img.ilightbox-image {
    width: auto !important;
    max-height: 100vh;
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

#5

Hi!

Thank you, that worked. However for smaller images, it now starts at the top of the page rather than middle.

#6

Hello Malav,

Remove the CSS block:

.ilightbox-holder.light {
    top: 0 !important;
}

And then add a maximum width in the other CSS block:

.ilightbox-holder img.ilightbox-image {
    width: auto !important;
    max-width: 900px;
     max-height: 100vh;
}

Feel free to play around with the widths and height and see how it goes.

#7

Thank you so much, that worked!

#8

Glad to hear that, Malav.

#9

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