Blurred image in the zoom window.

[rwkiii]

Featured Image Zoomer

http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm

I have millions of images to view from a remote server that I have no control over. The images range in size from 25x25 pixels all the way up to 800x600 pixels. The large ones are very hi-res.

I have a choice of using the medium sized image, but it's just not a good size for the area on my page. It's too small and I don't want to distort it by specifying a larger width or height.

So, I use the large image and specify a smaller height or width than what it really is. I thought the Featured Image Zoomer would use 2 sizes of images - a smaller one that you hover with the mouse and a larger high res one that pops up in the zoom window. Appearently that's not correct?

For some reason the image in the zoom window is blurry. It should be sharp and crisp, but it's just not. I'm using a magnifier setting of 3,3.

Can anyone tell me how the zoomer works - does it use the smaller image and actually (physically) zooms it? Or does it hover the smaller image and actually use the larger one in the zoom window?

Any solutions?

[jscheuer1]

It depends upon how you set it up, From the demo page:



Ability to specify either the original image or a larger version of it as the "magnified" image. The later setup enables you to initially show a low-res thumbnail image on the page, but use a high-res image to show the image in detail when magnified


And in Step 1 it shows the code to specify the larger image. The first two are like that. Here's the first:



$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
})

The highlighted line shows where you specify the address of your larger image. The red text is the id of the image that you want to magnify. So in the body you have (from Step 2):


<p><img id="image1" border="0" src="http://i44.tinypic.com/9ie1ib.jpg" style="width:300px;height:225px" /><p>

The highlighted is where you specify the address of your smaller image.

But if you don't specify a larger image (skip the highlighted in the Step 1 code block), the image itself will be used. As long as you use a high enough res image it should work out. make sure to specify dimension in Step 2 for it that are smaller than it's actual dimensions yet still proportional to its native dimensions.

So if the image is 800 x 600 and called abig.jpg, you could have in the head:


$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true //<-- No comma after last option!
})

And in the body:


<img id="image1" src="abig.jpg" width=200 height=150>

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.