Featured Image Zoomer with non-explicit dimensions

[jdr]

1) Script Title:
Featured Image Zoomer

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...uredzoomer.htm

3) Describe problem:
I'd like to use this script with the same image for both the main photo and the zoom. Problem is we have every image size/aspect ratio under the sun.

I'm trying to use

<script type="text/javascript">

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

	$('#zoom_image').addimagezoom({
                zoomrange: [3,3],
		magnifiersize: [550,400],
		magnifierpos: 'right',
		cursorshade: true,
	})
})
</script>

.....with.....

<img id="zoom_image" src="image.jpg" style="width:200px; height:auto; border:none;">

But it isn't working. When I change the height to a number it works just fine..

I remember the docs did say to use absolute dimensions but is there another option? All I really want to do is use a max width of 200px while retaining the correct aspect ratio.

Some images are huge, some are tiny, some are tall/skinny and others are short/fat.. Basically none of them have anything in common with each other I have no idea what they were thinking......

Any possible way to get this working?

Thanks!
Joe

[jscheuer1]

Yes. The problem here's that (with the exception of a few browsers) the browser cannot know the height until the image is loaded. We can make sure that's happened and then set the height for the script to use before we initialize the zoom on it. Replace the initialization code in your post with this code:

<script type="text/javascript">

jQuery(document).ready(function($){
	var im = $('#zoom_image');
	$(new Image()).load(function(){
		im.css({height: im.get(0).offsetHeight})
		.addimagezoom({
	                zoomrange: [3,3],
			magnifiersize: [550,400],
			magnifierpos: 'right',
			cursorshade: true // <-- no comma after last property
		});
	}).attr('src', im.attr('src'));
});

</script>

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

[jdr]

Hi John,

Thanks for the reply.

I made the suggested changes but it still isn't working. Now it won't even work when I use explicit dimensions.. The original code worked fine when I specified both a height & width..

Thanks again,
Joe

[jscheuer1]

Sorry, typo on my part, missed a couple of single quote marks, should be:

<script type="text/javascript">

jQuery(document).ready(function($){
	var im = $('#zoom_image');
	$(new Image()).load(function(){
		im.css({height: im.get(0).offsetHeight})
		.addimagezoom({
	                zoomrange: [3,3],
			magnifiersize: [550,400],
			magnifierpos: 'right',
			cursorshade: true // <-- no comma after last property
		});
	}).attr('src', im.attr('src'));
});

</script>

I'm going to fix it in the original as well.

[jdr]

Hi John,

Thanks for awesome help! It works like a charm now

Have a wonderful holiday season!
Joe

[jdr]

John,

One more question if you don't mind. Is there any way to programmatically adjust the magnifier height by the resulting image height?

http://65.18.169.75/product1271.html

In the above example the image is very wide/short. Having a large, square magnifier window seems a little clunky here. Would it be difficult to ensure that the magnifier isn't larger than the original image?

Thanks,
Joe

I wish I knew more about javascript -- I guess I need to hang around here for a while!

[jscheuer1]

It could probably be fine tuned, depending upon - well whatever. But at least it's tested and works (no typos) and will work even with images where you don't want the magnifier made shorter. A different sort of calculation could be done for images that are too narrow, if you have any like that. I'm just not positive at this point if both can be done without interfering with each other. Probably can.

Anyways, here it is:

<script type="text/javascript">

jQuery(document).ready(function($){
	var im = $('#zoom_image'), ratioh, imh, magh;
	$(new Image()).load(function(){
		im.css({height: imh = im.get(0).offsetHeight});
		if((ratioh = imh/im.width() * 500) < 400){
			magh = ratioh;
		}
		im.addimagezoom({
	                zoomrange: [3,3],
			magnifiersize: [500, magh || 400],
			magnifierpos: 'right',
			cursorshade: true // <-- no comma after last property
		});
	}).attr('src', im.attr('src'));
});

</script>

But give this one a try too:

<script type="text/javascript">

jQuery(document).ready(function($){
	var im = $('#zoom_image'), ratioh, ratiow, imh, imw, magh, magw;
	$(new Image()).load(function(){
		im.css({height: imh = im.get(0).offsetHeight});
		if((ratioh = imh/(imw = im.width()) * 500) < 400){
			magh = ratioh;
		} else if ((ratiow = imw/imh + 400) < 500){
			magw = ratiow;
		}
		im.addimagezoom({
	                zoomrange: [3,3],
			magnifiersize: [magw || 500, magh || 400],
			magnifierpos: 'right',
			cursorshade: true // <-- no comma after last property
		});
	}).attr('src', im.attr('src'));
});

</script>

It does what I was talking about, checks the other dimension (width) without interfering with the height check. Try it with the picture frames. They don't really need help, but this makes their magnifiers more proportional.

[conniegoss]

Hi, just wanted to add my 2 cents - I had the same problem of not knowing what my dimensions would be on any given image. My website is PHP based, so I used the getimagesize() function to read the image dimensions prior to loading. Works great.