101 lines
2.7 KiB
JavaScript
101 lines
2.7 KiB
JavaScript
/*
|
|
* 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); |