/* | |
* 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.dacSlideshow = function(o) { | |
//Options - see above | |
o = $.extend({ | |
btnPrev: null, | |
btnNext: null, | |
auto: true, | |
speed: 500, | |
autoTime: 12000, | |
easing: null, | |
start: 0, | |
scroll: 1, | |
pagination: true | |
}, o || {}); | |
//Set up a carousel for each | |
return this.each(function() { | |
var running = false; | |
var animCss = o.vertical ? "top" : "left"; | |
var sizeCss = o.vertical ? "height" : "width"; | |
var div = $(this); | |
var ul = $("ul", div); | |
var tLi = $("li", ul); | |
var tl = tLi.size(); | |
var timer = null; | |
var li = $("li", ul); | |
var itemLength = li.size(); | |
var curr = o.start; | |
li.css({float: o.vertical ? "none" : "left"}); | |
ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"}); | |
div.css({position: "relative", "z-index": "2", left: "0px"}); | |
var liSize = o.vertical ? height(li) : width(li); | |
var ulSize = liSize * itemLength; | |
var divSize = liSize; | |
li.css({width: li.width(), height: li.height()}); | |
ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize)); | |
div.css(sizeCss, divSize+"px"); | |
//Pagination | |
if (o.pagination) { | |
var pagination = $("<div class='pagination'></div>"); | |
var pag_ul = $("<ul></ul>"); | |
if (tl > 1) { | |
for (var i=0;i<tl;i++) { | |
var li = $("<li>"+i+"</li>"); | |
pag_ul.append(li); | |
if (i==o.start) li.addClass('active'); | |
li.click(function() { | |
go(parseInt($(this).text())); | |
}) | |
} | |
pagination.append(pag_ul); | |
div.append(pagination); | |
} | |
} | |
//Previous button | |
if(o.btnPrev) | |
$(o.btnPrev).click(function(e) { | |
e.preventDefault(); | |
return go(curr-o.scroll); | |
}); | |
//Next button | |
if(o.btnNext) | |
$(o.btnNext).click(function(e) { | |
e.preventDefault(); | |
return go(curr+o.scroll); | |
}); | |
//Auto rotation | |
if(o.auto) startRotateTimer(); | |
function startRotateTimer() { | |
clearInterval(timer); | |
timer = setInterval(function() { | |
if (curr == tl-1) { | |
go(0); | |
} else { | |
go(curr+o.scroll); | |
} | |
}, o.autoTime); | |
} | |
//Go to an item | |
function go(to) { | |
if(!running) { | |
if(to<0) { | |
to = itemLength-1; | |
} else if (to>itemLength-1) { | |
to = 0; | |
} | |
curr = to; | |
running = true; | |
ul.animate( | |
animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing, | |
function() { | |
running = false; | |
} | |
); | |
$(o.btnPrev + "," + o.btnNext).removeClass("disabled"); | |
$( (curr-o.scroll<0 && o.btnPrev) | |
|| | |
(curr+o.scroll > itemLength && o.btnNext) | |
|| | |
[] | |
).addClass("disabled"); | |
var nav_items = $('li', pagination); | |
nav_items.removeClass('active'); | |
nav_items.eq(to).addClass('active'); | |
} | |
if(o.auto) startRotateTimer(); | |
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); |