/**
* 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
@Author Jennifer Suarez JSuarez@navisite.com, ladybug_3777@yahoo.com
All of these variables are optional. However if you use bckOne, it makes sense to use fwdOne as well. Same goes for jumpFirst and jumpLast. (Not required, but recommended)
bckOne: null, // pass the class or id of the button/image/link being used to move back one image at a time
fwdOne: null, // pass class or id of the button/image/link being used to move forward one image at a time
jumpFirst: null, // pass class or id of the button/image/link being used to move to the BEGINNING of the list
jumpLast: null, // pass class or id of the button/image/link being used to move to the END of the list
To hide and show @bckOne, @fwdOne, @jumpFirst, and @jumpLast when reaching the end,
simply add the styles .show and .hide to your style sheet
Example:
.hide{
visibility:hidden;
}
.show {
visibility:visible;
}
indexOfTotal: null, // pass class or id of the section that will show what li out of total li you are on.
Example: 1 of 20
bigImage: null, // pass the class or id of a large image on the page that you want to match with the selected li in the carousel. IMPORTNT: This switch assumes there is an image thumbnail! It uses the src of the image thumbnail (as well as the alt and title attributes) to switch the src, title, and alt of the large image.
caption: null, // pass the class or id of a small caption section on the page that you want to match with the description of the selected li in the carousel.
photoDesc: null // pass the class or id of the large description section on the page that you want to match with the
description of the selected li in the carousel.
jsonData: null //Pass in true or false indicationg information for caption and photoDesc is stored in a json structure called window.galleryTemplateData
slideShow: null, // pass the class or id of the pause/play button that will be used to control the slide show.
slideShowSpeed: 2000, // speed of the slideshow in milliseconds. default is 2000 milliseconds
autoStartShow: true // true starts slideshow on start. False requires user to press play
*/
(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,
bckOne: null, //JSuarez
fwdOne: null, //JSuarez
jumpFirst: null, //JSuarez
jumpLast: null, //JSuarez
indexOfTotal: null, //JSuarez
bigImage: null, //JSuarez
caption: null, //JSuarez
photoDesc: null, //JSuarez
jsonData: null, //JSuarez
slideShow: null, //JSuarez
slideShowSpeed: 2000, //JSuarez
autoStartShow: true,
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, currImg = o.start, currSlidePosition = o.start, slideShowInt = null;
div.css("visibility", "visible");
li.css({overflow: "hidden", float: o.vertical ? "none" : "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
//JSuarez set the highlight on the first selected li
setSelectedLiViewer(currSlidePosition);
//My month array used to format dates in the caption section
var month=new Array(12);
month[0]="Jan";
month[1]="Feb";
month[2]="Mar";
month[3]="Apr";
month[4]="May";
month[5]="Jun";
month[6]="Jul";
month[7]="Aug";
month[8]="Sep";
month[9]="Oct";
month[10]="Nov";
month[11]="Dec";
//JSuarez
if(!o.circular) {
enableDisableButtons();
enableDisableNextBack();
enableDisableJumpFirstLast();
}
if(o.btnPrev)
$(o.btnPrev).click(function() {
//JSuarez if slideshow being used pause when scrolling
if(o.slideShow) { pauseSlideShow();}
return go(curr-o.scroll);
});
if(o.btnNext)
$(o.btnNext).click(function() {
//JSuarez if slideshow pause when scrolling
if(o.slideShow) { pauseSlideShow();}
return go(curr+o.scroll);
});
/*
JSuarez
if a big image and caption and photoDesc and jsondata selectors were passed in, then we want to change the large photo
and it's caption depending on the li that was clicked.
*/
//if(o.bigImage && o.caption && o.photoDesc && o.jsonData) {
$(li).click(function() {
//set the currImg variable to match the li that was clicked
currImg = li.index(this);
afterMoveChanges(currImg);
if(o.slideShow) {pauseSlideShow()}
return false;
});
//}
/*
JSuarez
If there's a list of page numbers to click
*/
if(o.PageNumber)
$(o.PageNumber).click(function() {
//JSuarez if slideshow pause when scrolling
var pageJumpAmt = parseInt(this.id.replace("imageJump_", ""));
if(o.slideShow) { pauseSlideShow();}
currImg = pageJumpAmt;
//scroll to the correct spot
go(currImg);
//switch caption, large image, disable enable buttons (as applicable)
afterMoveChanges(currImg);
return false;
});
/*
JSuarez
If there's a button to jump to the last li
*/
if(o.jumpLast) {
$(o.jumpLast).click(function() {
jumpToLast();
if(o.slideShow) {pauseSlideShow()}
return false;
});
}
/*
JSuarez
If there's a button to jump to the first li
*/
if(o.jumpFirst) {
$(o.jumpFirst).click(function() {
jumpToFirst();
if(o.slideShow) {pauseSlideShow()}
return false;
});
}
/*
JSuarez
if there's a forwardByOne option, meaning there are links (or could be buttons) that allow the user
to flip through the pictures one at at time from the position of the bigImage. (seperate from the main buttons that scroll based on the number passed to o.scroll. These buttons will ALWAYS scroll one at a time)
*/
if(o.fwdOne) {
$(o.fwdOne).click(function() {
forwardByOne();
if(o.slideShow) {pauseSlideShow()}
return false;
});
}
/*
JSuarez
if there's a backByOne option
*/
if(o.bckOne) {
$(o.bckOne).click(function() {
backByOne();
if(o.slideShow) {pauseSlideShow()}
return false;
});
}
/*
Jsuarez
If we have a Page of Total Pages section, then it should be updated
*/
if(o.indexOfTotal) {
setCurrentIndexOfTotal();
}
/*
JSuarez
If slide show is enabled, flip through one by one
*/
if(o.slideShow) {
if(o.autoStartShow) { startSlideShow(); }
else { pauseSlideShow();}
$(o.slideShow).click(function()
{
if (ifPaused()) { startSlideShow();}
else { pauseSlideShow();}
return false;
});
}
//Check to see if the Animation has been paused or not
function ifPaused() {
if ($(o.slideShow).hasClass("paused")) { return true;}
else{ return false;}
};
function pauseSlideShow() {
if (!ifPaused()) $(o.slideShow).addClass("paused");
clearInterval(slideShowInt);
}
function startSlideShow() {
/*
if not circular and we are at the end of the images, jump back to first before restarting slide show
*/
if(!o.circular && currImg == itemLength - 1) { jumpToFirst();}
//if paused, remove class, and set interval to get things going
if(ifPaused()) {$(o.slideShow).removeClass("paused"); }
slideShowInt = setInterval(function() {
forwardByOne();
}, o.slideShowSpeed);
return false;
}
function forwardByOne() {
if (currImg < itemLength-1){
currImg++;
if(currImg >= curr + v) { go(curr+o.scroll); }
//switch caption, large image, disable enable buttons (as applicable)
afterMoveChanges(currImg);
}
}
function backByOne() {
if (currImg >= 1){
currImg--;
//alert(curr + v);
if(currImg < curr) { go(curr-o.scroll); }
//switch caption, large image, disable enable buttons (as applicable)
afterMoveChanges(currImg);
}
}
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) {
curr = 0;
} else if (to>itemLength-v) {
curr = Math.max(0, itemLength-v);
} 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) {
enableDisableButtons();
}
}
return false;
};
//JSuarez
function enableDisableButtons() {
if(curr == 0 && o.btnPrev) {
$(o.btnPrev).removeClass("enabledPrev").addClass("disabledPrev");
}
else {
$(o.btnPrev).removeClass("disabledPrev").addClass("enabledPrev");
}
if(curr >= itemLength-v && o.btnNext) {
$(o.btnNext).removeClass("enabledNext").addClass("disabledNext");
}
else {
$(o.btnNext).removeClass("disabledNext").addClass("enabledNext");
}
};
//JSuarez
function enableDisableNextBack() {
if(currImg == 0 && o.bckOne) {
$(o.bckOne).removeClass("show").addClass("hide");
}
else {
$(o.bckOne).removeClass("hide").addClass("show");
}
if(currImg == itemLength-1 && o.fwdOne) {
$(o.fwdOne).removeClass("show").addClass("hide");
}
else {
$(o.fwdOne).removeClass("hide").addClass("show");
}
};
//JSuarez
function enableDisableJumpFirstLast() {
if(currImg == 0 && o.jumpFirst) {
$(o.jumpFirst).removeClass("show").addClass("hide");
}
else {
$(o.jumpFirst).removeClass("hide").addClass("show");
}
if(currImg == itemLength-1 && o.jumpLast) {
$(o.jumpLast).removeClass("show").addClass("hide");
}
else {
$(o.jumpLast).removeClass("hide").addClass("show");
}
};
//JSuarez
function setSelectedLiViewer(newSlidePosition) {
/*remove the class that highlights the old slide/thumbnail
currSlidePosition is init at the top and is set to o.start
If a thumbnail is clicked, or the back, forward buttons are clicked
then the currSlidePosition becomes updated
*/
$(li[currSlidePosition]).removeClass("selectedSlidePosition");
//add the class to the new slide/thumbnail
$(li[newSlidePosition]).addClass("selectedSlidePosition");
//set the current slide position to match the new selected slide/thumbnail
currSlidePosition = newSlidePosition;
};
function setCurrentIndexOfTotal() {
/*currImg is the index of the selected slide. Because li's start at 0
we want to add one to it so the number that displays makes sense.
Note this does NOT actually add 1 to the global var currImg, just
for local output.
*/
if(o.indexOfTotal){ $(o.indexOfTotal).html((currImg+1) + " of " + itemLength);}
return false;
};
function trimString(stringToTrim) {
return stringToTrim.replace(/^\s+|\s+$/g,"");
}
function afterMoveChanges(newPositionOfSlide) {
//reset the selectedLiViewer to the new position
setSelectedLiViewer(newPositionOfSlide);
//set the text to read x of x
if(o.indexOfTotal) setCurrentIndexOfTotal();
//switch the big Image src, title, and alt tags
if(o.jsonData) {
/*
1/18/2010
this variable is now created in tier3.cfm MAJOR issues trying to create it within the plugin itself
It normally would be passed in through .jsonData but it just won't work without overflow issues
*/
if(o.pluginNumber) {
var preDataString = 'window.galleryTemplateData_' + o.pluginNumber;
//var data = preDataString;
var data = eval(preDataString).data[newPositionOfSlide];
}
else {
var data = window.galleryTemplateData.data[newPositionOfSlide];
}
}
if(o.bigImage){
//$(o.bigImage).attr("src", $(li[newPositionOfSlide]).attr("alt"));
$(o.bigImage).attr("src", $(li[newPositionOfSlide]).find('img').attr('src'));
$(o.bigImage).attr("title", $(li[newPositionOfSlide]).find('img').attr('title'));
$(o.bigImage).attr("alt", $(li[newPositionOfSlide]).find('img').attr('alt'));
}
//switch the caption
if(o.caption) {
//$(o.caption).html($(li[newPositionOfSlide]).attr("alt"));
//JSuarez added to help with special character issues
//Specific to navisites data passed in
//alert(data.source);
var captionString = data.source;
//if(data.image_date != "")captionString += " / " + data.image_date.replace(/(.).+/, "$1").toUpperCase() + data.image_date.replace(/./, "").toLowerCase();
//if(data.image_date_text != "")captionString += " / " + data.image_date_text;
if(data.image_date_text != "" && data.image_date != "") {
if(!isNaN(data.image_date_text)) {
//this is a numeric year. OK to output as is
captionString += " / " + data.image_date_text;
} else if(data.image_date_text.length == 10) {
//this date is already stored properly (04/20/2010) in the data.image_date field so use that field instead
captionString += " / " + data.image_date.replace(/(.).+/, "$1").toUpperCase() + data.image_date.replace(/./, "").toLowerCase();
} else if(data.image_date_text.length == 7) {
//this date is stored as just a month with a year (04/2010) need to do a little conversion
var image_date_real = new Date(data.image_date);
captionString += " / " + month[image_date_real.getMonth()] +' '+image_date_real.getFullYear();
}
}
if(data.location != "")captionString += " / " + data.location;
$(o.caption).html(captionString);
}
//switch the large description
if(o.photoDesc) {
//alert("desc is: " + data.description);
if(trimString(data.description.toLowerCase()) != '
' && trimString(data.description) != '') {
$(o.photoDesc).html(data.description);
}
else {
$(o.photoDesc).html(data.short_description);
}
}
//if we are at the last image and its not circular disable next back links
if(!o.circular) {
enableDisableNextBack();
enableDisableJumpFirstLast();
//if a slideshow is enabled
if(o.slideShow && currImg == itemLength-1) {
pauseSlideShow();
}
}
};
function jumpToLast () {
if (currImg < itemLength-1){
//set currImg to the last li
currImg = itemLength-1;
//scroll to the end of the list
go(currImg);
//switch caption, large image, disable enable buttons (as applicable)
afterMoveChanges(currImg);
}
};
function jumpToFirst() {
if (currImg >= 1){
currImg = 0;
//scroll to the beginning of the list
go(currImg);
//switch caption, large image, disable enable buttons (as applicable)
afterMoveChanges(currImg);
}
};
});
};
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);
* 
* 
*