/*
* file: jquery.flexisel.js
* version: 1.0.0
* description: responsive carousel jquery plugin
* author: 9bit studios
* copyright 2012, 9bit studios
* http://www.9bitstudios.com
* free to use and abuse under the mit license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function ($) {
$.fn.flexisel = function (options) {
var defaults = $.extend({
visibleitems: 4,
animationspeed: 200,
autoplay: false,
autoplayspeed: 3000,
pauseonhover: true,
setmaxwidthandheight: false,
enableresponsivebreakpoints: false,
responsivebreakpoints: {
portrait: {
changepoint:480,
visibleitems: 1
},
landscape: {
changepoint:640,
visibleitems: 2
},
tablet: {
changepoint:768,
visibleitems: 3
}
}
}, options);
/******************************
private variables
*******************************/
var object = $(this);
var settings = $.extend(defaults, options);
var itemswidth; // declare the global width of each item in carousel
var cannavigate = true;
var itemsvisible = settings.visibleitems;
/******************************
public methods
*******************************/
var methods = {
init: function() {
return this.each(function () {
methods.appendhtml();
methods.seteventhandlers();
methods.initializeitems();
});
},
/******************************
initialize items
*******************************/
initializeitems: function() {
var listparent = object.parent();
var innerheight = listparent.height();
var childset = object.children();
var innerwidth = listparent.width(); // set widths
itemswidth = (innerwidth)/itemsvisible;
childset.width(itemswidth);
childset.last().insertbefore(childset.first());
childset.last().insertbefore(childset.first());
object.css({'left' : -itemswidth});
object.fadein();
$(window).trigger("resize"); // needed to position arrows correctly
},
/******************************
append html
*******************************/
appendhtml: function() {
object.addclass("nbs-flexisel-ul");
object.wrap("
");
object.find("li").addclass("nbs-flexisel-item");
if(settings.setmaxwidthandheight) {
var basewidth = $(".nbs-flexisel-item > img").width();
var baseheight = $(".nbs-flexisel-item > img").height();
$(".nbs-flexisel-item > img").css("max-width", basewidth);
$(".nbs-flexisel-item > img").css("max-height", baseheight);
}
$("").insertafter(object);
var clonecontent = object.children().clone();
object.append(clonecontent);
},
/******************************
set event handlers
*******************************/
seteventhandlers: function() {
var listparent = object.parent();
var childset = object.children();
var leftarrow = listparent.find($(".nbs-flexisel-nav-left"));
var rightarrow = listparent.find($(".nbs-flexisel-nav-right"));
$(window).on("resize", function(event){
methods.setresponsiveevents();
var innerwidth = $(listparent).width();
var innerheight = $(listparent).height();
itemswidth = (innerwidth)/itemsvisible;
childset.width(itemswidth);
object.css({'left' : -itemswidth});
var halfarrowheight = (leftarrow.height())/2;
var arrowmargin = (innerheight/2) - halfarrowheight;
leftarrow.css("top", arrowmargin + "px");
rightarrow.css("top", arrowmargin + "px");
});
$(leftarrow).on("click", function (event) {
methods.scrollleft();
});
$(rightarrow).on("click", function (event) {
methods.scrollright();
});
if(settings.pauseonhover == true) {
$(".nbs-flexisel-item").on({
mouseenter: function () {
cannavigate = false;
},
mouseleave: function () {
cannavigate = true;
}
});
}
if(settings.autoplay == true) {
setinterval(function () {
if(cannavigate == true)
methods.scrollright();
}, settings.autoplayspeed);
}
},
/******************************
set responsive events
*******************************/
setresponsiveevents: function() {
var contentwidth = $('html').width();
if(settings.enableresponsivebreakpoints == true) {
if(contentwidth < settings.responsivebreakpoints.portrait.changepoint) {
itemsvisible = settings.responsivebreakpoints.portrait.visibleitems;
}
else if(contentwidth > settings.responsivebreakpoints.portrait.changepoint && contentwidth < settings.responsivebreakpoints.landscape.changepoint) {
itemsvisible = settings.responsivebreakpoints.landscape.visibleitems;
}
else if(contentwidth > settings.responsivebreakpoints.landscape.changepoint && contentwidth < settings.responsivebreakpoints.tablet.changepoint) {
itemsvisible = settings.responsivebreakpoints.tablet.visibleitems;
}
else {
itemsvisible = settings.visibleitems;
}
}
},
/******************************
scroll left
*******************************/
scrollleft:function() {
if(cannavigate == true) {
cannavigate = false;
var listparent = object.parent();
var innerwidth = listparent.width();
itemswidth = (innerwidth)/itemsvisible;
var childset = object.children();
object.animate({
'left' : "+=" + itemswidth
},
{
queue:false,
duration:settings.animationspeed,
easing: "linear",
complete: function() {
childset.last().insertbefore(childset.first()); // get the first list item and put it after the last list item (that's how the infinite effects is made)
methods.adjustscroll();
cannavigate = true;
}
}
);
}
},
/******************************
scroll right
*******************************/
scrollright:function() {
if(cannavigate == true) {
cannavigate = false;
var listparent = object.parent();
var innerwidth = listparent.width();
itemswidth = (innerwidth)/itemsvisible;
var childset = object.children();
object.animate({
'left' : "-=" + itemswidth
},
{
queue:false,
duration:settings.animationspeed,
easing: "linear",
complete: function() {
childset.first().insertafter(childset.last()); // get the first list item and put it after the last list item (that's how the infinite effects is made)
methods.adjustscroll();
cannavigate = true;
}
}
);
}
},
/******************************
adjust scroll
*******************************/
adjustscroll: function() {
var listparent = object.parent();
var childset = object.children();
var innerwidth = listparent.width();
itemswidth = (innerwidth)/itemsvisible;
childset.width(itemswidth);
object.css({'left' : -itemswidth});
}
};
if (methods[options]) { // $("#element").pluginname('methodname', 'arg1', 'arg2');
return methods[options].apply(this, array.prototype.slice.call(arguments, 1));
} else if (typeof options === 'object' || !options) { // $("#element").pluginname({ option: 1, option:2 });
return methods.init.apply(this);
} else {
$.error( 'method "' + method + '" does not exist in flexisel plugin!');
}
};
})(jquery);