Implemented basic support for a slide event

oyvindkinsey · Jul 1, 2010 · dbb9673 · dbb9673
1 parent 9e38ab8
commit dbb9673
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/JsSlideshow.js b/JsSlideshow.js
@@ -21,9 +21,13 @@ function JsSlideshow(config){
         }
         else {
             // slide
+            var prevIndex = index;
             if (++index == config.images.length) {
                 index = 0;
             }
+            if (config.listeners.slide) {
+                config.listeners.slide(config.images[prevIndex], config.images[index]);
+            }
             var prevImage = image;
             image = config.images[index].dom;
             // move the image to the back
@@ -50,19 +54,25 @@ function JsSlideshow(config){
         };
         target.style.cursor = "pointer";
     }
+    if (!config.listeners) {
+        config.listeners = {};
+    }
     // load the images
     for (var i = 0, len = config.images.length; i < len; i++) {
         image = document.createElement("img");
         image.style.position = "absolute";
         image.style.top = "0px";
         image.style.left = "0px";
         image.src = config.images[i].url;
-        image.title = config.images[i].name;
+        image.title = config.images[i].title;
         target.insertBefore(image, target.firstChild);
         config.images[i].dom = image;
     }
     image = config.images[0].dom;
     //start a slide
+    if (config.listeners.slide) {
+        config.listeners.slide(null, config.images[index]);
+    }
     timer = window.setTimeout(function(){
         _fade(1);
     }, time);

diff --git a/index.html b/index.html
@@ -16,6 +16,8 @@
     <body>
         <div id="slideshow">
         </div>
+        <div id="name">
+        </div>
         The code needed:
         <br/>
         <pre>
@@ -31,24 +33,30 @@
         and is shared a under Creative Commons Attribution.
         <script type="text/javascript">
             (function(){
+                var name = document.getElementById("name");
                 var sl = new JsSlideshow({
                     target: "slideshow",
                     images: [{
                         url: "images/4504470765_90aa261be6.jpg",
-                        text: "foo"
+                        title: "foo1"
                     }, {
                         url: "images/4510204607_42bbb55d9c.jpg",
-                        text: "foo"
+                        title: "foo2"
                     }, {
                         url: "images/4510826808_f6edfc906a.jpg",
-                        text: "foo"
+                        title: "foo3"
                     }, {
                         url: "images/4513712885_0c008e3638.jpg",
-                        text: "foo"
+                        title: "foo4"
                     }],
                     transition: 3000,
                     time: 2000,
-                    url: "http://www.flickr.com/photos/bobowen"
+                    url: "http://www.flickr.com/photos/bobowen",
+                    listeners: {
+                        slide: function(from, to){
+                            name.innerHTML = to.title;
+                        }
+                    }
                 });
             })();
         </script>