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

[brianh]

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.

[jscheuer1]

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

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

		$(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.

[brianh]

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.

<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.

[jscheuer1]

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:

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

to:

		jQuery(document).ready(function() {
			jQuery("a.popup").fancybox({
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'elastic',
				'onCleanup'	: function(){jQuery('.magnify').remove();}
			});
		});

[brianh]

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