Multi-zoom help: load magnified area on page load

[tbarmann]

1) Script Title: Featured Image Zoomer v2.2

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

3) Describe problem:

Thank you John for your terrific work. The script works great, but I'd like to make a modification, which I hope is simple. I'd like it to load the larger image (inside the magnifyarea div) on page load, and leave it visible even if the mouse is not over the zoomtracker div. Ideally, I'd like to be able to set the initial cursor position on the cursorshade div, as well as the initial zoom level.

The purpose is so that when the page loads, the reader sees the second, larger image immediately. As it works now, it may not be obvious to users that moving the mouse over the smaller image will make the larger, magnified image suddenly appear.

Is this doable?

If not, how about simply putting in a blank image with a border as a place holder for the magnified image on page load?

Thanks for any help!

Tim Barmann

[jscheuer1]

OK, well I've seen your page now and I don't think that will work out. There isn't room to have all of the larger images visible at the same time. At least not the way the page is now. If they were, they would overlap. If you were to make the magnifiersize size property smaller, they could all fit.

There's another issue with it. One of the advantages of using this script is that the larger image is only loaded when needed. If it's always seen, it has to load when the page loads. With so many large images loading at once, it will take the page a long time to load. You could use a multizoom, that way the larger image would only have to load if its thumbnail were clicked. Or you could put each page on a separate page. Either approach would also solve the problem of the larger images being too large for all of them to be displayed at once without overlapping.

But I'm not sure you need to worry about:

it may not be obvious to users that moving the mouse over the smaller image will make the larger, magnified image suddenly appear.

I think you have that covered with the use of the:

Move your mouse over
the pages at left to
see the larger version.

graphic and text on the page. You could just put a smaller semi-transparent magnifying glass image in the lower right corner of the zoomable image, like the one on the left below, the size it is in this thumbnail:



That's the universal symbol for magnify.

But if you still want to play with your idea of having the larger image always shown, etc., here's an updated version of the script that allows for that (right click and 'Save As'):

multizoom.js

It introduces a number of new properties that can be used for what you say you want (from the release notes):

// Jun 22nd, 2013: Version 2.3 adds optional:
	// always reveal (alwaysreveal: true) which will make the larger image and the lens (if used) always visible. It can be used
	// with multizoom or single zoom features. When used it also allows for these options:
		// magtop: 10, set to how far from the top of the zoomable image you want the cursor's apparent position to be (defaults to center)
		// magleft: 100, set to how far from the left of the zoomable image you want the cursor's apparent position to be (defaults to center)
		// initpower: 4, for variable zoom features, sets the initial zoom power (defaults to about midway in the zoomrange)
		// uselastzoom: true, if set, on mouse out, instead of returning to initpower, it stays at the current zoom power
		// uselastposition: true, if set, on mouse out, instead of returning to the top and left coords set, it will remain where it is
	// All of these may be used as data- attributes of multi-zoom trigger links to customize behavior for that image, ex: data-magtop="75"

Like (using your current code):

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


	var count = jQuery('.mini-pages img').length;
	for (var x=1;x<count+1;x++) {
		var thisId = 'image' + x;
		var src = jQuery('#' + thisId).attr('src');
		var largeimage = src.replace("-320px","");
		jQuery('#' + thisId).addimagezoom({
			magnifiersize: [610,700],
			magnifierpos: 'right',
			alwaysreveal: true,
			cursorshade: true,
			largeimage: largeimage,
		});
	}


});

Since you don't have any variable zoom, it doesn't make sense to set the zoom level. but if you add variable zoom you can set the zoom level by using the initzoom property. You can position which part of the image is being magnified by using the magtop and magleft properties.

Any questions, just let me know.

P.S. I'm thinking of a variation on this that might allow only for the larger image to always be seen or only the lens, or both. I'm not sure how feasible this will be either to write or to use in actual practice though.

And this unofficial release also includes other updates/new options, see the notes at the beginning of the script.