Responsive Lightbox effect on Images

[defharo]

Hello, I have activated the lightbox effect in the product thumbnails. It works correctly, but it is not responsive. It happens that the product images in lightbox do not adapt to small screens.

I have seen that with a simple change in the inline style that the lightbox system generates with the particular measurements of each product photo in the element:

<div id=”lightbox-container-image-box” style=”width:1020px;height:520px;”>

Modifying the height: and width: style by max-height: and max-width: It would look like this:

<div id=”lightbox-container-image-box” style=”max-width:1020px;max-height:520px;”>

I have tried to find where to modify this but I have not succeeded. Could you tell me how to do it?

Finally we must modify the rule #lightbox-container-image-box contained in the style sheet: wp_eStore_style.css, changing: width: 250px; height: 250px; by width: 100%; height: 100%; in this way the lightbox system works very well in responsive.

Thanks for the help

[admin]

We use a very lightweight readymade lightbox library to handle this. You can make the modification in the following JS file:

lib/jquery.lightbox-0.5.pack.js

After you make the modification, you can share the solution and I will take a look and see if I can add it to the plugin also.

[defharo]

Hi, thanks for your response.

Yes, I know the file lib/jquery.lightbox-0.5.pack.js, I already tried to make modifications to the file but I only managed to malfunction due to my lack of knowledge with .js files.

But I have found a much better solution, simpler and accessible to all users.

I have modified the parameters of width and height of the rule:

#lightbox-container-image-box contained in the style sheet: wp_eStore_style.css

ORIGINAL: width: 250px; height: 250px;

Modification for responsive lightbox: max-width:100%!important; height:auto!important;

Regards

[admin]

Thank you. I will update estore’s code with this change also.

[Author]

Posts