SHARE
TWEET

jCaousel Lite with added "pause on hover" (uncompressed)

a guest Oct 26th, 2010 917 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2.  * jCarouselLite - jQuery plugin to navigate images/any content in a carousel style widget.
  3.  * @requires jQuery v1.2 or above
  4.  *
  5.  * http://gmarwaha.com/jquery/jcarousellite/
  6.  *
  7.  * Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)
  8.  * Dual licensed under the MIT and GPL licenses:
  9.  * http://www.opensource.org/licenses/mit-license.php
  10.  * http://www.gnu.org/licenses/gpl.html
  11.  *
  12.  * Based on version: 1.0.1
  13.  * Note: Requires jquery 1.2 or above from version 1.0.1
  14.  *
  15.  * Modified as per: http://plugins.jquery.com/node/479
  16.  *
  17.  */
  18.  
  19. /**
  20.  * Creates a carousel-style navigation widget for images/any-content from a simple HTML markup.
  21.  *
  22.  * The HTML markup that is used to build the carousel can be as simple as...
  23.  *
  24.  *  <div class="carousel">
  25.  *      <ul>
  26.  *          <li><img src="image/1.jpg" alt="1"></li>
  27.  *          <li><img src="image/2.jpg" alt="2"></li>
  28.  *          <li><img src="image/3.jpg" alt="3"></li>
  29.  *      </ul>
  30.  *  </div>
  31.  *
  32.  * As you can see, this snippet is nothing but a simple div containing an unordered list of images.
  33.  * You don't need any special "class" attribute, or a special "css" file for this plugin.
  34.  * I am using a class attribute just for the sake of explanation here.
  35.  *
  36.  * To navigate the elements of the carousel, you need some kind of navigation buttons.
  37.  * For example, you will need a "previous" button to go backward, and a "next" button to go forward.
  38.  * This need not be part of the carousel "div" itself. It can be any element in your page.
  39.  * Lets assume that the following elements in your document can be used as next, and prev buttons...
  40.  *
  41.  * <button class="prev">&lt;&lt;</button>
  42.  * <button class="next">&gt;&gt;</button>
  43.  *
  44.  * Now, all you need to do is call the carousel component on the div element that represents it, and pass in the
  45.  * navigation buttons as options.
  46.  *
  47.  * $(".carousel").jCarouselLite({
  48.  *      btnNext: ".next",
  49.  *      btnPrev: ".prev"
  50.  * });
  51.  *
  52.  * That's it, you would have now converted your raw div, into a magnificient carousel.
  53.  *
  54.  * There are quite a few other options that you can use to customize it though.
  55.  * Each will be explained with an example below.
  56.  *
  57.  * @param an options object - You can specify all the options shown below as an options object param.
  58.  *
  59.  * @option btnPrev, btnNext : string - no defaults
  60.  * @example
  61.  * $(".carousel").jCarouselLite({
  62.  *      btnNext: ".next",
  63.  *      btnPrev: ".prev"
  64.  * });
  65.  * @desc Creates a basic carousel. Clicking "btnPrev" navigates backwards and "btnNext" navigates forward.
  66.  *
  67.  * @option btnGo - array - no defaults
  68.  * @example
  69.  * $(".carousel").jCarouselLite({
  70.  *      btnNext: ".next",
  71.  *      btnPrev: ".prev",
  72.  *      btnGo: [".0", ".1", ".2"]
  73.  * });
  74.  * @desc If you don't want next and previous buttons for navigation, instead you prefer custom navigation based on
  75.  * the item number within the carousel, you can use this option. Just supply an array of selectors for each element
  76.  * in the carousel. The index of the array represents the index of the element. What i mean is, if the
  77.  * first element in the array is ".0", it means that when the element represented by ".0" is clicked, the carousel
  78.  * will slide to the first element and so on and so forth. This feature is very powerful. For example, i made a tabbed
  79.  * interface out of it by making my navigation elements styled like tabs in css. As the carousel is capable of holding
  80.  * any content, not just images, you can have a very simple tabbed navigation in minutes without using any other plugin.
  81.  * The best part is that, the tab will "slide" based on the provided effect. :-)
  82.  *
  83.  * @option mouseWheel : boolean - default is false
  84.  * @example
  85.  * $(".carousel").jCarouselLite({
  86.  *      mouseWheel: true
  87.  * });
  88.  * @desc The carousel can also be navigated using the mouse wheel interface of a scroll mouse instead of using buttons.
  89.  * To get this feature working, you have to do 2 things. First, you have to include the mouse-wheel plugin from brandon.
  90.  * Second, you will have to set the option "mouseWheel" to true. That's it, now you will be able to navigate your carousel
  91.  * using the mouse wheel. Using buttons and mouseWheel or not mutually exclusive. You can still have buttons for navigation
  92.  * as well. They complement each other. To use both together, just supply the options required for both as shown below.
  93.  * @example
  94.  * $(".carousel").jCarouselLite({
  95.  *      btnNext: ".next",
  96.  *      btnPrev: ".prev",
  97.  *      mouseWheel: true
  98.  * });
  99.  *
  100.  * @option auto : number - default is null, meaning autoscroll is disabled by default
  101.  * @example
  102.  * $(".carousel").jCarouselLite({
  103.  *      auto: 800,
  104.  *      speed: 500
  105.  * });
  106.  * @desc You can make your carousel auto-navigate itself by specfying a millisecond value in this option.
  107.  * The value you specify is the amount of time between 2 slides. The default is null, and that disables auto scrolling.
  108.  * Specify this value and magically your carousel will start auto scrolling.
  109.  *
  110.  * @option speed : number - 200 is default
  111.  * @example
  112.  * $(".carousel").jCarouselLite({
  113.  *      btnNext: ".next",
  114.  *      btnPrev: ".prev",
  115.  *      speed: 800
  116.  * });
  117.  * @desc Specifying a speed will slow-down or speed-up the sliding speed of your carousel. Try it out with
  118.  * different speeds like 800, 600, 1500 etc. Providing 0, will remove the slide effect.
  119.  *
  120.  * @option easing : string - no easing effects by default.
  121.  * @example
  122.  * $(".carousel").jCarouselLite({
  123.  *      btnNext: ".next",
  124.  *      btnPrev: ".prev",
  125.  *      easing: "bounceout"
  126.  * });
  127.  * @desc You can specify any easing effect. Note: You need easing plugin for that. Once specified,
  128.  * the carousel will slide based on the provided easing effect.
  129.  *
  130.  * @option vertical : boolean - default is false
  131.  * @example
  132.  * $(".carousel").jCarouselLite({
  133.  *      btnNext: ".next",
  134.  *      btnPrev: ".prev",
  135.  *      vertical: true
  136.  * });
  137.  * @desc Determines the direction of the carousel. true, means the carousel will display vertically. The next and
  138.  * prev buttons will slide the items vertically as well. The default is false, which means that the carousel will
  139.  * display horizontally. The next and prev items will slide the items from left-right in this case.
  140.  *
  141.  * @option circular : boolean - default is true
  142.  * @example
  143.  * $(".carousel").jCarouselLite({
  144.  *      btnNext: ".next",
  145.  *      btnPrev: ".prev",
  146.  *      circular: false
  147.  * });
  148.  * @desc Setting it to true enables circular navigation. This means, if you click "next" after you reach the last
  149.  * element, you will automatically slide to the first element and vice versa. If you set circular to false, then
  150.  * if you click on the "next" button after you reach the last element, you will stay in the last element itself
  151.  * and similarly for "previous" button and first element.
  152.  *
  153.  * @option visible : number - default is 3
  154.  * @example
  155.  * $(".carousel").jCarouselLite({
  156.  *      btnNext: ".next",
  157.  *      btnPrev: ".prev",
  158.  *      visible: 4
  159.  * });
  160.  * @desc This specifies the number of items visible at all times within the carousel. The default is 3.
  161.  * You are even free to experiment with real numbers. Eg: "3.5" will have 3 items fully visible and the
  162.  * last item half visible. This gives you the effect of showing the user that there are more images to the right.
  163.  *
  164.  * @option start : number - default is 0
  165.  * @example
  166.  * $(".carousel").jCarouselLite({
  167.  *      btnNext: ".next",
  168.  *      btnPrev: ".prev",
  169.  *      start: 2
  170.  * });
  171.  * @desc You can specify from which item the carousel should start. Remember, the first item in the carousel
  172.  * has a start of 0, and so on.
  173.  *
  174.  * @option scrool : number - default is 1
  175.  * @example
  176.  * $(".carousel").jCarouselLite({
  177.  *      btnNext: ".next",
  178.  *      btnPrev: ".prev",
  179.  *      scroll: 2
  180.  * });
  181.  * @desc The number of items that should scroll/slide when you click the next/prev navigation buttons. By
  182.  * default, only one item is scrolled, but you may set it to any number. Eg: setting it to "2" will scroll
  183.  * 2 items when you click the next or previous buttons.
  184.  *
  185.  * @option beforeStart, afterEnd : function - callbacks
  186.  * @example
  187.  * $(".carousel").jCarouselLite({
  188.  *      btnNext: ".next",
  189.  *      btnPrev: ".prev",
  190.  *      beforeStart: function(a) {
  191.  *          alert("Before animation starts:" + a);
  192.  *      },
  193.  *      afterEnd: function(a) {
  194.  *          alert("After animation ends:" + a);
  195.  *      }
  196.  * });
  197.  * @desc If you wanted to do some logic in your page before the slide starts and after the slide ends, you can
  198.  * register these 2 callbacks. The functions will be passed an argument that represents an array of elements that
  199.  * are visible at the time of callback.
  200.  *
  201.  *
  202.  * @cat Plugins/Image Gallery
  203.  * @author Ganeshji Marwaha/ganeshread@gmail.com
  204.  */
  205.  
  206. (function($) {                                          // Compliant with jquery.noConflict()
  207. $.fn.jCarouselLite = function(o) {
  208.     o = $.extend({
  209.         btnPrev: null,
  210.         btnNext: null,
  211.         btnGo: null,
  212.         mouseWheel: false,
  213.         auto: null,
  214.  
  215.         speed: 200,
  216.         easing: null,
  217.  
  218.         vertical: false,
  219.         circular: true,
  220.         visible: 3,
  221.         start: 0,
  222.         scroll: 1,
  223.  
  224.         beforeStart: null,
  225.         afterEnd: null
  226.     }, o || {});
  227.  
  228.     return this.each(function() {                           // Returns the element collection. Chainable.
  229.  
  230.         var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";
  231.         var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;
  232.  
  233.         if(o.circular) {
  234.             ul.prepend(tLi.slice(tl-v-1+1).clone())
  235.               .append(tLi.slice(0,v).clone());
  236.             o.start += v;
  237.         }
  238.  
  239.         var li = $("li", ul), itemLength = li.size(), curr = o.start;
  240.         div.css("visibility", "visible");
  241.  
  242.         li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});
  243.         ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
  244.         div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});
  245.  
  246.         var liSize = o.vertical ? height(li) : width(li);   // Full li size(incl margin)-Used for animation
  247.         var ulSize = liSize * itemLength;                   // size of full ul(total length, not just for the visible items)
  248.         var divSize = liSize * v;                           // size of entire div(total length for just the visible items)
  249.  
  250.         li.css({width: li.width(), height: li.height()});
  251.         ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));
  252.  
  253.         div.css(sizeCss, divSize+"px");                     // Width of the DIV. length of visible images
  254.  
  255.         if(o.btnPrev)
  256.             $(o.btnPrev).click(function() {
  257.                 return go(curr-o.scroll);
  258.             });
  259.  
  260.         if(o.btnNext)
  261.             $(o.btnNext).click(function() {
  262.                 return go(curr+o.scroll);
  263.             });
  264.  
  265.         if(o.btnGo)
  266.             $.each(o.btnGo, function(i, val) {
  267.                 $(val).click(function() {
  268.                     return go(o.circular ? o.visible+i : i);
  269.                 });
  270.             });
  271.  
  272.         if(o.mouseWheel && div.mousewheel)
  273.             div.mousewheel(function(e, d) {
  274.                 return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
  275.             });
  276.            
  277.         if(o.auto) {
  278.             autoScroll = setInterval(function() {
  279.                 go(curr+o.scroll);
  280.             }, o.auto+o.speed);
  281.  
  282.             div.hover(
  283.                 function() {
  284.                     clearInterval(autoScroll);
  285.                 },
  286.                 function() {
  287.                     autoScroll = setInterval(function() {
  288.                         go(curr+o.scroll);
  289.                     }, o.auto+o.speed);
  290.                 }
  291.             );
  292.         }
  293.            
  294.         function vis() {
  295.             return li.slice(curr).slice(0,v);
  296.         };
  297.  
  298.         function go(to) {
  299.             if(!running) {
  300.  
  301.                 if(o.beforeStart)
  302.                     o.beforeStart.call(this, vis());
  303.  
  304.                 if(o.circular) {            // If circular we are in first or last, then goto the other end
  305.                     if(to<=o.start-v-1) {           // If first, then goto last
  306.                         ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
  307.                         // If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
  308.                         curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
  309.                     } else if(to>=itemLength-v+1) { // If last, then goto first
  310.                         ul.css(animCss, -( (v) * liSize ) + "px" );
  311.                         // If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
  312.                         curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
  313.                     } else curr = to;
  314.                 } else {                    // If non-circular and to points to first or last, we just return.
  315.                     if(to<0 || to>itemLength-v) return;
  316.                     else curr = to;
  317.                 }                           // If neither overrides it, the curr will still be "to" and we can proceed.
  318.  
  319.                 running = true;
  320.  
  321.                 ul.animate(
  322.                     animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
  323.                     function() {
  324.                         if(o.afterEnd)
  325.                             o.afterEnd.call(this, vis());
  326.                         running = false;
  327.                     }
  328.                 );
  329.                 // Disable buttons when the carousel reaches the last/first, and enable when not
  330.                 if(!o.circular) {
  331.                     $(o.btnPrev + "," + o.btnNext).removeClass("disabled");
  332.                     $( (curr-o.scroll<0 && o.btnPrev)
  333.                         ||
  334.                        (curr+o.scroll > itemLength-v && o.btnNext)
  335.                         ||
  336.                        []
  337.                      ).addClass("disabled");
  338.                 }
  339.  
  340.             }
  341.             return false;
  342.         };
  343.     });
  344. };
  345.  
  346. function css(el, prop) {
  347.     return parseInt($.css(el[0], prop)) || 0;
  348. };
  349. function width(el) {
  350.     return  el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
  351. };
  352. function height(el) {
  353.     return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
  354. };
  355.  
  356. })(jQuery);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top