Results 1 to 2 of 2

Thread: Trigger Featured Zoom with buttons instead of scroll wheel

  1. #1
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Trigger Featured Zoom with buttons instead of scroll wheel

    1) Script Title: Featured Image Zoomer v2.2

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

    3) Describe problem: Can anyone offer help as to how can I add zoom-in and zoom-out buttons to this script? For users who
    don't have a mouse wheel, I need to provide a way for them to zoom.

    Thanks for any help!
    Tim

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,005
    Thanks
    44
    Thanked 3,204 Times in 3,166 Posts
    Blog Entries
    12

    Default

    Well this script is useless on most mobile/touch devices as well because it requires actions they're incapable of. So I would provide alternate content via a link for users that cannot use it. That said, here's an update of the script that allows for button control of the zoom level (right click and 'Save As'):

    multizoom.js

    To use it, say you have a zoom setup on the page (it must have a zoomrange for this to work):

    Code:
    <script type="text/javascript">
    
    jQuery(document).ready(function($){
    
    	$('#image1').addimagezoom({
    		zoomrange: [3, 10],
    		magnifiersize: [300,300],
    		magnifierpos: 'right',
    		cursorshade: true,
    		largeimage: 'hayden.jpg' //<-- No comma after last option!
    	})
    
    });
    
    </script>
    Now you can have buttons, images or links like:

    Code:
    <input class="image1 zoom in" type="button" value="Zoom In"> <input class="image1 zoom out" type="button" value="Zoom Out">
    The important thing is the class. It must have the id of the image (image1 in this case), the word zoom, and then either in or out (for which way you want clicking on it to zoom the image. It cannot have any other names in its class and it must have the image id, zoom and one of either in or out.

    You can also have a span with a class of 'id_of_the_image zoomlevel':

    Code:
    Curent Zoom: <span class="image1 zoomlevel"></span>
    It will show the current zoom level.

    Also works with multi-zooms.

    Any questions, just let me know.
    Last edited by jscheuer1; 06-24-2013 at 03:12 PM. Reason: update script and answer
    - John
    ________________________

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

Similar Threads

  1. Make "FaceScroll Custom scrollbar" scroll horizontal with mouse wheel
    By sdavey in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-17-2013, 04:06 PM
  2. Replies: 3
    Last Post: 04-21-2013, 11:58 PM
  3. Magnetic Scroll Mouse Wheel
    By davelf in forum Looking for such a script or service
    Replies: 3
    Last Post: 02-09-2013, 07:34 AM
  4. Scroll Wheel
    By hosdank in forum Flash
    Replies: 5
    Last Post: 09-06-2008, 07:32 PM
  5. Replies: 1
    Last Post: 05-17-2005, 04:42 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
  •