', {css: {overflow: 'hidden'}}));
// (2) calculate individual widths of items and total width of all items together.
items.each(function(){
itemWidths.push($(this).outerWidth(true));
sliderWidth += itemWidths[itemWidths.length-1];
});
numberOfItems = itemWidths.length;
// (3) adjust width of items container.
itemsContainer.width(sliderWidth);
// create buttons, attach click event and append to slider-container
$('
').addClass('button').addClass(opt.nextClass).html(opt.nextHtml).click(function(){slide(-1);}).appendTo(slider);
$('
').addClass('button disabled').addClass(opt.prevClass).html(opt.prevHtml).click(function(){slide(1);}).appendTo(slider);
// call initialization callback
opt.onInit(slider);
//
// slide animation
//
function slide(direction){
if(calculateMargins(direction) == 0) return;
opt.onBeforeSlide(slider);
itemsContainer.animate({'margin-left': currentMargin}, {
duration: opt.duration,
easing: opt.easing,
complete: function(){
updateButtonState(slider.find('.button'));
opt.onAfterSlide(slider);
}
});
};
//
// calculate new margin (currentMargin) of items container. Returns delta.
//
function calculateMargins(direction){
var margin = 0;
if(direction < 0){
for(var i = startProduct, counter = 0; i < Math.min(startProduct + opt.step, numberOfItems - opt.step); i++, counter++){margin -= itemWidths[i];}
startProduct += counter;
} else {
for(var i = startProduct, counter = 0; i > Math.max(startProduct - opt.step, 0); i--, counter++){margin += itemWidths[i];}
startProduct -= counter;
}
currentMargin += margin;
return margin;
};
//
// update state of both buttons: set class='disabled' if button is not active
//
function updateButtonState(buttons){
buttons.each(function(){
var button = $(this).removeClass('disabled');
var disabled = button.hasClass(opt.nextClass) ? (startProduct + opt.step == numberOfItems) : (startProduct == 0);
if(disabled) button.addClass('disabled');
});
};
});
}
})(jQuery);
/*
* three-columns-toggler for service pages
*
* @author: Thomas Dürr (t.duerr@netrada.com)
* @dependencies: jquery v1.4.2
*
* @usage:
* $('selector').servicepage();
*/
;(function($){
$.fn.servicepage = function(){
return this.each(function(){
var servicepage = $(this);
// wrap all nodes between
-nodes with a ...
//
// example:
//
// a headline
// lorem ipsum a
//
lorem ipsum b
//
an other headline
//
lorem ipsum c
//
// becomes
//
//
a headline
//
//
lorem ipsum a
//
lorem ipsum b
//
//
an other headline
//
//
var start = -1, stop = 0, sections = $(servicepage.children().get().reverse());
sections.each(function(i){
if($.nodeName($(this)[0], 'h1')){
$(sections.slice(start+1, stop+1).get().reverse()).wrapAll('
');
start = i;
} else {
stop = i;
}
});
// delegate click events on headlines
servicepage.delegate('h1', 'click', function(){
var h1 = $(this);
// fade in selected section.
servicepage.find('.section').fadeOut('fast');
h1.next().fadeIn('normal');
// set 'selected' class for selected headline only
servicepage.find('h1').removeClass('selected');
h1.addClass('selected');
});
// highlight first headline by default
//
// if a fragment identifier is appended to the URL, highlight the given numbered headline (counting from zero)
//
// example:
// Page-Show?cid=delivery highlights the first headline
// Page-Show?cid=delivery#2 highlights the third headline
//
//
servicepage.find('h1:eq(' + (top.location.hash.substr(1) || '0') + ')').addClass('selected').next().show();
});
}
})(jQuery);
// append toggler on all service pages with three columns
$(function(){$('.service-pages .three-columns').servicepage();});
/*
* oldschool popup window
*
* @author: Thomas Duerr (t.duerr@netrada.com)
* @dependencies: jquery v1.4.2
*
* @usage:
*
* add attribute target="_popup" to anchor tags.
* set height and width with class attributes: class="height
width"
*
* example: link
*
* for all other configurations use $('a.selector').attachPopupWindow(options_object);
*/
;(function($){
$.fn.attachPopupWindow = function(options){
return this.each(function(){
$(this).click(function(ev){
$.fn.attachPopupWindow.defaults = {
centerBrowser: true, // center window over browser window? (overrides top and left)
centerScreen: false, // center window over entire screen? (overrides top and left)
height: 400, // height in pixels.
width: 500, // width in pixels.
top: 0, // top position.
left: 0, // left position.
name: 'win', // name of window set from the name attribute of the element that invokes the click
url: null, // url
onBeforeOpen: function(){}, // before open callback
onAfterOpen: function(){}, // after open callback
onAfterClose: function(){}, // after close callback
stop: true
};
opts = $.extend({}, $.fn.attachPopupWindow.defaults, options || {});
opts.stop && ev.preventDefault();
opts.name = opts.name || this.name;
opts.url = opts.url || this.href;
var w = this.className.match(/width(\d+)/);
opts.width = w ? w[1] : opts.width;
var h = this.className.match(/height(\d+)/);
opts.height = h ? h[1] : opts.height;
var y,x;
var win = 'height=' + opts.height + ',width=' + opts.width + ',toolbar=no,scrollbars=yes,status=no,resizable=yes,location=no,menuBar=no';
// call onBeforeOpen callback
opts.onBeforeOpen(opts);
// calculate top/left coordinates
if(opts.centerBrowser){
if ($.browser.msie){ // for IE browsers
y = (window.screenTop - 120) + ((((document.documentElement.clientHeight + 120)/2) - (opts.height/2)));
x = window.screenLeft + ((((document.body.offsetWidth + 20)/2) - (opts.width/2)));
} else {
y = window.screenY + (((window.outerHeight/2) - (opts.height/2)));
x = window.screenX + (((window.outerWidth/2) - (opts.width/2)));
}
} else if(opts.centerScreen){
y = (screen.height - opts.height)/2;
x = (screen.width - opts.width)/2;
} else {
y = opts.top;
x = opts.left;
}
// open popup and focus
var popup = window.open(opts.url, opts.name, win + ',left=' + x + ',top=' + y);
popup.focus();
// call onAfterOpen callback
opts.onAfterOpen();
// call onAfterClose callback by observing popup for closed-state every 200 millisec
var closeObserver = setInterval(function(){
if (popup.closed){
clearTimeout(closeObserver);
opts.onAfterClose();
}
}, 200);
});
});
};
// by default, attach popup window opener to links with target="_popup" attribute
$(function(){$('a[target="_popup"]').attachPopupWindow();});
})(jQuery);
/*
* Dialog for Content-Assets (wrapper of jQUery-UI dialog-component)
*
* This dialog allows us to specify only a fragment of the remote document to be inserted.
*
*
* Usage:
*
* 1. add attribute target="_dialog" to anchor tags.
*
* example: link
*
*
* 2. within content-asset body: wrap content fragment to be displayed within dialog with an class-attribute "dialog-content"
*
* example:
*
*
* 3. for a (optional) fixed headline on top of scrollable content, set class-attribute "dialog-headline"
*
* example: headline
*
*
* 4. you may open a dialog with an url as parameter from within the global context:
*
* example: $.fn.contentDialog.open("http://domain.com/page.html")
*
*
* 5. for all other configurations use for example:
*
* $('a.selector').contentDialog({
* width: 800,
* height: 550,
* closeText: 'schliessen',
* url: 'http://www.example.com'
* });
*
*
*
* @author: Thomas Duerr (t.duerr@netrada.com)
* @dependencies: jquery v1.4.2
*
*/
;(function($){
$.fn.contentDialog = function(options){
var dialog = [];
// default options
$.fn.contentDialog.defaults = {
width: 600, // width of lightbox
height: 400, // height of lightbox
closeText: 'close', // text of close button
contentSelector: '.dialog-content', // selector for content fragment
headlineSelector: '.dialog-headline', // selector for headline fragment
url: null // URL of content-asset
};
// open dialog
$.fn.contentDialog.openDialog = function(ev){
ev && ev.preventDefault();
var url = $.fn.contentDialog.defaults.url,
_dialog = $('#contentDialog');
opts = $.extend({}, $.fn.contentDialog.defaults, options || {});
opts.url = opts.url || this.href;
opts.closeText = app.resources["CLOSE"] || opts.closeText;
// create and open a jQuery-UI dialog
_dialog.dialog({
modal: true,
bgiframe: true,
autoOpen: false,
height: opts.height,
width: opts.width,
title: opts.closeText,
dialogClass: 'content-dialog'
}).dialog('open');
// URL with fragment selector
var url = opts.contentSelector ? opts.url + ' ' + opts.contentSelector : opts.url;
// load a specified fragment of the remote content-asset HTML into dialog
$('.dialog-headline').remove();
_dialog.html('
').find('div').load(url, function(response){
_dialog.before($(response).find(opts.headlineSelector));
});
};
// open dialog from global scope.
// This is for example useful for opening a dialog from within a flash component.
$.fn.contentDialog.open = function(url){
if($('#contentDialog').length == 0){$('body').append('
');}
$.fn.contentDialog.defaults.url = url;
$.fn.contentDialog.openDialog();
}
// do nothing if no element selected
if($(this).size() == 0) return;
// initially append a single #contentDialog container to DOM
if($('#contentDialog').length == 0){
$('body').append('
');
}
// attache click event on all selected elements
return this.each(function(i){
$(this).bind('click.dialog', $.fn.contentDialog.openDialog);
});
};
})(jQuery);
// by default, display content in a dialog for anchors with a target="_dialog" attribute
$(function(){$('a[target="_dialog"]').contentDialog();});
/*
* fix iframe height plugin
*
* set height of parent iframe equal to height of the containing document.
*
* FIXME: this works for pages with ONE iframe only!
*
* @author: t.duerr@netrada.com
* @dependencies: jquery v1.4.2
*
*/
;(function($){
$.fn.fixIframeHeight = function(options){
// do nothing if no element selected
if($(this).size() == 0) return;
return this.each(function(){
var iframe = top.$('iframe.fix-height'),
contentHeight = $('body').height();
iframe.height(contentHeight);
});
};
})(jQuery);
// by default, set height of parent iframe to height of containing document, if the parent iframe has an class-attribute "fix-height"
$(function(){
if(window != top.window && top.$('iframe.fix-height').size() > 0){ // I'm within an iframe and my iframe has a class="fix-height"!
$(document).fixIframeHeight();
}
});
/*
* edit Window
* a custom dialog as UI Dialog replacement for 'password reset', 'password change' and 'email change'
*
* @author: Andreas Bernsdorf (a.bernsdorf@netrada.com)
* @dependencies: jquery v1.4.2
*
* @usage:
* $('selector').servicepage( [boxWidth], [boxHeight], url );
*/
;(function($){
$.fn.editWindow = function(options) {
var defaults = {boxWidth:320,boxHeight:120};
var options = $.extend(defaults, options);
var window = "";
return this.each(function() {
// concatenate string for editwindow html
window += "";
window += "
";
window += "
";
window += "
";
window += "
");
jQuery("body .editwindow-overlay").show();
jQuery("body").find("span.edit").css("cursor","default");
// append editwindow to the container element of the clicked element
jQuery(this).parent().append(window);
// set position relative to parent element to allow absolute positioning for editwindow
jQuery(this).parent().css('position','relative');
// handle click on close event
jQuery(this).parent().find(".close").click(function(){
jQuery(".editwindow").remove();
jQuery("body .editwindow-overlay").hide();
jQuery("span.edit").parent().css('position','static');
jQuery("body").find("span.edit").css("cursor","pointer");
});
// load form via ajax in container within editwindow, then hide loading image and display requested content
jQuery.ajax({
type: "POST",
url: defaults.url,
success: function(data){
jQuery('#loader').hide();
jQuery('#formcontainer').append(data);
}
});
});
}
})(jQuery);
/**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
/**
* Create a cookie with the given name and value and other optional parameters.
*
* @example $.cookie('the_cookie', 'the_value');
* @desc Set the value of a cookie.
* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
* @desc Create a cookie with all available options.
* @example $.cookie('the_cookie', 'the_value');
* @desc Create a session cookie.
* @example $.cookie('the_cookie', null);
* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
* used when the cookie was set.
*
* @param String name The name of the cookie.
* @param String value The value of the cookie.
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
* If set to null or omitted, the cookie will be a session cookie and will not be retained
* when the the browser exits.
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
* require a secure protocol (like HTTPS).
* @type undefined
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
/**
* Get the value of a cookie with the given name.
*
* @example $.cookie('the_cookie');
* @desc Get the value of a cookie.
*
* @param String name The name of the cookie.
* @return The value of the cookie.
* @type String
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
/*
* TextLimit - jQuery plugin for counting and limiting characters for input and textarea fields
*
* pass '-1' as speed if you don't want the char-deletion effect. (don't just put 0)
* Example: jQuery("Textarea").textlimit('span.counter',256)
*
* $Version: 2009.07.25 +r2
* Copyright (c) 2009 Yair Even-Or
* vsync.design@gmail.com
*/
(function(jQuery) {
jQuery.fn.textlimit=function(counter_el, thelimit, speed) {
var charDelSpeed = speed || 15;
var toggleCharDel = speed != -1;
var toggleTrim = true;
var that = this[0];
var isCtrl = false;
updateCounter();
function updateCounter(){
if(typeof that == "object")
jQuery(counter_el).text(thelimit - that.value.length+" characters remaining");
};
this.keydown (function(e){
if(e.which == 17) isCtrl = true;
var ctrl_a = (e.which == 65 && isCtrl == true) ? true : false; // detect and allow CTRL + A selects all.
var ctrl_v = (e.which == 86 && isCtrl == true) ? true : false; // detect and allow CTRL + V paste.
// 8 is 'backspace' and 46 is 'delete'
if( this.value.length >= thelimit && e.which != '8' && e.which != '46' && ctrl_a == false && ctrl_v == false)
e.preventDefault();
})
.keyup (function(e){
updateCounter();
if(e.which == 17)
isCtrl=false;
if( this.value.length >= thelimit && toggleTrim ){
if(toggleCharDel){
// first, trim the text a bit so the char trimming won't take forever
// Also check if there are more than 10 extra chars, then trim. just in case.
if ( (this.value.length - thelimit) > 10 )
that.value = that.value.substr(0,thelimit+100);
var init = setInterval
(
function(){
if( that.value.length <= thelimit ){
init = clearInterval(init); updateCounter()
}
else{
// deleting extra chars (one by one)
that.value = that.value.substring(0,that.value.length-1); jQuery(counter_el).text('Trimming... '+(thelimit - that.value.length));
}
} ,charDelSpeed
);
}
else this.value = that.value.substr(0,thelimit);
}
});
};
})(jQuery);
/* =========================================================
//jquery.innerfade.js
//Datum: 2008-02-14
//Firma: Medienfreunde Hofmann & Baldes GbR
//Author: Torsten Baldes
//Mail: t.baldes@medienfreunde.com
//Web: http://medienfreunde.com
//based on the work of Matt Oakes http://portfolio.gizone.co.uk/applications/slideshow/
//and Ralf S. Engelschall http://trainofthoughts.org/
*
*
* content 1
* content 2
* content 3
*
*
* $('#news').innerfade({
* animationtype: Type of animation 'fade' or 'slide' (Default: 'fade'),
* speed: Fading-/Sliding-Speed in milliseconds or keywords (slow, normal or fast) (Default: 'normal'),
* timeout: Time between the fades in milliseconds (Default: '2000'),
* type: Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'),
* containerheight: Height of the containing element in any css-height-value (Default: 'auto'),
* runningclass: CSS-Class which the container get’s applied (Default: 'innerfade'),
* children: optional children selector (Default: null)
* });
*
//========================================================= */
(function($) {
$.fn.innerfade = function(options) {
return this.each(function() {
$.innerfade(this, options);
});
};
$.innerfade = function(container, options) {
var settings = {
'animationtype': 'fade',
'speed': 'normal',
'type': 'sequence',
'timeout': 2000,
'containerheight': 'auto',
'runningclass': 'innerfade',
'children': null
};
if (options)
$.extend(settings, options);
if (settings.children === null)
var elements = $(container).children();
else
var elements = $(container).children(settings.children);
if (elements.length > 1) {
$(container).css('position', 'relative').css('height', settings.containerheight).addClass(settings.runningclass);
for (var i = 0; i < elements.length; i++) {
$(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
};
if (settings.type == "sequence") {
setTimeout(function() {
$.innerfade.next(elements, settings, 1, 0);
}, settings.timeout);
$(elements[0]).show();
} else if (settings.type == "random") {
var last = Math.floor ( Math.random () * ( elements.length ) );
setTimeout(function() {
do {
current = Math.floor ( Math.random ( ) * ( elements.length ) );
} while (last == current );
$.innerfade.next(elements, settings, current, last);
}, settings.timeout);
$(elements[last]).show();
} else if ( settings.type == 'random_start' ) {
settings.type = 'sequence';
var current = Math.floor ( Math.random () * ( elements.length ) );
setTimeout(function(){
$.innerfade.next(elements, settings, (current + 1) % elements.length, current);
}, settings.timeout);
$(elements[current]).show();
} else {
alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
}
}
};
$.innerfade.next = function(elements, settings, current, last) {
if (settings.animationtype == 'slide') {
$(elements[last]).slideUp(settings.speed);
$(elements[current]).slideDown(settings.speed);
} else if (settings.animationtype == 'fade') {
$(elements[last]).fadeOut(settings.speed);
$(elements[current]).fadeIn(settings.speed, function() {
removeFilter($(this)[0]);
});
} else
alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');
if (settings.type == "sequence") {
if ((current + 1) < elements.length) {
current = current + 1;
last = current - 1;
} else {
current = 0;
last = elements.length - 1;
}
} else if (settings.type == "random") {
last = current;
while (current == last)
current = Math.floor(Math.random() * elements.length);
} else
alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
setTimeout((function() {
$.innerfade.next(elements, settings, current, last);
}), settings.timeout);
};
})(jQuery);
//**** remove Opacity-Filter in ie ****
function removeFilter(element) {
if(element.style.removeAttribute){
element.style.removeAttribute('filter');
}
}
/**
* jCarouselLite - jQuery plugin to navigate images/any content in a carousel style widget.
* @requires jQuery v1.2 or above
*
* http://gmarwaha.com/jquery/jcarousellite/
*
* Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Version: 1.0.1
* Note: Requires jquery 1.2 or above from version 1.0.1
*/
/**
* Creates a carousel-style navigation widget for images/any-content from a simple HTML markup.
*
* The HTML markup that is used to build the carousel can be as simple as...
*
*
*
* As you can see, this snippet is nothing but a simple div containing an unordered list of images.
* You don't need any special "class" attribute, or a special "css" file for this plugin.
* I am using a class attribute just for the sake of explanation here.
*
* To navigate the elements of the carousel, you need some kind of navigation buttons.
* For example, you will need a "previous" button to go backward, and a "next" button to go forward.
* This need not be part of the carousel "div" itself. It can be any element in your page.
* Lets assume that the following elements in your document can be used as next, and prev buttons...
*
* <<
* >>
*
* Now, all you need to do is call the carousel component on the div element that represents it, and pass in the
* navigation buttons as options.
*
* $(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev"
* });
*
* That's it, you would have now converted your raw div, into a magnificient carousel.
*
* There are quite a few other options that you can use to customize it though.
* Each will be explained with an example below.
*
* @param an options object - You can specify all the options shown below as an options object param.
*
* @option btnPrev, btnNext : string - no defaults
* @example
* $(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev"
* });
* @desc Creates a basic carousel. Clicking "btnPrev" navigates backwards and "btnNext" navigates forward.
*
* @option btnGo - array - no defaults
* @example
* $(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* btnGo: [".0", ".1", ".2"]
* });
* @desc If you don't want next and previous buttons for navigation, instead you prefer custom navigation based on
* the item number within the carousel, you can use this option. Just supply an array of selectors for each element
* in the carousel. The index of the array represents the index of the element. What i mean is, if the
* first element in the array is ".0", it means that when the element represented by ".0" is clicked, the carousel
* will slide to the first element and so on and so forth. This feature is very powerful. For example, i made a tabbed
* interface out of it by making my navigation elements styled like tabs in css. As the carousel is capable of holding
* any content, not just images, you can have a very simple tabbed navigation in minutes without using any other plugin.
* The best part is that, the tab will "slide" based on the provided effect. :-)
*
* @option mouseWheel : boolean - default is false
* @example
* $(".carousel").jCarouselLite({
* mouseWheel: true
* });
* @desc The carousel can also be navigated using the mouse wheel interface of a scroll mouse instead of using buttons.
* To get this feature working, you have to do 2 things. First, you have to include the mouse-wheel plugin from brandon.
* Second, you will have to set the option "mouseWheel" to true. That's it, now you will be able to navigate your carousel
* using the mouse wheel. Using buttons and mouseWheel or not mutually exclusive. You can still have buttons for navigation
* as well. They complement each other. To use both together, just supply the options required for both as shown below.
* @example
* $(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* mouseWheel: true
* });
*
* @option auto : number - default is null, meaning autoscroll is disabled by default
* @example
* $(".carousel").jCarouselLite({
* auto: 800,
* speed: 500
* });
* @desc You can make your carousel auto-navigate itself by specfying a millisecond value in this option.
* The value you specify is the amount of time between 2 slides. The default is null, and that disables auto scrolling.
* Specify this value and magically your carousel will start auto scrolling.
*
* @option speed : number - 200 is default
* @example
* $(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* speed: 800
* });
* @desc Specifying a speed will slow-down or speed-up the sliding speed of your carousel. Try it out with
* different speeds like 800, 600, 1500 etc. Providing 0, will remove the slide effect.
*
* @option easing : string - no easing effects by default.
* @example
* $(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* easing: "bounceout"
* });
* @desc You can specify any easing effect. Note: You need easing plugin for that. Once specified,
* the carousel will slide based on the provided easing effect.
*
* @option vertical : boolean - default is false
* @example
* $(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* vertical: true
* });
* @desc Determines the direction of the carousel. true, means the carousel will display vertically. The next and
* prev buttons will slide the items vertically as well. The default is false, which means that the carousel will
* display horizontally. The next and prev items will slide the items from left-right in this case.
*
* @option circular : boolean - default is true
* @example
* $(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* circular: false
* });
* @desc Setting it to true enables circular navigation. This means, if you click "next" after you reach the last
* element, you will automatically slide to the first element and vice versa. If you set circular to false, then
* if you click on the "next" button after you reach the last element, you will stay in the last element itself
* and similarly for "previous" button and first element.
*
* @option visible : number - default is 3
* @example
* $(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* visible: 4
* });
* @desc This specifies the number of items visible at all times within the carousel. The default is 3.
* You are even free to experiment with real numbers. Eg: "3.5" will have 3 items fully visible and the
* last item half visible. This gives you the effect of showing the user that there are more images to the right.
*
* @option start : number - default is 0
* @example
* $(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* start: 2
* });
* @desc You can specify from which item the carousel should start. Remember, the first item in the carousel
* has a start of 0, and so on.
*
* @option scrool : number - default is 1
* @example
* $(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* scroll: 2
* });
* @desc The number of items that should scroll/slide when you click the next/prev navigation buttons. By
* default, only one item is scrolled, but you may set it to any number. Eg: setting it to "2" will scroll
* 2 items when you click the next or previous buttons.
*
* @option beforeStart, afterEnd : function - callbacks
* @example
* $(".carousel").jCarouselLite({
* btnNext: ".next",
* btnPrev: ".prev",
* beforeStart: function(a) {
* alert("Before animation starts:" + a);
* },
* afterEnd: function(a) {
* alert("After animation ends:" + a);
* }
* });
* @desc If you wanted to do some logic in your page before the slide starts and after the slide ends, you can
* register these 2 callbacks. The functions will be passed an argument that represents an array of elements that
* are visible at the time of callback.
*
*
* @cat Plugins/Image Gallery
* @author Ganeshji Marwaha/ganeshread@gmail.com
*/
(function($) { // Compliant with jquery.noConflict()
$.fn.jCarouselLite = function(o) {
o = $.extend({
btnPrev: null,
btnNext: null,
btnGo: null,
mouseWheel: false,
auto: null,
speed: 200,
easing: null,
vertical: false,
circular: true,
visible: 3,
start: 0,
scroll: 1,
beforeStart: null,
afterEnd: null
}, o || {});
return this.each(function() { // Returns the element collection. Chainable.
var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";
var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;
if(o.circular) {
ul.prepend(tLi.slice(tl-v-1+1).clone())
.append(tLi.slice(0,v).clone());
o.start += v;
}
var li = $("li", ul), itemLength = li.size(), curr = o.start;
div.css("visibility", "visible");
li.css("float", "left");
ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});
var liSize = o.vertical ? height(li) : width(li); // Full li size(incl margin)-Used for animation
var ulSize = liSize * itemLength; // size of full ul(total length, not just for the visible items)
var divSize = liSize * v; // size of entire div(total length for just the visible items)
li.css({width: li.width(), height: li.height()});
ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));
div.css(sizeCss, divSize+"px"); // Width of the DIV. length of visible images
if(o.btnPrev)
$(o.btnPrev).click(function() {
return go(curr-o.scroll);
});
if(o.btnNext)
$(o.btnNext).click(function() {
return go(curr+o.scroll);
});
if(o.btnGo)
$.each(o.btnGo, function(i, val) {
$(val).click(function() {
return go(o.circular ? o.visible+i : i);
});
});
if(o.mouseWheel && div.mousewheel)
div.mousewheel(function(e, d) {
return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
});
if(o.auto)
setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
function vis() {
return li.slice(curr).slice(0,v);
};
function go(to) {
if(!running) {
if(o.beforeStart)
o.beforeStart.call(this, vis());
if(o.circular) { // If circular we are in first or last, then goto the other end
if(to<=o.start-v-1) { // If first, then goto last
ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
} else if(to>=itemLength-v+1) { // If last, then goto first
ul.css(animCss, -( (v) * liSize ) + "px" );
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
} else curr = to;
} else { // If non-circular and to points to first or last, we just return.
if(to<0 || to>itemLength-v) return;
else curr = to;
} // If neither overrides it, the curr will still be "to" and we can proceed.
running = true;
ul.animate(
animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
function() {
if(o.afterEnd)
o.afterEnd.call(this, vis());
running = false;
}
);
// Disable buttons when the carousel reaches the last/first, and enable when not
if(!o.circular) {
$(o.btnPrev + "," + o.btnNext).removeClass("disabled");
$( (curr-o.scroll<0 && o.btnPrev)
||
(curr+o.scroll > itemLength-v && o.btnNext)
||
[]
).addClass("disabled");
}
}
return false;
};
});
};
function css(el, prop) {
return parseInt($.css(el[0], prop)) || 0;
};
function width(el) {
return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
};
function height(el) {
return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
};
})(jQuery);