Results 1 to 5 of 5

Thread: jQuery Image Magnify v1.11 (click anywhere to close)

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

    Default jQuery Image Magnify v1.11 (click anywhere to close)

    1) Script Title: jQuery Image Magnify v1.11

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


    3) Describe problem:
    I am new to jquery but been using it a lot for a new project. The issue I am having is that I open up a fancybox div which has some images that get magnified on top. The problem comes when I magnify image and then close fancy box. The magnified image stay on the screen and is unable to be removed.

    Ideally I could add a .close function to the fancybox that would close the magnified image. Or having a function that would cause the click after image magnify to close that image. Any ideas?

    4) Additional information
    I have commented out jQuery.noConflict() since it was causing some of my show/hide jquery to nolonger work. Also changed zIndexcounter to have it be higher number than the Z-index of fancy box.

    5) Sample page
    http://levelupworkouts.heliohost.org/todd/
    Click Yes for on the first two radio boxes. Then click Help me choose for type of weld. Click on a pic to enlarge. Any click outside the fancybox (or hitting esc) causes enlarge picture to be stuck.
    Last edited by brianh; 12-12-2011 at 08:09 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Try putting this script in the head of the 'top' page (levelupworkouts.heliohost.org/todd/) after the external script tags for jQuery and fancybox:

    Code:
    <script type="text/javascript">
    jQuery(function($){
    	$(document).click(function(e){
    		if(e.target.className === 'magnify'){return;}
    		$('.magnify').each(function(){
    			if(this.style.zIndex){$(this).click();}
    		});
    	});
    });
    </script>
    Worked here in Firefox and IE on the demo page and on your page when I added the above code in IE 9's script console before opening the fancybox, so should work out well.

    This will also cause the magnified image to close if the user clicks anywhere outside the magnified image. Probably something that should have been included in the original script.

    However, if that's overkill for you, we could do it as part of fancybox's onCleanup:

    Code:
    		$(document).ready(function() {
    			$("a.popup").fancybox({
    				'transitionIn'	: 'elastic',
    				'transitionOut'	: 'elastic',
    				'onCleanup': function(){
    					$('.magnify').each(function(){
    						if(this.style.zIndex){$(this).click();}
    					});
    				}
    			});
    		});
    I have related information. Are you aware that since jquery.magnifier.js is on the imported page, it might not function in IE less than 9? Perhaps other browsers? It works in IE 9's IE 8 mode, but that's no guarantee. And I notice that checking in IE 9's IE 7 mode, clicking 'Yes' for the first select does nothing. No guarantee it won't work in the real IE 7, but much more likely that it won't then with the comment about IE 8 above working.
    - John
    ________________________

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

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    brianh (12-09-2011)

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

    Default

    You are a brilliant man! Thanks for your help John! I added the jQuery(function). Works perfect the first time I click outside the fancybox, but when I try to do it a second time I get the image still stuck out there.


    Are you aware that since jquery.magnifier.js is on the imported page
    I was originally going to have it where a user could open in new tab or go directly to http://levelupworkouts.heliohost.org...nfo.php?q=Q1ai but then I need to have this code on the imported page.
    Code:
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="./scripts/jquery.magnifier.js"></script>
    Calling jquery-latest.js twice (on imported and front page) was causing problems with the magnifier. So I have been unsuccessful at making info.php a standalone page.


    Thanks for a heads up on IE 7.0. I checked on IE 7.0.5730 and the hide/show functionality seems to work. But I will check into it more.

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    I see what you mean. It looks like on the second go round one or both of two things are happening:

    1. jQuery has somehow changed or lost control of the $ variable, perhaps to another library, or to another version or copy of jQuery, or to nowhere at all.

    2. There are some vestigial parts of previous .magnify element(s) hanging around that cause the document click event we added to error out before it gets to the one we want to close.


    As I said, this works fine on the demo page for the script. But that's because new instances of jquery.magnify.js aren't coming and going as is the case with your page.

    That new code we added seems fine, so keep it. It just needs a little help. To that end, and this is backed up by as much testing as I could reasonably do, change this:

    Code:
    		$(document).ready(function() {
    			$("a.popup").fancybox({
    				'transitionIn'	: 'elastic',
    				'transitionOut'	: 'elastic'
    			});
    		});
    to:

    Code:
    		jQuery(document).ready(function() {
    			jQuery("a.popup").fancybox({
    				'transitionIn'	: 'elastic',
    				'transitionOut'	: 'elastic',
    				'onCleanup'	: function(){jQuery('.magnify').remove();}
    			});
    		});
    Last edited by jscheuer1; 12-10-2011 at 02:51 AM. Reason: further testing revealed a different solution was required
    - John
    ________________________

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

  6. #5
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Awesome John. Thank you very much. That works perfect!

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
  •