Thanks to Jack for an awesome plugin (the best jquery zoom that I have been able to find for what I want to do).
I'll start with an introduction. I have three images on top of each other (same size [1400x700]). Depending on what buttons are clicked depends on what image is displayed (
img id='img1' src="/img/sprint/black2.jpg" style="display:block"
img id='img2' src="/img/sprint/sprint71_2.jpg" style="display:none"
img id='img3' src="/img/sprint/sprint71_1.jpg" style="display:none").
My one image has a zoom on it (img2).
Img1 has the correct size and shows no vertical displacement between the buttons on the side and the image itself.
However, after showing img2 (or even if it is not shown) there is a vertical displacement between the buttons on the side and img3 itself.
Img2 is wrapped in a span:
$('#img2')
.wrap('')
.css('display', 'block')
.parent()
.zoom({on:'click', magnify:1.5});
Removing the span decreases the vertical displacement but doesn't remove it completely.
I've played around with the different css settings but it doesn't seem to make a difference. Under the developer controls there is no reason why it should be a different size (no new css properties) but it still has this vertical displacement.
Seems to fix itself when I change the order of the images on the page to:
img1, img3, img2 but I want to know how to prevent it from happening even if the images remain in the order 1,2,3.
Hi everyone
Thanks to Jack for an awesome plugin (the best jquery zoom that I have been able to find for what I want to do).
I'll start with an introduction. I have three images on top of each other (same size [1400x700]). Depending on what buttons are clicked depends on what image is displayed ( img id='img1' src="/img/sprint/black2.jpg" style="display:block" img id='img2' src="/img/sprint/sprint71_2.jpg" style="display:none" img id='img3' src="/img/sprint/sprint71_1.jpg" style="display:none"). My one image has a zoom on it (img2).
Img1 has the correct size and shows no vertical displacement between the buttons on the side and the image itself.
However, after showing img2 (or even if it is not shown) there is a vertical displacement between the buttons on the side and img3 itself.
Img2 is wrapped in a span: $('#img2') .wrap('') .css('display', 'block') .parent() .zoom({on:'click', magnify:1.5}); Removing the span decreases the vertical displacement but doesn't remove it completely.
I've played around with the different css settings but it doesn't seem to make a difference. Under the developer controls there is no reason why it should be a different size (no new css properties) but it still has this vertical displacement.
Seems to fix itself when I change the order of the images on the page to: img1, img3, img2 but I want to know how to prevent it from happening even if the images remain in the order 1,2,3.