Image Power Zoomer ddpowerzoomer how to show small loading image while large loading

[olegy]

1) Script Title: Image Power Zoomer

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

3) Describe problem: I'm very impressed with a way how featured zoomer works - http://www.dynamicdrive.com/dynamici...uredzoomer.htm, - it shows a loading gif while large image is loading. However in my situation I do not have an extra real estate on the page to show that large image on side ( and it could be really large - up 10 10Mb or even more).
Image Power Zoomer suits me much better , since it loads a large image right over the small one within a magnifier. However it lacks that loading gif feature - while that large image is loading.
In practice it shows an empty magnifier for a while ( in my case - up to a minute) until a large image is loaded. Is there a way to modify ddpowerzoomer a bit to add such a feature? Or I'm asking too much? Any clues will be helpful. Thanks.

[ddadmin]

The easiest way would be to add a background image of a loading gif inside the magnifying glass, which once the actual large image has been loaded would replace it. Inside the .js file, add to the following line the code in red:

			$magnifier.outer.css({width:s.magnifiersize[0], height:s.magnifiersize[1], background:'url(loading.png) center center no-repeat'}) //set magnifier's size

Obviously change loading.png to the path of your loading image.

[jscheuer1]

Yes, but then when you move partially off the smaller image, the loading image will be partially visible again.

To prevent that and add a few other niceties (optional loading message, optional partial opacity and background color for the loading image), I came up with this modified version of the script (right click and 'Save As'):

ddpowerzoomer.js

You will need a loading image, here's one or you can get or make your own (also right click and 'Save As'):



Add these styles to the head of the page:

<style type="text/css">
.powerloadingimg { /* do not edit */
	visibility: hidden !important;
}
.powerouterloading { /* optionally edit for image name and background color */
	background: white url('loading.gif') center no-repeat;
}
</style>

Change white to your preferred color if different, or remove it for a transparent background. Configure the loading.gif to be your own.

Finally, there are new configuration options inside the script. Using a text only editor like NotePad, edit them if desired (near the top):

/*Image Power Zoomer v1.1 (June 18th, 2010)
* This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//June 18th, 10: Adds ability to specify a different, higher resolution version of the original image as the image shown inside the magnifying glass.
//Feb 2nd, 13: Unofficial update adds loading image

jQuery.noConflict()

var ddpowerzoomer={
	loadimg: 'loading.gif', //configure loading image to be shown while larger image loads
	loadingopacity: 0.5, //set opacity for loading image
	loadingmessage: 'Loading . . .',
	dsetting: {defaultpower:2, powerrange:[2,7], magnifiersize:[75, 75]},
	mousewheelevt: (/Firefox/i.test(navig . . .

Use the same loading image as configured in the added style section so that the script can make sure it's preloaded. If no loading message is desired, use an empty string (''). If no partial opacity for the loading image is desired, set that to 1.

[olegy]

Thanks a lot. It works great!