From d0df271755c19c405e565bb6a4d8e56cee2f5aff Mon Sep 17 00:00:00 2001
From: Steve Smith <steve@orderedlist.com>
Date: Wed, 3 Sep 2008 20:47:19 -0400
Subject: [PATCH] Added closing the zoom by clicking off the zoom area, and
 also by passing an optional closeOnClick: true option so you can click on the
 zoom itself to close it (nice for images, etc.).

---
 jquery/index.html      |  4 ++--
 jquery/js/fancyzoom.js | 10 +++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/jquery/index.html b/jquery/index.html
index 959abca..b9920db 100644
--- a/jquery/index.html
+++ b/jquery/index.html
@@ -8,7 +8,7 @@
 	<script type="text/javascript" src="js/fancyzoom.js"></script>
 	<script type="text/javascript" charset="utf-8">
 		$(document).ready(function() {
-			$('div.photo a').fancyZoom({scaleImg: true});
+			$('div.photo a').fancyZoom({scaleImg: true, closeOnClick: true});
 			$('#medium_box_link').fancyZoom({width:400, height:300});
 			$('#large_box_link').fancyZoom();
 			$('#flash_box_link').fancyZoom();
@@ -113,7 +113,7 @@ <h2>Notes</h2>
   $(document).ready(function() {
     $('a.fancy').each(function() { $(this).fancyZoom({width:500, height:300});});
     $('#small').fancyZoom({scaleImg: true}); // Scales images inside while zooming
-    $('#medium').fancyZoom();
+    $('#medium').fancyZoom({closeOnClick: true}); // Close the zoom by clicking on the contents
     // width and height are optional. defaults to css specifications of width and height. 
     // if width and height are passed in, they override whatever may be in css.
     $('#large').fancyZoom({width:600, height:400});
diff --git a/jquery/js/fancyzoom.js b/jquery/js/fancyzoom.js
index eec83b4..a0c6e9f 100644
--- a/jquery/js/fancyzoom.js
+++ b/jquery/js/fancyzoom.js
@@ -35,6 +35,8 @@ jQuery.fn.fancyZoom = function(options){
                 </div>';
                 
     $('body').append(html);
+    
+    $('html').click(function(e){if($(e.target).parents('#zoom:visible').length == 0) hide();});
 
     $('#zoom_close').click(hide);
   }
@@ -89,6 +91,11 @@ jQuery.fn.fancyZoom = function(options){
     
     fixBackgroundsForIE();
     zoom_close.hide();
+    
+    if (options.closeOnClick) {
+      $('#zoom').click(hide);
+    }
+    
 		if (options.scaleImg) {
   		zoom_content.html(content_div.html());
   		$('#zoom_content img').css('width', '100%');
@@ -116,6 +123,7 @@ jQuery.fn.fancyZoom = function(options){
   function hide() {
     if (zooming) return false;
 		zooming         = true;
+	  $('#zoom').unbind('click');
 		fixBackgroundsForIE();
 		if (zoom_close.attr('scaleImg') != 'true') {
   		zoom_content.html('');
@@ -133,7 +141,7 @@ jQuery.fn.fancyZoom = function(options){
   		}
       unfixBackgroundsForIE();
 			zooming = false;
-    })
+    });
     return false;
   }