Browse files

Added closing the zoom by clicking off the zoom area, and also by pas…

…sing an optional closeOnClick: true option so you can click on the zoom itself to close it (nice for images, etc.).
  • Loading branch information...
1 parent 5d9f29c commit d0df271755c19c405e565bb6a4d8e56cee2f5aff @orderedlist orderedlist committed Sep 3, 2008
Showing with 11 additions and 3 deletions.
  1. +2 −2 jquery/index.html
  2. +9 −1 jquery/js/fancyzoom.js
View
4 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 @@
$(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});
View
10 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;
}

0 comments on commit d0df271

Please sign in to comment.