Skip to content

Instantly share code, notes, and snippets.

@tjrobinson
Created August 11, 2011 15:23
Show Gist options
  • Save tjrobinson/1139931 to your computer and use it in GitHub Desktop.
Save tjrobinson/1139931 to your computer and use it in GitHub Desktop.
jquery.bannerrotator
.bannerrotator a.linkbox {
background: #ddd;
opacity: .5;
filter: alpha(opacity=50);
}
.bannerrotator a.linkbox:hover {
background: white;
opacity: 1;
filter: alpha(opacity=100);
}
.bannerrotator a.selected {
background: #fff;
opacity: 1;
filter: alpha(opacity=100);
}
.bannerrotator a.linkbox:hover {
background: white;
}
/*!
* jQuery Banner Rotator Plugin
* Version: 0 (unreleased)
* Requires: jQuery v1.6.2 or later
* Author: Tom Robinson
*/
/*globals $, jQuery, window, event */
/*jslint browser: true */
(function ($) {
"use strict";
$.fn.bannerrotator = function (options) {
var currentIndex, timeoutId, settings, getRandomInt, setBanner, setInitialBanner;
// Default settings which will be merged into passed options
settings = {
"box": {
"height": 20,
"width": 20,
"padding": 10
},
"transition": {
"delay": 5000,
"fadespeed": "fast",
"easing": "swing"
}
};
getRandomInt = function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
setBanner = function (container, index) {
currentIndex = index;
container.find("a").first()
.fadeTo(settings.transition.fadespeed, 0, settings.transition.easing, function () {
// Set the main image (should be the first anchor)
container.find("a").first()
.attr("href", settings.images[index].href)
.find("img").first()
.attr("src", settings.images[index].src)
.attr("alt", settings.images[index].alt);
// Set the current link box state
container.find("a.linkbox").removeClass("selected");
var selectedLinkBox = $(container.find("a.linkbox")[index]);
selectedLinkBox.addClass("selected");
})
.fadeTo(settings.transition.fadespeed, 1, settings.transition.easing);
window.clearTimeout(timeoutId);
timeoutId = window.setTimeout(function () {
var newIndex;
if (currentIndex === undefined) {
newIndex = getRandomInt(0, settings.images.length - 1);
} else if (currentIndex === settings.images.length - 1) {
newIndex = 0;
} else {
newIndex = currentIndex + 1;
}
setBanner(container, newIndex);
}, settings.transition.delay);
};
setInitialBanner = function (container) {
var initialIndex = getRandomInt(0, settings.images.length - 1);
setBanner(container, initialIndex);
};
return this.each(function () {
var widthOfAllBoxes, top, container, imageCache;
// If options exist, lets merge them with our default settings
if (options) {
$.extend(settings, options);
}
imageCache = [];
// Set up the container structure
container = $(this);
container.empty().css("position", "relative").css("z-index", "3").append("<a><img></a>");
$(container.find("img")).css("height", settings.containerImage.height);
// Calculate link box layout
widthOfAllBoxes = settings.images.length * (settings.box.width + settings.box.padding) - settings.box.padding;
top = settings.containerImage.height - settings.containerImage.padding - settings.box.height;
// Add the link box structure, one for each of the configured images
$.each(settings.images, function (index, value) {
var cacheImage, left;
if (value !== undefined) {
cacheImage = document.createElement('img');
cacheImage.src = value.src;
imageCache.push(cacheImage);
left = settings.containerImage.width - widthOfAllBoxes - settings.containerImage.padding + ((settings.box.width + settings.box.padding) * index);
container.append("<a href='" + value.href + "' title='" + value.alt + "' class='linkbox' style='z-index:2;left:" + left.toString() + "px;border:1px solid #333;height:" + settings.box.height.toString() + "px;width:" + settings.box.width.toString() + "px;position:absolute;top:" + top.toString() + "px;'></a>");
// Add the click event handler for the link box we've just added
container.find("a").last().click(function () {
setBanner(container, index);
if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; }
window.event.cancelBubble = true;
return false;
});
}
});
setInitialBanner(container);
});
};
}(jQuery));
$(document).ready(function () {
$('.bannerrotator').bannerrotator({
"containerImage": {
"width": 960,
"height": 314,
"padding": 20
},
"images" [
{ "src": "example1.jpg", "href": "example1.html", "alt": "Example 1" },
{ "src": "example2.jpg", "href": "example2.html", "alt": "Example 2" },
{ "src": "example3.jpg", "href": "example3.html", "alt": "Example 3" },
{ "src": "example4.jpg", "href": "example4.html", "alt": "Example 4" }]
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment