The Grid, Lightbox image size

Support
#1

Hi Everyone,

Im using the grid.I need the image in the lightbox to be displayed bigger.
Its a tall image but i want people to be able to read the text. I Dont need
the image to be fit to the screen size, so a scrollbar is totally fine.

Really hope anyone can help me.

Kind regards,
Jeffrey

#2

Hey Jeffrey,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your email. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots) and the URL where you’ve setup the grid, we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

#3

Hi Christian,

I would like it to be excactly like on pinterest: https://nl.pinterest.com/pin/373165519114872265/

Screenshot

I hope this clarify’s. I wont to point out at the moment the thumbnail is a image and i have second image i wont vieuw just like on printerest.

I hope this helps. If you have questions let me know. And thanks in advance.

Kind regards,
jeffrey

#4

the website url is: https://www.scrollytell.com/thegrid
So what you see is a grid from thumbnails (image 1) and i want users to click on the thumbnail then the image
will me show within a lightbox (Image 2) and users to be able to download the high res image (image 3)

But the download function will be added later, first i just need users to get to the photo and check it out.
I hope this clarify’s this project.

Kind regards,
Jeffrey

#5

Hi there,

Unfortunately, The Grid plugin does not offer such a behavior. You can read about the lightbox functions available in The Grid in details here:

https://theme-one.com/docs/the-grid/

Also, I checked the Essential Grids and it seems that even that plugin does not do what you are looking for:

https://www.themepunch.com/essgrid-doc/lightbox-options/

You will need to find a way to do it by custom CSS coding. We would love to help you but unfortunately, the given URL is under construction and we do not have access to the page to follow up.

Thank you.

#6

Hello Chris,

Thank you i really appreciate your help!

I hope this helps:

URL im working on: https://www.scrollytell.com/thegrid/

I also deactived the maintaince plugin.
If you have any questions please let me know. I can create designs in PS if needed.

When you click on the thumbnail located on the second row and third from the left you will see it opens the second image in a lightbox. At the moment not all thumbnails opens in the second large image.

Kind regards,
Jeffrey

#7

Hi there,

Does the hover effect (switching from image to content) intentional? Because there is no way you can click an image that’s hidden. Perhaps, what you’re referring is clickable content and open the lightbox? If yes, then please add this to your grid’s custom CSS


    .tg-camberra-custom .tg-element-3 {
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    
}
    .tg-camberra-custom .tg-element-3 i {
display: none;
}

That should make the lightbox icon cover the entire content and make it clickable, but with that CSS, I hide the icon :slight_smile:

About changing the lightbox’s image size, The grid has no option like that. You should use Essential Grid for that kind of requirement. Example, https://www.themepunch.com/essgrid-doc/lightbox-options/

Thanks!