You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

247 lines
6.7 KiB

13 years ago
/*! http://responsive-slides.viljamis.com v1.20 by @viljamis */
(function ($, window, i) {
$.fn.responsiveSlides = function (options) {
// Default settings
var settings = $.extend({
"auto": true, // Boolean: Animate automatically
"pagination": false, // Boolean: Show pagination
"nav": false, // Boolean: Show navigation
"fade": 1000, // Integer: Crossfade time, in milliseconds
"maxwidth": "none", // Integer: Max-width of the Slideshow, in pixels
"speed": 4000 // Integer: How long image shows before fading to next, in milliseconds
}, options);
return this.each(function () {
// Index which is used for namespacing
i++;
var $this = $(this);
var index = 0,
$slide = $this.children(),
length = $slide.size(),
13 years ago
fadetime = parseFloat(settings.fade),
// Namespacing
namespace = "rslides",
namespaceIndex = namespace + i,
13 years ago
// Classes
namespaceIndexClass = namespace + " " + namespaceIndex,
activeClass = namespace + "_here",
visibleClass = namespaceIndex + "_on",
slideClassPrefix = namespaceIndex + "_s",
tabsClass = namespaceIndex + "_tabs",
13 years ago
// Pagination
$pagination = $("<ul class=\"" + namespace + "_tabs " + tabsClass + "\" />"),
13 years ago
// Styles for visible and hidden slides
visible = {"float": "left", "position": "relative"},
hidden = {"float": "none", "position": "absolute"};
// Fading animation
var slideTo = function (idx) {
$slide
.stop()
.fadeOut(fadetime, function () {
$(this)
.removeClass(visibleClass)
.css(hidden);
})
.eq(idx)
.fadeIn(fadetime, function () {
$(this)
.addClass(visibleClass)
.css(visible);
index = idx;
});
};
// Only run if there's more than one slide
if ($slide.size() > 1) {
// Add ID's to each slide
$slide.each(function (i) {
this.id = slideClassPrefix + i;
});
// Add max-width and classes
$this
.css("max-width", settings.maxwidth)
.addClass(namespaceIndexClass);
13 years ago
// Hide all slides, then show first one + add visible class
$slide
.hide()
.eq(0)
.addClass(visibleClass)
.css(visible)
.show();
// Build pagination
if (settings.pagination === true) {
var tabMarkup = [];
$slide.each(function (i) {
var n = i + 1;
tabMarkup.push("<li>");
tabMarkup.push("<a href=\"#\" class=\"" + slideClassPrefix + n + "\">" + n + "</a>");
tabMarkup.push("</li>");
});
$pagination.append(tabMarkup.join(""));
var $tabs = $pagination.find("a");
// Inject pagination
$this.after($pagination);
}
// Select active tab
var selectTab = function (idx) {
$tabs
.closest("li")
.removeClass(activeClass)
.eq(idx)
.addClass(activeClass);
};
// Auto rotation
if (settings.auto === true) {
13 years ago
var startCycle, rotate;
// Rotate slides automatically
startCycle = function () {
rotate = setInterval(function () {
var idx = index + 1 < length ? index + 1 : 0;
13 years ago
// Remove active state and set new if pagination = "true"
if (settings.pagination === true) {
selectTab(idx);
}
slideTo(idx);
}, parseFloat(settings.speed));
};
// Init rotation
startCycle();
}
var restartCycle = function () {
if (settings.auto === true) {
// Stop auto rotation
clearInterval(rotate);
// ...Restart it
startCycle();
}
};
// Click/touch event handler
if (settings.pagination === true) {
// On touch start
13 years ago
$tabs.on("click", function (e) {
e.preventDefault();
restartCycle();
// Get index of clicked tab
var idx = $tabs.index(this);
// Break if element is already active
if (index === idx) {
return;
}
13 years ago
// Prevent click/touch if currently animated
if ($("." + visibleClass + ":animated").length) {
return false;
}
// Remove active state from old tab and set new one
selectTab(idx);
// Do the animation
slideTo(idx);
})
.eq(0)
.closest("li")
.addClass(activeClass);
}
}
// Prev and Next
if (settings.nav === true) {
13 years ago
// Build navigation
13 years ago
var navMarkup =
"<a href=\"#\" class=\"" + namespaceIndex + "_nav prev\">&laquo;</a>" +
"<a href=\"#\" class=\"" + namespaceIndex + "_nav next\">&raquo;</a>";
13 years ago
// Inject navigation
$this.after(navMarkup);
13 years ago
// Prev and next buttons
13 years ago
var $prev = $("." + namespaceIndex + "_nav.prev"),
$next = $("." + namespaceIndex + "_nav.next");
13 years ago
// Prev slide
$prev.on("click", function (e) {
e.preventDefault();
var idx = $slide.index($("." + visibleClass)),
idxTo = idx - 1;
if ($("." + visibleClass + ":animated").length) {
return false;
}
restartCycle();
slideTo(idxTo);
13 years ago
if (settings.pagination === true) {
selectTab(idxTo);
}
});
// Next slide
13 years ago
$next.on("click", function (e) {
e.preventDefault();
var idx = $slide.index($("." + visibleClass)),
idxTo = idx + 1 < length ? index + 1 : 0;
if ($("." + visibleClass + ":animated").length) {
return false;
}
restartCycle();
slideTo(idxTo);
13 years ago
if (settings.pagination === true) {
selectTab(idxTo);
}
});
}
13 years ago
// Add fallback if max-width isn't supported and settings "maxwidth" is set
if (typeof document.body.style.maxWidth === "undefined" && options && options.maxwidth) {
var widthSupport = function () {
$this.css("width", "100%");
if ($this.width() > settings.maxwidth) {
$this.css("width", settings.maxwidth);
}
};
// Init fallback
widthSupport();
// + Bind on window resize
$(window).on("resize", function () {
widthSupport();
});
}
});
};
})(jQuery, this, 0);