Results 1 to 4 of 4

Thread: Can "Featured Image Zoomer" operate without mouse wheel?

  1. #1
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Can "Featured Image Zoomer" operate without mouse wheel?

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,131
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

    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:

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

    Code:
    <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.
    - John
    ________________________

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

  3. #3
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,131
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

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

    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:

    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.
    Last edited by jscheuer1; 07-07-2013 at 05:10 PM. Reason: add info
    - John
    ________________________

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

Similar Threads

  1. Featured Image Zoomer
    By vwphillips in forum Submit a DHTML or CSS code
    Replies: 14
    Last Post: 11-12-2012, 12:28 PM
  2. Replies: 1
    Last Post: 06-12-2012, 09:31 PM
  3. jQuery for Featured Image Zoomer
    By Mark_X in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-29-2012, 03:03 PM
  4. Featured Image Zoomer
    By fleance in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 04-26-2012, 01:02 AM
  5. Resolved Featured Image Zoomer
    By jfrene in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 07-31-2010, 07:22 PM

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
  •