(function ($) {
/* randomizeAndGroup
* This function takes the contents of the element calling it and, given a specific class, randomizes
* children of the element with that class. In the default case, the element that called it contains
* divs with class 'feature' that need to be randomized
*
* It will also group the children with the specific class in any number (default: 3) within a wrapping
* element (default: div with class of set
*
* Variables:
* childElem - string - the selector for the children that should be randomized
* group - true/false - whether the items need to be grouped
* perGroup - number - how many items per group
* setWrapper - string - the html element that will contain the groups if grouped
*/
$.fn.randomizeAndGroup = function (options) {
var defaults = {
childElem: 'div.feature',
randomize: true,
group: true,
perGroup: 3,
setWrapper: ''
}
var o = $.extend(defaults, options);
var childElem = o.childElem;
var group = o.group;
var perGroup = o.perGroup;
var setWrapper = o.setWrapper;
var randomize = o.randomize;
return this.each(function () {
var $this = $(this);
var elems = $this.children(childElem);
if (randomize) {
elems.sort(function () { return (Math.round(Math.random()) - 0.5); });
$this.remove(childElem);
for (var j = 0; j < elems.length; j++) {
$this.append((elems[j]));
};
}
if (group) {
elems = $this.children(childElem);
var numItems = elems.length;
var len = pos = 0;
elems.each(function (i, value) {
len += $(value).is(childElem) ? 1 : 0;
if (len > 0 && (len % perGroup === 0) || (i === elems.length - 1)) {
elems.slice(pos, i + 1).wrapAll(setWrapper);
len = 0;
pos = i + 1;
}
});
$(childElem).show();
}
});
}
/* exploreSlider
* This function takes the contents of the element calling it and, creates a sliding carousel element
* that slides content
*
* Variables:
* width - string - pixel number of how wide the slider should be
* height - string - pixel number of how tall the slider should be
* speed - number - milliseconds that it should take to slide from one set of content to the next
* easing - string - easing to be used. jquery inherently has two types. if want more, must import js
* inactiveOpacity - number - from 0-1, how opaque should a button that cannot be pushed be
* sliderClass - string - the classname for the slider itself, NOT the selector. Good: 'class'.
* Bad: '.class'
* slideItemClass- string - the classname for the full div/item that needs to be slid (each item to slide
* will have the same class applied to it). NOT the selector. Good: 'class'.
* Bad: '.class'
* leftBtnClass- string - the classname for the left/previous button. NOT the selector. Good: 'class'.
* Bad: '.class'
*
* rightBtnClass - string - the classname for the right/next button. NOT the selector. Good: 'class'.
* Bad: '.class'
*
* btnInactiveClass - string - the classname for the button when it is not active. NOT the selector.
* Good: 'class'. Bad: '.class'
*
*/
$.fn.exploreSlider = function (options) {
/*
* NOTE: For CSS and styling reasons, the slider control is nested three levels.
*
*
*/
var defaults = {
width: '689px',
height: '307px',
speed: 500,
easing: 'swing',
inactiveOpacity: 0.50,
sliderClass: 'explore-slider',
slideItemClass: 'set',
leftBtnClass: 'btn_prev',
rightBtnClass: 'btn_next',
btnInactiveClass: 'inactive'
}
var o = $.extend(defaults, options);
var w = parseInt(o.width);
var sliderClass = o.sliderClass;
var slideItemClass = o.slideItemClass;
var leftBtnClass = o.leftBtnClass;
var rightBtnClass = o.rightBtnClass;
var n = this.children('.' + sliderClass).children('.' + slideItemClass).length;
var x = -1 * n * w + w; // Minimum left value
var inuse = false; // Prevents colliding animations
var inactiveOpacity = o.inactiveOpacity;
var btnInactiveClass = o.btnInactiveClass;
function moveSlider(d, b) {
var l = parseInt($('.' + sliderClass).css('left'));
if (isNaN(l)) {
var l = 0;
}
var m = (d == 'left') ? l - w : l + w;
if (m <= 0 && m >= x) {
$('.' + sliderClass)
.animate({ 'left': m + 'px' }, o.speed, o.easing, function () {
inuse = false;
});
if (b.attr('class') == leftBtnClass) {
var thisBtn = $('.' + leftBtnClass);
var otherBtn = $('.' + rightBtnClass);
} else {
var thisBtn = $('.' + rightBtnClass);
var otherBtn = $('.' + leftBtnClass);
}
if (m == 0 || m == x) {
if(jQuery.support.opacity){
thisBtn.animate({ 'opacity': inactiveOpacity }, o.speed, o.easing, function () {
thisBtn.addClass(btnInactiveClass);
otherBtn.removeClass(btnInactiveClass);
});
}
else {
thisBtn.addClass(btnInactiveClass);
otherBtn.removeClass(btnInactiveClass);
}
}
if (otherBtn.hasClass(btnInactiveClass)) {
if(jQuery.support.opacity){
otherBtn.show().animate({ 'opacity': '1' }, { duration: o.speed, easing: o.easing });
}
else {
otherBtn.show();
}
otherBtn.removeClass(btnInactiveClass);
}
}else
{
inuse=false;
}
}
return this.each(function () {
$(this)
// Set the width and height of the div to the defined size
.css({
width: o.width,
height: o.height
})
.find('.' + slideItemClass)
.css({
width: o.width,
height: o.height
})
.end();
$('.' + leftBtnClass).addClass(btnInactiveClass);
// Store a copy of the button in a variable to pass to moveSlider()
var leftBtn = $('.' + leftBtnClass);
leftBtn.bind('click', function () {
if (inuse == false) {
inuse = true;
moveSlider('right', leftBtn);
}
return false; // Keep the link from firing
});
// Store a copy of the button in a variable to pass to moveSlider()
var rightBtn = $('.' + rightBtnClass);
rightBtn.bind('click', function () {
if (inuse == false) {
inuse = true;
moveSlider('left', rightBtn);
}
return false; // Keep the link from firing
});
});
}
})(jQuery)