Home | History | Annotate | Download | only in js 
      1 /*
      2  *	jQuery dacSlideshow 1.0
      3  *
      4  *  Sample usage:
      5  *  HTML -
      6  *  <div class="slideshow-container">
      7  *   <a href="" class="slideshow-prev">Prev</a>
      8  *   <a href="" class="slideshow-next">Next</a>
      9  *   <ul>
     10  *       <li class="item"><img src="images/marquee1.jpg"></li>
     11  *       <li class="item"><img src="images/marquee2.jpg"></li>
     12  *       <li class="item"><img src="images/marquee3.jpg"></li>
     13  *       <li class="item"><img src="images/marquee4.jpg"></li>
     14  *   </ul>
     15  *  </div>
     16  *
     17  *   <script type="text/javascript">
     18  *   $('.slideshow-container').dacSlideshow({
     19  *       auto: true,
     20  *       btnPrev: '.slideshow-prev',
     21  *       btnNext: '.slideshow-next'
     22  *   });
     23  *   </script>
     24  *
     25  *  Options:
     26  *  btnPrev:    optional identifier for previous button
     27  *  btnNext:    optional identifier for next button
     28  *  auto:       whether or not to auto-proceed
     29  *  speed:      animation speed
     30  *  autoTime:   time between auto-rotation
     31  *  easing:     easing function for transition
     32  *  start:      item to select by default
     33  *  scroll:     direction to scroll in
     34  *  pagination: whether or not to include dotted pagination
     35  *
     36  */
     37 
     38  (function($) {
     39  $.fn.dacTabbedList = function(o) {
     40 
     41      //Options - see above
     42      o = $.extend({
     43          speed : 250,
     44          easing: null,
     45          nav_id: null,
     46          frame_id: null
     47      }, o || {});
     48 
     49      //Set up a carousel for each
     50      return this.each(function() {
     51 
     52          var curr = 0;
     53          var running = false;
     54          var animCss = "margin-left";
     55          var sizeCss = "width";
     56          var div = $(this);
     57 
     58          var nav = $(o.nav_id, div);
     59          var nav_li = $("li", nav);
     60          var nav_size = nav_li.size();
     61          var frame = div.find(o.frame_id);
     62          var content_width = $(frame).find('ul').width();
     63          //Buttons
     64          $(nav_li).click(function(e) {
     65            go($(nav_li).index($(this)));
     66          })
     67 
     68          //Go to an item
     69          function go(to) {
     70              if(!running) {
     71                  curr = to;
     72                  running = true;
     73 
     74                  frame.animate({ 'margin-left' : -(curr*content_width) }, o.speed, o.easing,
     75                      function() {
     76                          running = false;
     77                      }
     78                  );
     79 
     80 
     81                  nav_li.removeClass('active');
     82                  nav_li.eq(to).addClass('active');
     83 
     84 
     85              }
     86              return false;
     87          };
     88      });
     89  };
     90 
     91  function css(el, prop) {
     92      return parseInt($.css(el[0], prop)) || 0;
     93  };
     94  function width(el) {
     95      return  el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
     96  };
     97  function height(el) {
     98      return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
     99  };
    100 
    101  })(jQuery);