Lightbox height for product Image not correct

Hello.

I have a website that sells jewelry using the Black & White J2.5 template with K2, K2 Mart, and VM2.

My problem is when I click the MAIN product image on a K2 item page, the lightbox loads but the image is too low. It needs to be reset or moved higher up to load in the center (dynamically based on the users browser).

Please click the main product image on the item page here: http://www.sansitas.com/pearls/enki/peacock

You can see their is a wierd #loadimage that gets added to the URL as well.

I had some JQuery issues and my programmer replaced the lighbox functionality with his own custom that isn't correct.

PLEASE someone help me restore this to the original Lightbox/JQuery like the demo with no conflicts!

(See attachment for example of where the image is. (the green box is where the image should be).

THANKS!! Any reply would be greatly appreciated.

Hi

You can manipulate with the height of displaying the image by using this css code:

Code: Select all

#sbox-window.shadow {
    top: 20px !important;
}


Fantastic! Thanks teitbite!

That solution worked great. However I have one more question...

Now when I click the image and the lightbox loads (but you can see in the background) the entire webpage shifts to the right. (All modules, components everything). And when you close the lightbox the entire webpage shifts (left) back to the original position.

Any idea how to prevent this from happening? It's really distracting to the user experience.

Cheers! I'm most grateful for your advice.

FYI here's the link to see: http://www.sansitas.com/pearls/enki/peacock

Oh no!

When A user scrolls down a bit, then clicks on the main image. It loads at the top of the page and gets cut off. Is their anyway to adjust it to load dynamically in the center .. even after a users scrolls down a bit?

This is how I would like it to function like your demo: http://demo.gavick.com/joomla25/blackan ... 27-32/item

Thanks!!

Hi

Try maybe this code:

Code: Select all

#sbox-window.shadow {
    top: 20px !important;
    position: fixed;
}


Teitbite!! You GOD! Thank you sir!! You have no idea how long I've been trying to figure that out. And all it took was

position: fixed;

Thank you so much for your help!

Any chance you look into why the website shifts in the background when lightbox loads? And proceeds to shift back once lightbox is closed?

Again,
Thank you!

hi

It's not shifting when I'm looking at it, but take a closer look if scrollbar is appearing while oppening the popup. I think it may be screen resolution related.

Hey Teitbite,

Thanks I'd appreciate that. I noticed the demo site does it as well.
I even had this issue back when I used the vJ.15 of the Black & White template.

It's a subtle glitch. You really need to focus on the website in the background as ligthbox loads on top.

Thanks again!

Hi

Ok. But is this sifting happening along with appearing/dissapearing of the scrollbar? Can You show me the screenshot from start and how it looks after shifting ?

Hey.

Sure. I noticed the scrollbar is missing when lightbox loads! Perhaps that is it?
See attached for a before, after, and overlay were you can see the shift difference in the background.

Thanks!

Hi

Ok. Try add this scrollbar that, this should fix the problem.

Code: Select all

#sbox-overlay {
    overflow-y: scroll;
}


Hello.

So I tried adding your code and it kept the scroll bar up when lightbox loads.
However the page still shifts as soon as you click on the main image, and it stays that way until you close lightbox.

You can see an example of this issue here: http://www.sansitas.com/limited-edition ... ac-jadeite

Any advice would be most appreciated as always.
Thanks.

Hi

Than I'm afraid I do not know what to do. I do not see any shift behaviour and I was just guessing what could be causing it. Please contact mi via skype (login: teitbite), maybe when I see the problem while sharing screen I'll be able to figure it out.