Can "Featured Image Zoomer" operate without mouse wheel?

[both]

1) Script Title: Featured Image Zoomer v 2.1

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

3) Describe problem: My wife has no mouse wheel. Can zoom function is activated from the keyboard?

It's a great script. Easy to install and set up. Works great.
Thank you very much from denmark

Søren

[jscheuer1]

That's a bit impractical - say you have two or more of these on a page, what then?

But it can be done. In fact I recently unofficially updated the script to be able to among several other things control the zoom via links or buttons, which might be a better way to go, but if there's only one zoomer on the page, even a multi zoom, the keyboard can easily be tied in.

First download and use the unofficial update (right click and 'Save As'):

http://home.comcast.net/~jscheuer1/s...m/multizoom.js

Use your current on page .addimagezoom() initialization, and next make up buttons and put them in the markup:

<input class="image1 zoom in" type="button" value="Zoom In"> <input class="image1 zoom out" type="button" value="Zoom Out"> Curent Zoom: <span class="image1 zoomlevel"></span>

where 'image1' is the id of the zoomable image.

Add this script after the initialization or put its highlighted section within the existing jQuery(function($){ section of the initialization:

<script type="text/javascript">
jQuery(function($){
		$(document).keydown(function(e){
		switch(e.keyCode){
			case 39: //right arrow key
			$('.image1.zoom.in').trigger('click');
			e.preventDefault();
			break;
			case 37: //left arrow key
			$('.image1.zoom.out').trigger('click');
			e.preventDefault();
			break;
		}
	});
});
</script>

again, where 'image1' is the id of the zoomable image.

Demo:

http://home.comcast.net/~jscheuer1/s...buttonzoom.htm

Use the left arrow key to zoom in, the right arrow key to zoom out.

Any questions, let me know.

[both]

Many thanks for your prompt reply. It worked perfectly. In the meantime, she wanted a menu so I have even had to work a little with your solution.

You can see the result here:

http://www.dina-both.dk/ditte.html

Let us know if we can help you with anything ...

Best regards
Søren and Ditte

[jscheuer1]

Looks nice but you might want to tell people they can use the keys. And you're not using this code:

	$('#image1').addimagezoom({ // single image zoom
		zoomrange: [3, 10],
		magnifiersize: [300,300],
		magnifierpos: 'right',
		cursorshade: true,
		largeimage: 'hayden.jpg' //<-- No comma after last option!
	})


	$('#image2').addimagezoom() // single image zoom with default options

or this code:

	$('#multizoom2').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
		descArea: '#description2', // description selector (optional - but required if descriptions are used) - new
		disablewheel: true // even without variable zoom, mousewheel will not shift image position while mouse is over image (optional) - new
				//^-- No comma after last option!

Those may be removed.

There are also a number of other improvements I can see. All the clickbutton functions and their divs can be eleiminated, the script can use the text divs directly as the descriptions. The thumbs can be centered in the slider and can have an active border. The zoomable image may have a border as well. You only need one div.thumbs.zoomable1 division.

All of that's complicated to explain - easy to do once you see it, and makes the page much easier to maintain. So let me know if you're interested.