-
Posts
-
Hi,
On the product image, when you click it and have it open to a lightbox, is it possible to have the lightbox image fit the width of the browser and be zoomed in, with the ability to scroll down and see the rest of the image?
Hey bobfurgo,
Add this to quick css:
.mfp-img{ max-height:100%!important; }Best regards,
Jordan ShannonTHANK YOU JORDAN!
A few other things, when my mouse hovers over the close icon, it changes to a magnifying glass with a minus sign in it… Is there any way to just keep it as a regular pointer?
Also, when i scroll on the lightbox image it seems the dark overlay ends about halfway down. Is there a way to just make sure the overlay goes all the way to the bottom, no matter what length the image is?
Last, I tried using this code to make the close icon fixed in the top right hand corner of the image so you can always see it even when scrolling but it didn’t work:
button.mfp-close { position: fixed !important; }Any idea how to make that happen?
Thank you so so much
Hi,
Add this to quick css:
.mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: pointer!important; } .mfp-bg.avia-popup.mfp-zoom-in.mfp-ready{ height:6000px!important; }As for #3 the button has not been coded or positioned initially to function with a fixed setting.
Best regards,
Jordan Shannonpointer worked great!
hmm that works but only for screens that are exactly 6000px. If they are longer the overlay still ends. Is there a way I can make the overlay, arrows and close icons fixed, while the image scrolls?
Hi,
Sorry for the late reply and thanks for the link. To set a position of “fixed” for the lightbox arrows please try the following css, but unfortunately the lightbox “close” button is a child of the “content” div so when it is “fixed” it is at the top of the content or image.
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:.mfp-arrow { position: fixed !important; }Best regards,
Mike
- You must be logged in to reply to this topic.