Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,441
    Thanks
    15
    Thanked 0 Times in 0 Posts

    thumbnail zoom script modification

    I downloaded multi zoom from

    http://www.dynamicdrive.com/dynamici...uredzoomer.htm

    this works nice but I want to be able to call a javascript function when the thumbnails are clicked (I want it to update a value in a select box)

    Can anyone help me with how to do this?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Can't you just add the onclick code to the img tag?

  • #3
    Senior Coder
    Join Date
    May 2004
    Posts
    1,441
    Thanks
    15
    Thanked 0 Times in 0 Posts
    I tried that and it made all the code not work

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Down loaded multizoom and played with it. When your cursor goes over the small image there is a barrier place between your pointer and the image so the onclick does not work, but a jquery click function will:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    </head>
    
    <body style="background-color:gray;height:600px;">
    
    <img id="image1" src="http://www.dynamicdrive.com/dynamicindex4/haydensmall.jpg" style="width: 250px; height: 338px;"visibility: visible; opacity: 1;" data-title="sdf sdfdsdf">
    
    <h2 id="status"></h2>
    <h2 id="stat">0, 0</h2>
    
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <link rel="stylesheet" href="css/multizoom.css" type="text/css">
    <script type="text/javascript" src="javascript/multizoom.js"></script>
    <script type="text/javascript">
    
    jQuery(document).ready(function($){
    
    	$('#image1').addimagezoom({
    		zoomrange: [3, 10],
    		magnifiersize: [300,300],
    		magnifierpos: 'right',
    		cursorshade: true,
    		largeimage: 'images/hayden.jpg' //<-- No comma after last option!
    	});
    
       $(document).click(function(e){
    		var x = e.pageX;
    		var y = e.pageY;
    		if ((x <= 258) && (x >= 8) && (y <= 346) && (y >= 8)) {
    		$("#stat").html(x+", "+y);  // PUT YOUR FUNCTION OR A CALL TO A FUNCTION HERE
    		};
    	});
    });
    </script>
    </body>
    </html>

  • #5
    Senior Coder
    Join Date
    May 2004
    Posts
    1,441
    Thanks
    15
    Thanked 0 Times in 0 Posts
    thanks - how can I pass in that jquery which thumbnaiil was clicked?

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    An image is defined by it's height and width.

    Code:
    if ((x <= 258) && (x >= 8) && (y <= 346) && (y >= 8))
    is different for another image.

  • #7
    Senior Coder
    Join Date
    May 2004
    Posts
    1,441
    Thanks
    15
    Thanked 0 Times in 0 Posts
    there is no way to pass a name or id for each image?

    all of my images are going to passed as resized images to they will have the same width and height
    Last edited by esthera; 03-03-2013 at 05:32 PM.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Down loaded multizoom and played with it. When your cursor goes over the small image there is a barrier place between your pointer and the image so the onclick does not work, but a jquery click function will:
    I don't think you can get the picture ID or name under these circumstances, but you can try and see what you come up with.

    Having the same width and height makes it easier to get their max and min values, just add in the top left corner position.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •