If you take a look at my Stationery Premium WordPress Theme, you will see a featured slideshow that was inspired by Kevin Liew’s jQuery Image Gallery/News Slider with Caption Tutorial. The only problem I had with his original code, was that it would sort of rewind back to the first element if you reached the end of the slideshow.
I decided to take Kevin’s idea and recode it from scratch so that it would no longer have to rely on Ariel Flesler scrollTo plugin and so that the slideshow would have an infinite scroll.
Here is the jQuery code for my new Scollerota jQuery Slideshow Plugin:
/**
* jQuery.scrollerota
* Version 1.0
* Copyright (c) 2011 c.bavota - http://bavotasan.com
* Dual licensed under MIT and GPL.
* Date: 02/04/2011
**/
(function($){
$.fn.scrollerota = function(options) {
// setting the defaults
// $("#scrollerota").scrollerota({ width: 500, height: 333, padding: 10, speed: 2000, timer: 5000, slideshow: true, easing: "easeInOutQuart" });
var defaults = {
width: 500,
height: 333,
padding: 10,
speed: 2000,
timer: 5000,
slideshow: true,
easing: 'easeInOutQuart'
};
var options = $.extend(defaults, options);
// and the plugin begins
return this.each(function() {
// initializing the variables
var obj, images, texts, first, last, imglimit, txtlimit, itemNum, totalWidth, totalHeight, txtTop, imgLeft, txtMove, imgMove;
// creating the object variable
obj = $(this);
images = obj.find("ul.images");
texts = obj.find("ul.text");
// cloning the first and last item to create the infinite scrolling
first = images.find("li:first");
last = images.find("li:last");
first.clone().appendTo(images);
last.clone().prependTo(images);
first = texts.find("li:first");
last = texts.find("li:last");
first.clone().appendTo(texts);
last.clone().prependTo(texts);
// figuring out the total width and height for the images and the text boxes
itemNum = images.find("li").length;
totalWidth = itemNum * options.width;
totalHeight = itemNum * options.height;
imglimit = -((itemNum - 1) * options.width);
txtlimit = -((itemNum - 1) * options.height);
// setting the CSS for the image elements
images
.css({
width: totalWidth+"px",
height: options.height+"px",
left: -options.width+"px"
})
.find("li").css({ width: options.width+"px", height: options.height+"px" })
.end()
.find("li img").css({ width: options.width+"px", height: options.height+"px" });
// setting the CSS for the text elements
texts
.css({
height: totalHeight+"px",
top: -options.height+"px"
})
.find("li").css({ height: (options.height-(options.padding*2))+"px", padding: options.padding+"px" });
// slideshow functionality
if(options.slideshow) {
// creating the loop for the slideshow
loop = setTimeout(function() { autoScroll(1,1); }, options.timer);
// adding the controls for the slideshow
obj.append('')
// the pause click function
obj.find(".pause").live("click", function() {
clearTimeout(loop);
obj.find(".play, .pause").toggle();
});
// the play click function
obj.find(".play").live("click", function() {
loop = setTimeout(function() { autoScroll(1, 1); }, options.timer);
obj.find(".play, .pause").toggle();
});
} else {
// adding the next and previous controls
obj.append('')
}
// the next and previous click function
obj.find(".next, .prev").live("click", function() {
if($(this).hasClass("next")) {
autoScroll(1,0);
} else {
autoScroll(0,0);
}
if(options.slideshow) {
clearTimeout(loop);
obj.find(".play").show();
obj.find(".pause").hide();
}
});
// the autoScroll function
function autoScroll(next, auto) {
txtTop = texts.css('top').replace("px", "");
imgLeft = images.css('left').replace("px", "");
txtMove = (next) ? txtTop - options.height : parseInt(txtTop) + parseInt(options.height);
imgMove = (next) ? imgLeft - options.width : parseInt(imgLeft) + parseInt(options.width);
// animating the text
texts.not(':animated').animate({ top: txtMove+"px" }, options.speed, options.easing, function() {
// check if we have reach the end in either direction of the scroll
if(txtMove==txtlimit) { texts.css({ top: -options.height+"px" }); }
if(txtMove==0) { texts.css({ top: (txtlimit+options.height)+"px" }); }
});
// animating the images
images.not(':animated').animate({ left: imgMove+"px" }, options.speed, options.easing, function() {
// check if we have reach the end in either direction of the scroll
if(imgMove==imglimit) { images.css({ left: -options.width+"px" }); }
if(imgMove==0) { images.css({ left: (imglimit+options.width)+"px" }); }
});
// continuing the loop if the slideshow is activated
if(auto && options.slideshow) { loop = setTimeout(function() { autoScroll(1,1); }, options.timer); }
}
});
};
})(jQuery);
Here is the basic CSS:
#scrollerota {
width: 500px;
height: 333px;
overflow: hidden;
position: relative;
}
#scrollerota ul.text {
list-style: none;
width: 200px;
background: url(images/pixel.png);
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
color: #fff;
font-size: 14px;
line-height: 20px;
}
#scrollerota ul.text li {
overflow: hidden;
}
#scrollerota a.readmore {
background: #666;
border: 1px solid #777;
padding: 5px 0;
text-align: center;
color: #fff;
clear: both;
display: block;
width: 80px;
margin-top: 16px;
text-decoration: none;
font-size: 12px;
line-height: 17px;
}
#scrollerota a:hover.readmore {
background: #888;
border: 1px solid #999;
text-decoration: none;
}
#scrollerota ul.images {
list-style: none;
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
}
#scrollerota ul.images li {
float: left;
}
#scrollerota .controls {
position: absolute;
bottom: 10px;
right: 10px;
}
#scrollerota .controls a {
width: 22px;
height: 22px;
display: block;
float: left;
background: url(images/controls.png) no-repeat;
}
#scrollerota .controls .prev {
background-position: 0 -22px;
}
#scrollerota .controls .next {
background-position: -23px -22px;
}
#scrollerota .controls .play {
background-position: -23px 0;
display: none;
}
And here is what the HTML should look like:
- Nullam rutrum, nibh sit amet sodales luctus, mauris est placerat justo, molestie gravida lorem enim eu sapien. Curabitur porttitor lobortis felis ac ultricies. Nulla velit ipsum, lobortis ac bibendum vitae, aliquam at metus.Read more
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam et eros nisl. Etiam vehicula lobortis pharetra. Integer ut ipsum risus.Read more
- Nulla facilisis felis vitae leo condimentum quis adipiscing turpis rhoncus. Sed id lacus libero, ut accumsan lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Read more
With all that in place, all you have to do is make sure to load up jQuery at the top of your web page and add the following piece of code to the bottom, right before the closing body tag:
Here is a break down of the parameters, though some are pretty self-explanatory:
- width
- The full width of the slideshow
- height
- The full height of the slideshow
- padding
- The amount of padding surrounding the text box to the left
- speed
- The amount of time in milliseconds that it takes for the element to slide
- timer
- The amount of time in milliseconds for the slideshow to pause between slides (ignored if slideshow is turned off)
- slideshow
- Set to false if you wish to remove the automatic slideshow
- easing
- The easing type of animation
If you wish to use the advanced easing options, you would also need to upload the latest jQuery UI. If not, the only two easing options you have are linear and swing.
