Gallery now fires custom events - closes #4.

README.md

@@ -8,7 +8,7 @@ facility of code-reuse and fewer headaches.  simple-gallery.js creates a
 slideshow you can easily customize without having to worry about superfluous 
 code and unneeded options.
 
-**CURRENT VERSION: v2.3.1**
+**CURRENT VERSION: v2.4.0**
 
 ## Get Started ##
 
@@ -48,8 +48,7 @@ like the following:
     <img src="../images/img8.jpg" />
     <img src="../images/img9.jpg" />
 </div>
-<div id="displayImage">
-</div>
+<div id="displayImage"></div>
 ```
 
 The area you decide to display your photos (the `<div>` with id `displayImage` 
@@ -134,7 +133,7 @@ If you would like to change the options of a gallery instance after it has
 been instantiated, you can do so as well:
 
 ```javascript
-// create gallery
+// create gallery linked to '#displayImage'
 $('#displayImage').gallery({source: "#thumbnails img"});
 
 // get current values of options
@@ -152,15 +151,15 @@ If the options provided are not enough to obtain the look you would like to
 achieve, simple-gallery comes loaded with extra functionality that may be 
 able to help.
 
-### Public Functions
+### Public Functions ###
 
 There are currently two public functions which can be called once the gallery 
 has been instantiated:
 
-+ stopAnimation - stops the display image from switching to the next photo in 
++ `stopAnimation` - stops the display image from switching to the next photo in 
 the gallery.
 
-+ resumeAnimation - resumes the gallery's animation after having been stopped.
++ `resumeAnimation` - resumes the gallery's animation after having been stopped.
 
 All public functions are called on the gallery instance of the display image 
 after instantiation as follows:
@@ -188,6 +187,46 @@ $('#displayImage').on({
 });
 ```
 
+### Event Binding ###
+
+simple-gallery.js triggers the following custom events while in use:
+
++ `galleryimageload` - triggered when a new picture is loaded into the target 
+display image.
+
++ `galleryclick` - triggered when one of the source thumbnail images is 
+clicked.
+
++ `galleryanimationstop` - triggered when the gallery's `stopAnimation` 
+method is called.
+
++ `galleryanimationresume` - triggered when the gallery's `resumeAnimation` 
+method is called.
+
+Handler functions can be bound to the gallery's events after instantiation 
+like so:
+
+```javascript
+// create gallery linked to '#displayImage'
+$('#displayImage').gallery({source: "#thumbnails img"});
+
+// attach handler functions to gallery events
+$("#displayImage").on({
+    galleryimageload: function() {
+        console.log("new image loaded");
+    },
+    galleryclick: function() {
+        console.log("gallery source image clicked");
+    },
+    galleryanimationstop: function() {
+        console.log("gallery animation stopped");
+    },
+    galleryanimationresume: function() {
+        console.log("gallery animation resumed");
+    }
+});
+```
+
 ## Examples ##
 
 A few examples of simple ways to implement this plugin:

examples/grid-layout/index.html

@@ -49,8 +49,7 @@
             <img src="../images/img9.jpg" title="image 9" />
         </div>
     </div>
-    <div id="full">
-    </div>
+    <div id="full"></div>
     <p id="caption"></p>
 
     <script>
@@ -62,6 +61,7 @@
             showCaptions: true,
             captionTarget: "#caption"
         });
+
         $("#full").on({
             mouseenter: function() {
                 $("#full").gallery("stopAnimation");
@@ -70,6 +70,21 @@
                 $("#full").gallery("resumeAnimation");
             }
         });
+
+        $("#full").on({
+            galleryimageload: function() {
+                console.log("new image loaded");
+            },
+            galleryclick: function() {
+                console.log("gallery source image clicked");
+            },
+            galleryanimationstop: function() {
+                console.log("gallery animation stopped");
+            },
+            galleryanimationresume: function() {
+                console.log("gallery animation resumed");
+            }
+        });
     </script>
 </body>
 </html>

examples/row-layout/index.html

@@ -30,25 +30,57 @@
             width:250px;
             padding:0 5px;
         }
+
+        #caption {
+            clear:left;
+        }
     </style>
 </head>
 <body>
     <div id="images">
-        <img src="../images/img1.jpg" />
-        <img src="../images/img2.jpg" />
-        <img src="../images/img3.jpg" />
-        <img src="../images/img4.jpg" />
-        <img src="../images/img5.jpg" />
-        <img src="../images/img6.jpg" />
-        <img src="../images/img7.jpg" />
-        <img src="../images/img8.jpg" />
-        <img src="../images/img9.jpg" />
-    </div>
-    <div id="full">
+        <img src="../images/img1.jpg" title="image 1" />
+        <img src="../images/img2.jpg" title="image 2" />
+        <img src="../images/img3.jpg" title="image 3" />
+        <img src="../images/img1.jpg" title="image 4" />
+        <img src="../images/img2.jpg" title="image 5" />
+        <img src="../images/img3.jpg" title="image 6" />
+        <img src="../images/img1.jpg" title="image 7" />
+        <img src="../images/img2.jpg" title="image 8" />
+        <img src="../images/img3.jpg" title="image 9" />
     </div>
+    <div id="full"></div>
+    <p id="caption"></p>
 
     <script>
-        $('#full').gallery({source: "#images img"});
+        $('#full').gallery({
+            source: "#images img",
+            showCaptions: true,
+            captionTarget: "#caption"
+        });
+
+        $("#full").on({
+            mouseenter: function() {
+                $("#full").gallery("stopAnimation");
+            },
+            mouseleave: function() {
+                $("#full").gallery("resumeAnimation");
+            }
+        });
+
+        $("#full").on({
+            galleryimageload: function() {
+                console.log("new image loaded");
+            },
+            galleryclick: function() {
+                console.log("gallery source image clicked");
+            },
+            galleryanimationstop: function() {
+                console.log("gallery animation stopped");
+            },
+            galleryanimationresume: function() {
+                console.log("gallery animation resumed");
+            }
+        });
     </script>
 </body>
 </html>

simple-gallery.js

@@ -1,5 +1,5 @@
 /*
- * simple-gallery.js - v2.3.1
+ * simple-gallery.js - v2.4.0
  * Author: Alex Kalicki (https://github.com/akalicki)
  *
  * simple-gallery.js is a lightweight jQuery extension for quickly creating
@@ -30,7 +30,6 @@
         _create: function() {
             this.images = $(this.options.source);
             this.nextImg = this.options.startImg;
-            this.cycle;
 
             this.element.css({
                 "background-repeat": "no-repeat",
@@ -97,6 +96,8 @@
 
         // select a new image to be placed in target
         _selectImg: function(index) {
+            this._trigger('imageload');
+
             var selected = this.images.get(index);
             var url = selected.src;
             this.element.css("background-image", "url(" + url + ")");
@@ -146,6 +147,8 @@
 
         // reset timer and select image if clicked
         _onClick: function(event) {
+            this._trigger('click');
+
             window.clearTimeout(this.cycle);
             this.element.stop(true);
             this.nextImg = this.images.index($(event.target));
@@ -154,6 +157,8 @@
 
         // stop photos from switching
         stopAnimation: function() {
+            this._trigger('animationstop');
+
             this.options.animate = false;
             window.clearTimeout(this.cycle);
             this.element.stop(true);
@@ -166,6 +171,8 @@
         // resume photo switching
         resumeAnimation: function() {
             var self = this;
+            self._trigger('animationresume');
+
             self.options.animate = true;
             self.cycle = window.setTimeout(function() {
                 self._loadNext();