Flicker on initial load of featured image zoomer (multizoom)

[JeffSinNHUSA]

1) Script Title: featured image zoomer (multizoom)

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

3) Describe problem: When my page initially loads, the main image flickers once before displaying. I'm stumped.

I also had to add the following css in the .targetarea img in order to prevent the large image from displaying before resizing to the correct size:

max-width: 250px;
max-height: 163px;
width: expression(this.width > 250 ? "250px" : true);
height: expression(this.height > 163 ? "163px" : true);


Example: http://www.l-com.com/test.htm

Also, zoomed image looks slightly distorted.

Any help would be appreciated.

Thanks!

Jeff

[jscheuer1]

The distortion is due to two factors:

1. The large image isn't large enough to support the highest magnification level without pixelating. Either get an even large higher resolution large image, or lower the upper limit of the zoom range in the init (from the on page init change highlighted):
   
   

   <script type="text/javascript">
   jQuery(document).ready(function($){
   $('#multizoom2').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
   zoomrange: [3, 7],
   cursorshade: true,
   disablewheel: false // even without variable zoom, mousewheel will not shift image position while mouse is over image (optional) - new
   //^-- No comma after last option!
   });
   
   })

2. The intermediate image (250 x 165) and the large image (500 x 500) have different aspect ratios (3:2 and 1:1 respectively). They need to be the same aspect ratio as each other and have the same relative crop (currently the intermediate image is, relatively speaking, cropped wider and shorter than the large image). Rule of thumb: Get the large image how you want it/how it needs to be, so that when proportionally resized down, it produces the intermediate image that you want. Always start from the large image and only reduce it in size proportionately to arrive at the intermediate image. (You can do that too for the small thumbnail, but it can really be any aspect ratio and crop that you prefer.)

This, mentioned in your post (highlighted from around line 20 in the ddmultizoom.css file):

.targetarea img { /* zoomable image */
	margin: auto; /* for horizontal centering */
	display: block; /* also for horizontal centering */
	position: relative; /* along with on the fly calculations in script, for vertical centering */
	border-width: 0;
				max-width: 250px;
		max-height: 163px;
		width: expression(this.width > 250 ?  "250px" : true);
		height: expression(this.height > 163 ?  "163px" : true);

}

would have to be removed and/or changed and/or the large image and/or the intermediate image which the above css controls would need to be edited to ensure the proper matching aspect ratios between the intermediate image and the large image in order to remedy #2 above.

Like you could probably use these two images and keep that css (right click each and 'Save As'):



About the flicker, some browsers will flicker with this script no matter what. However most will not, instead dimming the intermediate image and showing the animated loading image over it until the larger image is loaded. On that test page, the loading image (spinningred.gif) is missing. It can be downloaded from the demo page. See if that takes care of it. There might also be a css conflict in effect that's contributing to the flicker, but we won't know for sure until you have the loading image in place and functioning as intended. You can, if you choose to, use your own loading image. It can be configured near the beginning of the ddmultizoom.js file. It might help to preload the loading image once it's in place and/or to preload the large images. But we will worry about that once the loading image is there, and only if there's still a problem with the flicker.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[JeffSinNHUSA]

Awesome - thank you very much for your help!

[JeffSinNHUSA]

Hi,

I changed the zoomrange, replaced the images with the ones that you provided, removed the targetarea img css lines of code and included the spinningreg.gif.

The large image now looks great without any distortion, but on initial load and refresh (see attached image), the large image displays until the page finishes loading. I tried in both firefox 23.0.1 and IE 8.0.6001.

Thanks again for your help!

[jscheuer1]

You have the large image's URL hard coded into the HTML markup here:

<div class="targetarea" style="border:1px solid #eee"><img id="multizoom2" alt="CA BNC M/DUAL BANANA PLUGS 1'" title="CA BNC M/DUAL BANANA PLUGS 1'" src="/product_images/detail/lg_BCC58C-_.JPG"/></div>

That should be the URL for the intermediate image:

/product_images/detail/PWD_BCC58C-_.JPG

The browser cache may need to be cleared and/or the page refreshed to see changes.

[JeffSinNHUSA]

Thanks John, that fixed the large image from initially displaying.

Still a flicker, but other issues have been resolved.

http://www.l-com.com/test.htm

Jeff

[jscheuer1]

I think I misunderstood what you were talking about with the flicker and that now I get it. If so, all you should need to do is set the initzoomablefade property to false in the on page init (from the page's on page init, addition highlighted):

<script type="text/javascript">
jQuery(document).ready(function($){
$('#multizoom2').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
zoomrange: [3, 7],
cursorshade: true,
initzoomablefade: false,
disablewheel: false // even without variable zoom, mousewheel will not shift image position while mouse is over image (optional) - new
//^-- No comma after last option!
});

})

</script>

Or, you can use the helper function, to hide the image until it fades in:

<script type="text/javascript">
//Optional helper function hides multizoom elements before page load for smoother look and feel:
jQuery('#multizoom2').multizoomhide();
jQuery(document).ready(function($){
$('#multizoom2').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
zoomrange: [3, 7],
cursorshade: true,

disablewheel: false // even without variable zoom, mousewheel will not shift image position while mouse is over image (optional) - new
//^-- No comma after last option!
});

})

</script>

The browser cache may need to be cleared and/or the page refreshed to see changes.

[JeffSinNHUSA]

the helper function did the trick. Thank you!