Results 1 to 8 of 8

Thread: Featured Image Zoomer with non-explicit dimensions

  1. #1
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Featured Image Zoomer with non-explicit dimensions

    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
    Code:
    <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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    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.
    Last edited by jscheuer1; 12-14-2011 at 07:57 PM. Reason: fix typo copied from op, later - fix my own typo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    jdr (12-14-2011)

  4. #3
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by jdr; 12-14-2011 at 09:20 PM.

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    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>
    I'm going to fix it in the original as well.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    Thanks for awesome help! It works like a charm now

    Have a wonderful holiday season!
    Joe

  7. #6
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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:

    Code:
    <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.
    Last edited by jscheuer1; 12-15-2011 at 03:49 AM. Reason: add - But give this one a . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #8
    Join Date
    Mar 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •