Lightbox responsiveness and...

User 2023679 Photo


Registered User
141 posts

Here's a test page of what I'm trying to do . . .

http://brosepianoservice.com/generic-30.html

In the gray box, I have a lightbox thumbnail on the left and a scrolling paragraph on the right. In the top example, in order to make the lightbox thumbnail image responsive, I have used Eric Rohloff's techinque, and that works. The lightbox thumbnail is responsive as you shrink and expand the browser window. However, using this technique has caused the thumbnail 'overlay' to disappear.

If you look at the second example down and hover over the thumbnail photo, you will see an overlay with the magnifying glass/plus sign. So in that example the overlay works. But if you resize the browser window slowly you will see at a certain point where the thumbnail photo should shrink responsively, it does not do so (the top thumbnail does shrink), and because of that the scrolling paragraph just about hits the thumbnail photo at a certain point, which it should not do.

It may be too much to hope for but I'm looking for a solution that would allow the the lightbox thumbnail to remain responsive AND have the overlay with the magnifying glass/plus sign functionality as well. Is that possible? I played with the code for a few hours and decided I wouldn't be the one to figure it out. :/

I'd be wishing we had a CoffeeCup version of lightbox about now. :) I can imagine that would be so much easier to work with. I'm still amazed that the Visual Lightbox doesn't do this without having to hack the code.

User 187934 Photo


Senior Advisor
20,238 posts

Do you need the magnifier?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2023679 Photo


Registered User
141 posts

No, I don't need the magnifier per se. That just happened to be the hover effect that I chose in the Visual Lightbox program. I just wanted some effect on the photo on hover if possible.
User 187934 Photo


Senior Advisor
20,238 posts

It looks to be that the hoover image has a set size thus being unresponsive. You'll need to alter the css.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2023679 Photo


Registered User
141 posts

Yeah, I figured that's what needed to be done, but I just can't identify what part of the css in the lightbox code is setting the size on the thumbs.

Here's the code that the Visual Lightbox software generated . . . .

http://www.puppetsandprops.com/files/Lightbox-Files.zip

Here's those same files with greatly enlarged thumbnails which makes it easier to see if the responsiveness has been fixed or not when making changes . . . .

http://www.puppetsandprops.com/files/Li … iles-2.zip

The css files are in the folder vlb_files1. If anyone wants to take the time to look at those, great. If not I would surely understand. I've gone over and over them, several times, changing the css where it seems to make sense to do so, and can't for the life of me find what's keeping the thumbnail photos from resizing responsively. Its over my head. :P

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.