js/jquery.ui.thumbs.js

   1 /*
   2  * jQuery UI Thumbs 1.0.0 beta
   3  *
   4  * Creates an image thumbnail slideshow for an image tag when mouse is over.
   5  *
   6  * Copyright 2011, Călin-Andrei Burloiu
   7  * Dual licensed under the MIT or GPL Version 2 licenses.
   8  * http://jquery.org/license
   9  *
  10  * Depends:
  11  *   jquery.ui.core.js
  12  *   jquery.ui.widget.js
  13  */
  14 (function( $, undefined ) {
  15
  16 $.widget( "ui.thumbs", {
  17         version: "1.0.0 beta",
  18         options: {
  19                 // in milliseconds
  20                 period: 750,
  21                 src: []
  22         },
  23
  24         _create: function() {
  25                 var widget = this;
  26
  27                 if (typeof(widget.element.data('src')) != 'undefined')
  28                         widget.options.src =
  29                                         widget.options.src.concat(widget.element.data('src'));
  30
  31                 widget.index = 0;
  32                 widget.count = widget.options.src.length;
  33                 widget.defaultSrc = widget.element.attr('src');
  34
  35                 widget._preloadImages();
  36
  37                 widget.element
  38                         .mouseover(function() {
  39                                 // Initial frame
  40                                 widget.index = 0;
  41                                 widget.element.attr('src', widget.options.src[0]);
  42
  43                                 widget.intervalHandler = setInterval(function() {
  44                                         widget.index = (widget.index + 1) % widget.count;
  45                                         widget.element.attr('src',
  46                                                         widget.options.src[widget.index]);
  47                                 }, widget.options.period);
  48
  49                         })
  50                         .mouseout(function() {
  51                                 clearInterval(widget.intervalHandler);
  52                                 widget.element.attr('src', widget.defaultSrc);
  53                         });
  54         },
  55
  56         _preloadImages: function() {
  57                 var images = new Array();
  58                 for (var i = 0; i < this.options.src.length; i++)
  59                 {
  60                         images[i] = new Image();
  61                         images[i].src = this.options.src[i];
  62                 }
  63         }
  64
  65 });
  66
  67 })( jQuery );
  68