Newbie: Adding autorun to content slider
Hello all. I have just started dabbling in jquery, and have added a snippet to a website I am making to rotate content in a div at the top. It simple is a picture and some text with a 'prev' and 'next' button. However, I wish to get rid of these buttons and let it run by itself and continually loop through the content with say a 4 second delay on each one . Is there a really simple way to do this?
Here is the code it is calling:
-
var animSpeed = 200;
var panelWidth = 750;
$(document).ready(function(){
// get the page's body class
var thisPage = $("body").attr("class");
// initialize by adding our magic slider classes
$("#showcase-featured").addClass("showcase-slider");
$("#showcase-featured div.item").addClass("item-slider");
// and, let's also do something about those previews
$("ol.previews").addClass("previews-large");
// however, if there's an .external-link class, load a new window
$("ol.previews a.external-link").click(function(){
var urlPath = $(this).attr("href");
window.open(urlPath, "bcExternal");
return false;
});
// if there's no .external-link class, pop up the large image
$("ol.previews a:not(.external-link)").click(function(){
var thisCaption = $(this).text();
// no captions on portfolio pages, please
if (thisPage != "portfolio") {
$(this).parent().append('<span class="caption">' + thisCaption + '</span>');
}
// create a new image object, add it and fade in
var imgPath = $(this).attr("href");
$(this).parent().append('<img src="' + imgPath + '" width="725" height="425" />').css({display:"none"}).fadeIn(animSpeed * 2);
// also add a virtual "close" link
$(this).parent().append('<span class="close">Close</span>');
// set the class, and then perform cleanup duties after
$(this).parent().addClass("selected").click(function(){
$(this).children("span").remove();
$(this).children("img").fadeOut(animSpeed, function(){
$(this).parent().removeClass("selected");
$(this).remove();
});
});
return false;
});
// set all the UI bits in one go
function drawUI(position, direction) {
setPosition(position, direction);
setTitle(position);
setNav(position);
}
// set the item title and counter status
function setTitle(counter) {
var currentPos = counter;
$("h3.work-title").text("").prepend('<span class="counter">' + currentPos + '/' + (items.length - 1) + '</span>');
// let's make sure the title attribute is set first, if not show counter only
if ($("#item-" + currentPos).attr("title")) {
var title = $("#item-" + currentPos).attr("title");
$("h3.work-title").prepend(title + " ");
}
}
// set the nav links for the item pager
function setNav(counter) {
var next = counter + 1;
if (counter < (items.length - 1)) {
$("#pager .next a").attr("href", "#item-" + next);
}
var prev = counter - 1;
if (counter > 1) {
$("#pager .previous a").attr("href", "#item-" + prev);
}
}
// set new position of items and slide them in place
function setPosition(current, direction) {
// current will be index 1
// but our array is index 0
var offsets = new Array();
// first, set descending offsets for all items prior to current
offsetValue = 0;
// debug:
//$("body").append(current + "/" + (items.length - 1) + " | ");
for (i = current; i > 0; i--) {
offsetValue = offsetValue - panelWidth;
offsets[i] = offsetValue;
// debug:
//$("body").append("a" + i + " " + offsets[i] + " | ");
}
// then, set ascending offsets for all items after current
offsetValue = 0;
for (i = current; i <= (items.length - 1); i++) {
offsetValue = offsetValue + panelWidth;
offsets[i] = offsetValue;
// debug:
//$("body").append("b" + i + " " + offsets[i] + " | ");
}
offsets[current] = 0;
// the adjacent panel is the one we're animating along with the current panel
// counter-intuitively, it's in the opposite direction that the panels are traveling
var adjacent = false;
if (direction == "left") {
adjacent = current + 1;
} else {
adjacent = current - 1;
}
// debug:
// $("body").append("p" + current + " " + adjacent + " | ");
// $("body").append("<br />");
for (i = 1; i <= (items.length - 1); i++) {
// we only want to animate the visible ones
// otherwise, rapid double-clicks lead to ugly stacking errors
if ((i == current) || (i == adjacent)) {
// slide portfolio pages, fade the rest
if (thisPage == "portfolio") {
$("#showcase-featured #" + items[i]).animate({left:offsets[i]}, animSpeed);
} else {
// for fades, we need to fade in the current, as we fade out the adjacent
if (i == current) {
$("#showcase-featured #" + items[i]).css({left:offsets[i], display:"none"}).fadeIn(animSpeed);
} else {
// we'll fade out the adjacent first, then set a callback to move it to its new position
$("#showcase-featured #" + items[adjacent]).fadeOut(animSpeed * 2, function(){
$(this).css({left:offsets[adjacent]});
});
}
}
} else {
// if we're not going to animate them though, let's just move the offsets
$("#showcase-featured #" + items[i]).css({left:offsets[i]});
}
}
}
// start by getting a list of every "item" div on the page
var items = new Array();
var i = 1;
$("div.wrap2a div").each(function(){
// if we found that "item" class that we're looking for, then let's throw the element's id into our array
if ($(this).hasClass("item")) {
items[i] = $(this).attr("id");
i++;
};
});
// initialize starting position
var currentPanel = 1;
drawUI(currentPanel, "");
// the meat of the slider. One set for prev, another for next
$("#pager li.next a").click(function() {
// let's only do this if there's more to come
if (currentPanel < (items.length - 1)) {
currentPanel++;
drawUI(currentPanel, "right");
}
return false;
});
$("#pager li.previous a").click(function() {
// let's only do this if there's more to come
if (currentPanel > 1) {
currentPanel--;
drawUI(currentPanel, "left");
}
return false;
});
});
Many thanks!
