/* | |
* jQuery dacSlideshow 1.0 | |
* | |
* Sample usage: | |
* HTML - | |
* <div class="slideshow-container"> | |
* <a href="" class="slideshow-prev">Prev</a> | |
* <a href="" class="slideshow-next">Next</a> | |
* <ul> | |
* <li class="item"><img src="images/marquee1.jpg"></li> | |
* <li class="item"><img src="images/marquee2.jpg"></li> | |
* <li class="item"><img src="images/marquee3.jpg"></li> | |
* <li class="item"><img src="images/marquee4.jpg"></li> | |
* </ul> | |
* </div> | |
* | |
* <script type="text/javascript"> | |
* $('.slideshow-container').dacSlideshow({ | |
* auto: true, | |
* btnPrev: '.slideshow-prev', | |
* btnNext: '.slideshow-next' | |
* }); | |
* </script> | |
* | |
* Options: | |
* btnPrev: optional identifier for previous button | |
* btnNext: optional identifier for next button | |
* auto: whether or not to auto-proceed | |
* speed: animation speed | |
* autoTime: time between auto-rotation | |
* easing: easing function for transition | |
* start: item to select by default | |
* scroll: direction to scroll in | |
* pagination: whether or not to include dotted pagination | |
* | |
*/ | |
(function($) { | |
$.fn.dacTabbedList = function(o) { | |
//Options - see above | |
o = $.extend({ | |
speed : 250, | |
easing: null, | |
nav_id: null, | |
frame_id: null | |
}, o || {}); | |
//Set up a carousel for each | |
return this.each(function() { | |
var curr = 0; | |
var running = false; | |
var animCss = "margin-left"; | |
var sizeCss = "width"; | |
var div = $(this); | |
var nav = $(o.nav_id, div); | |
var nav_li = $("li", nav); | |
var nav_size = nav_li.size(); | |
var frame = div.find(o.frame_id); | |
var content_width = $(frame).find('ul').width(); | |
//Buttons | |
$(nav_li).click(function(e) { | |
go($(nav_li).index($(this))); | |
}) | |
//Go to an item | |
function go(to) { | |
if(!running) { | |
curr = to; | |
running = true; | |
frame.animate({ 'margin-left' : -(curr*content_width) }, o.speed, o.easing, | |
function() { | |
running = false; | |
} | |
); | |
nav_li.removeClass('active'); | |
nav_li.eq(to).addClass('active'); | |
} | |
return false; | |
}; | |
}); | |
}; | |
function css(el, prop) { | |
return parseInt($.css(el[0], prop)) || 0; | |
}; | |
function width(el) { | |
return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight'); | |
}; | |
function height(el) { | |
return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom'); | |
}; | |
})(jQuery); |