/*
* 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);