Improvements...

js/jquery.fullsizable.js

@@ -1,15 +1,22 @@
 /*
-jQuery fullsizable plugin v2.0.2
+jQuery fullsizable plugin v2.0.2ex
   - take full available browser space to show images
 
 (c) 2011-2014 Matthias Schmidt <http://m-schmidt.eu/>
 
+Improvements by kristofzerbe (github)
+- prevent multiple control adding on multiple calls
+- prevent multiple 'click' bindings
+- prevent arrow keys on navigation=false
+- new option 'keyBindings' to define if key events are available
+
 Example Usage:
   $('a.fullsizable').fullsizable();
 
 Options:
   **detach_id** (optional, defaults to null) - id of an element that will temporarely be set to ``display: none`` after the curtain loaded.
   **navigation** (optional, defaults to true) - show next and previous links when working with a set of images.
+  **keyBindings** (optional, defaults to true) - bind key events to close and move through pictures
   **closeButton** (optional, defaults to true) - show a close link.
   **fullscreenButton** (optional, defaults to true) - show full screen button for native HTML5 fullscreen support in supported browsers.
   **openOnClick** (optional, defaults to true) - set to false to disable default behavior which fullsizes an image when clicking on a thumb.
@@ -62,11 +69,13 @@ Options:
     if (e.keyCode === 27) {
       closeViewer();
     }
-    if (e.keyCode === 37) {
-      prevImage(true);
-    }
-    if (e.keyCode === 39) {
-      return nextImage(true);
+    if (options.navigation) {
+      if (e.keyCode === 37) {
+        prevImage(true);
+      }
+      if (e.keyCode === 39) {
+        return nextImage(true);
+      }
     }
   };
 
@@ -162,12 +171,12 @@ Options:
       $('#' + options.detach_id).css('display', 'block');
       $(window).scrollTop(stored_scroll_position);
     }
-    $(container_id).fadeOut(function() {
-      return $image_holder.remove();
+    $(container_id).fadeOut(function() {        
+        return $image_holder.remove();
     });
     closeFullscreen();
-    $(container_id).removeClass(spinner_class);
-    unbindCurtainEvents();
+    $(container_id).removeClass(spinner_class);    
+    unbindCurtainEvents();    
     return $(window).unbind('resize', resizeImage);
   };
 
@@ -181,7 +190,7 @@ Options:
       image.index = images.length;
       images.push(image);
       if (options.openOnClick) {
-        return $(this).click(function(e) {
+        return $(this).unbind("click").click(function(e) {
           e.preventDefault();
           if (options.reloadOnOpen) {
             makeFullsizable();
@@ -192,35 +201,44 @@ Options:
     });
   };
 
-  prepareCurtain = function() {
+  prepareCurtain = function() {      
     if (options.navigation) {
-      $image_holder.append('<a id="fullsized_go_prev" href="#prev"></a><a id="fullsized_go_next" href="#next"></a>');
-      $(document).on('click', '#fullsized_go_prev', function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        return prevImage();
-      });
-      $(document).on('click', '#fullsized_go_next', function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        return nextImage();
-      });
+      if ($image_holder.find("#fullsized_go_prev").length == 0) {
+        $image_holder.append('<a id="fullsized_go_prev" href="#prev"></a>');
+        $(document).on('click', '#fullsized_go_prev', function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          return prevImage();
+        });
+      }
+      if ($image_holder.find("#fullsized_go_next").length == 0) {
+        $image_holder.append('<a id="fullsized_go_next" href="#next"></a>');
+        $(document).on('click', '#fullsized_go_next', function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          return nextImage();
+        });
+      }
     }
     if (options.closeButton) {
-      $image_holder.append('<a id="fullsized_close" href="#close"></a>');
-      $(document).on('click', '#fullsized_close', function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        return closeViewer();
-      });
+      if ($image_holder.find("#fullsized_close").length == 0) {
+        $image_holder.append('<a id="fullsized_close" href="#close"></a>');
+        $(document).on('click', '#fullsized_close', function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          return closeViewer();
+        });
+      }
     }
     if (options.fullscreenButton && hasFullscreenSupport()) {
-      $image_holder.append('<a id="fullsized_fullscreen" href="#fullscreen"></a>');
-      $(document).on('click', '#fullsized_fullscreen', function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        return toggleFullscreen();
-      });
+      if ($image_holder.find("#fullsized_fullscreen").length == 0) {
+        $image_holder.append('<a id="fullsized_fullscreen" href="#fullscreen"></a>');
+        $(document).on('click', '#fullsized_fullscreen', function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          return toggleFullscreen();
+        });
+      }
     }
     switch (options.clickBehaviour) {
       case 'close':
@@ -232,21 +250,27 @@ Options:
     }
   };
 
-  bindCurtainEvents = function() {
-    $(document).bind('keydown', keyPressed);
-    $(document).bind('fullsizable:next', function() {
-      return nextImage(true);
-    });
-    $(document).bind('fullsizable:prev', function() {
-      return prevImage(true);
-    });
+  bindCurtainEvents = function() {    
+    if (options.keyBindings) {
+      $(document).bind('keydown', keyPressed);
+    }
+    if (options.navigation) {
+      $(document).bind('fullsizable:next', function() {
+        return nextImage(true);
+      });
+      $(document).bind('fullsizable:prev', function() {
+        return prevImage(true);
+      });
+    }
     return $(document).bind('fullsizable:close', closeViewer);
   };
 
   unbindCurtainEvents = function() {
-    $(document).unbind('keydown', keyPressed);
-    $(document).unbind('fullsizable:next');
-    $(document).unbind('fullsizable:prev');
+    if (options.navigation) {
+      $(document).unbind('keydown', keyPressed);
+      $(document).unbind('fullsizable:next');
+      $(document).unbind('fullsizable:prev');
+    }
     return $(document).unbind('fullsizable:close');
   };
 
@@ -287,6 +311,7 @@ Options:
       selector: this.selector,
       detach_id: null,
       navigation: true,
+      keyBindings: true,
       closeButton: true,
       fullscreenButton: true,
       openOnClick: true,