✨ Add new callbacks

nzbin · May 20, 2018 · 20ccf6e · 20ccf6e
1 parent 4cf41c5
commit 20ccf6e
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 27 deletions.
diff --git a/dist/jquery.magnify.js b/dist/jquery.magnify.js
@@ -165,7 +165,9 @@ var $W = $(window),
       beforeOpen: $.noop,
       opened: $.noop,
       beforeClose: $.noop,
-      closed: $.noop
+      closed: $.noop,
+      beforeChange: $.noop,
+      changed: $.noop
     }
   },
 
@@ -373,11 +375,15 @@ Magnify.prototype = {
     this.$prev = $magnify.find('.magnify-button-prev');
     this.$next = $magnify.find('.magnify-button-next');
 
+    // Add class before image loaded
     this.$stage.addClass('stage-ready');
     this.$image.addClass('image-ready');
 
-    this._triggerHook('beforeOpen', this.$el);
-    $('body').append($magnify);
+    // Reset modal z-index with multiple instances
+    this.$magnify.css('z-index', zIndex);
+
+    // Set handle element of draggable
+    this.dragHandle = this.options.dragHandle ? this.$magnify.find(this.options.dragHandle) : this.$magnify;
 
   },
   open: function () {
@@ -402,16 +408,15 @@ Magnify.prototype = {
 
     this.build();
 
+    this._triggerHook('beforeOpen', this.$el);
+
+    // Add Magnify to DOM
+    $('body').append(this.$magnify);
+
     this.addEvents();
 
     this.setModalPos(this.$magnify);
 
-    // Reset modal z-index with multiple instances
-    this.$magnify.css('z-index', zIndex);
-
-    // Set handle element of draggable
-    this.dragHandle = this.options.dragHandle ? this.$magnify.find(this.options.dragHandle) : this.$magnify;
-
     this._triggerHook('opened', this.$el);
 
   },
@@ -686,8 +691,12 @@ Magnify.prototype = {
 
     this.groupIndex = index;
 
+    this._triggerHook('beforeChange', index);
+
     this.loadImg(this.groupData[index].src);
 
+    this._triggerHook('changed', index);
+
   },
   wheel: function (e) {
 

diff --git a/docs/js/jquery.magnify.js b/docs/js/jquery.magnify.js
@@ -165,7 +165,9 @@ var $W = $(window),
       beforeOpen: $.noop,
       opened: $.noop,
       beforeClose: $.noop,
-      closed: $.noop
+      closed: $.noop,
+      beforeChange: $.noop,
+      changed: $.noop
     }
   },
 
@@ -373,11 +375,15 @@ Magnify.prototype = {
     this.$prev = $magnify.find('.magnify-button-prev');
     this.$next = $magnify.find('.magnify-button-next');
 
+    // Add class before image loaded
     this.$stage.addClass('stage-ready');
     this.$image.addClass('image-ready');
 
-    this._triggerHook('beforeOpen', this.$el);
-    $('body').append($magnify);
+    // Reset modal z-index with multiple instances
+    this.$magnify.css('z-index', zIndex);
+
+    // Set handle element of draggable
+    this.dragHandle = this.options.dragHandle ? this.$magnify.find(this.options.dragHandle) : this.$magnify;
 
   },
   open: function () {
@@ -402,16 +408,15 @@ Magnify.prototype = {
 
     this.build();
 
+    this._triggerHook('beforeOpen', this.$el);
+
+    // Add Magnify to DOM
+    $('body').append(this.$magnify);
+
     this.addEvents();
 
     this.setModalPos(this.$magnify);
 
-    // Reset modal z-index with multiple instances
-    this.$magnify.css('z-index', zIndex);
-
-    // Set handle element of draggable
-    this.dragHandle = this.options.dragHandle ? this.$magnify.find(this.options.dragHandle) : this.$magnify;
-
     this._triggerHook('opened', this.$el);
 
   },
@@ -686,8 +691,12 @@ Magnify.prototype = {
 
     this.groupIndex = index;
 
+    this._triggerHook('beforeChange', index);
+
     this.loadImg(this.groupData[index].src);
 
+    this._triggerHook('changed', index);
+
   },
   wheel: function (e) {
 

diff --git a/src/js/core.js b/src/js/core.js
@@ -131,7 +131,9 @@ var $W = $(window),
       beforeOpen: $.noop,
       opened: $.noop,
       beforeClose: $.noop,
-      closed: $.noop
+      closed: $.noop,
+      beforeChange: $.noop,
+      changed: $.noop
     }
   },
 
@@ -339,11 +341,15 @@ Magnify.prototype = {
     this.$prev = $magnify.find('.magnify-button-prev');
     this.$next = $magnify.find('.magnify-button-next');
 
+    // Add class before image loaded
     this.$stage.addClass('stage-ready');
     this.$image.addClass('image-ready');
 
-    this._triggerHook('beforeOpen', this.$el);
-    $('body').append($magnify);
+    // Reset modal z-index with multiple instances
+    this.$magnify.css('z-index', zIndex);
+
+    // Set handle element of draggable
+    this.dragHandle = this.options.dragHandle ? this.$magnify.find(this.options.dragHandle) : this.$magnify;
 
   },
   open: function () {
@@ -368,16 +374,15 @@ Magnify.prototype = {
 
     this.build();
 
+    this._triggerHook('beforeOpen', this.$el);
+
+    // Add Magnify to DOM
+    $('body').append(this.$magnify);
+
     this.addEvents();
 
     this.setModalPos(this.$magnify);
 
-    // Reset modal z-index with multiple instances
-    this.$magnify.css('z-index', zIndex);
-
-    // Set handle element of draggable
-    this.dragHandle = this.options.dragHandle ? this.$magnify.find(this.options.dragHandle) : this.$magnify;
-
     this._triggerHook('opened', this.$el);
 
   },
@@ -652,8 +657,12 @@ Magnify.prototype = {
 
     this.groupIndex = index;
 
+    this._triggerHook('beforeChange', index);
+
     this.loadImg(this.groupData[index].src);
 
+    this._triggerHook('changed', index);
+
   },
   wheel: function (e) {