This plug-in I made is quite handy and has a few applications. I think JQuery is a fantastic library for javascript, as it does what it says on the tin:
WRITE LESS, DO MORE
Ok so the fader, I have written this plugin with a few options, which are:
- slideClass
- This is a JQuery selector syntax
- slideDuration
- This duration that the currently item stays visible for
- fadeOutDuration
- The duration it takes for an item to fade out
- fadeInDuration
- The duration it takes for an item to fade in
The structure which the plugin expects is simply a container element e.g. a div and subsequent nested containers which it will apply its effect to:
<div class="slides">
<div class="slide">
<h1>Slide 1</h1>
</div>
<div class="slide">
<h1>Slide 2</h1>
</div>
<div class="slide">
<h1>Slide 3</h1>
</div>
<div class="slide">
<h1>Slide 4</h1>
</div>
</div>To trigger this function as soon as possible I place the following just before the end of the body tag:
...
<script type="text/javascript">
(function() {
var options = {
slideClass: ".slide",
slideDuration: 6000,
fadeOutDuration: 2000,
fadeInDuration: 500
};
$(".slides").fader(options);
})();
</script>
</body>So if we look at the above HTML structure inline with the js, you can see the selector of “.slide” which tells the plugin which items to fade in/out. You can apply this to many different containers with different options, the below shows an example of this with different speeds. The html markup is as follows:
<div class="slides">
<div class="slide">
<h1>Slide 1</h1>
</div>
<div class="slide">
<h1>Slide 2</h1>
</div>
<div class="slide">
<h1>Slide 3</h1>
</div>
<div class="slide">
<h1>Slide 4</h1>
</div>
</div>
<div class="slides2">
<div class="slide">
<h1>Slide 1</h1>
</div>
<div class="slide">
<h1>Slide 2</h1>
</div>
<div class="slide">
<h1>Slide 3</h1>
</div>
<div class="slide">
<h1>Slide 4</h1>
</div>
</div>This time I create a second container of class “slides2” but keep the containing elements with class of “slide.” To start the plugin on both containers I add another instance of options and select the second container.
...
<script type="text/javascript">
(function() {
var options = {
slideClass: ".slide",
slideDuration: 6000,
fadeOutDuration: 2000,
fadeInDuration: 500
};
var options2 = {
slideClass: ".slide",
slideDuration: 2000,
fadeOutDuration: 500,
fadeInDuration: 500
};
$(".slides").fader(options);
$(".slides2").fader(options2);
})();
</script>
</body>The Plug-in Code
jQuery.fn.fader = function(options) {
if (!options.slideClass || options.slideClass == "") {
var error = new Error();
error.message = "No slide class has been supplied";
}
if (!options.slideDuration || !parseInt(options.slideDuration)) {
options.slideDuration = 4000;
}
if (!options.fadeOutDuration || !parseInt(options.fadeOutDuration)) {
options.fadeOutDuration = 4000;
}
if (!options.fadeInDuration || !parseInt(options.fadeInDuration)) {
options.fadeInDuration = 4000;
}
return this.each(function() {
$(options.slideClass, this).hide();
$(options.slideClass + ":eq(0)", this).show();
var currentIndex = 0;
var obj = this;
var t = setInterval(function() {
$(options.slideClass + ":eq(" + currentIndex + ")", obj).fadeOut(options.fadeOutDuration, function() {
currentIndex++;
if (currentIndex > $(options.slideClass, obj).size() - 1)
currentIndex = 0;
$(options.slideClass + ":eq(" + currentIndex + ")", obj).fadeIn(options.fadeInDuration);
});
}, options.slideDuration);
});
};