Featured Image Zoomer MultiImage

[yashman]

1) Script Title: Featured Image Zoomer MultiImage

2) Script URL (on DD): None

3) Describe problem:

I have 3 thumbnails at the bottom of the big image (see attachment). Zoom is working perfectly fine but the 1st big image appears perfectly, the second and third images moves up and get sliced from top. I have attached the images as a reference. The actual image dimensions are given below

Image 1: 351 x 336 pixels
Image 2: 438 x 336 pixels
Image 3: 336 x 383 pixels.

The issue is with all the images.


<script type="text/javascript">

jQuery(document).ready(function($){

$('#multizoom1').addimagezoom(
{
speed: 1500,
descpos: true,
imagevertcenter: true,
magvertcenter: true,
zoomrange: [3, 10],
magnifiersize: [250,250],
magnifierpos: 'right',
cursorshadecolor: '#fdffd5',
cursorshade: true
});
})

</script>

HTML Code:

<div class="targetarea" style="border:1px solid #eee">
<img id="multizoom1" alt="zoomable" title="" src="img1.jpg"/>
</div>

<div class="multizoom1 thumbs">
<a href="img1.jpg" data-large="img1.jpg" data-title=""><img src="img1.jpg" alt="img1" title=""/></a>
<a href="img2.jpg" data-large="img2.jpg" data-title=""><img src="img2.jpg" alt="img2" title=""/></a>
<a href="img3.jpg" data-large="img3.jpg" data-title=""><img src="img3.jpg" alt="" title=""/></a>
</div>

CSS located @ http://www.blissflowsystems.com/styles/multizoom.css

Appreciate your help!

[jscheuer1]

Generally this occurs when the thumbnail, midrange, and larger image are not all of the same aspect ratio. But it can be other things. Here I think it might be that because of the css and space available on the page, that the midrange images need to be the same aspect ratio as each other. A better solution would be to loosen those constraints. In order to be more specific, we would need to see the page:

If you want more help, please post a link to the page on your site that shows the problem.

[yashman]

Thanks John, you can see the live site @ http://www.blissflowsystems.com/category.asp?c=SG&cid=11&sq=2#

Appreciate

[jscheuer1]

On that particular page, it looks OK to me except for the middle image:

http://www.blissflowsystems.com/bf_mods/subcategory/20140916141206_231.png

It's taller than the target area, so of course it won't fit. Either make it shorter or the target area taller.

You do realize that you do not have to use the same image for thumbnail, midrange, and magnified. If you decide to use - say in this case a different midrange image that would fit in the target area, just make sure it has the same aspect ratio as the magnified version. The smallest images (thumbnails) do not need to be any particular aspect ratio, but it helps if they are close to the other two, simply because that will usually look better. Sometimes a cropped version will do for a thumbnail though.

[yashman]

Thanks John I noticed that after your earlier post. I was standardizing the images size when you checked the site. I am sure it will work fine after the images are aligned to the standard size.