├── .nojekyll
├── .gitignore
├── lib
    ├── tpl
    │   ├── footer.tpl
    │   └── header.tpl
    ├── ios-orientationchange-fix.js
    └── jquery.mousewheel.js
├── javascripts
    └── main.js
├── images
    ├── bg_hr.png
    ├── blacktocat.png
    ├── icon_download.png
    └── sprite_download.png
├── .eslintrc.js
├── bower.json
├── jcarousellite.jquery.json
├── LICENSE-MIT
├── package.json
├── demo
    ├── centered.html
    ├── responsive.html
    ├── velocity.html
    ├── refresh.html
    └── index.html
├── test
    ├── qunit
    │   ├── qunit.css
    │   └── qunit.js
    ├── index.html
    └── tests.js
├── stylesheets
    ├── pygment_trac.css
    └── stylesheet.css
├── Gruntfile.js
├── jcarousellite.min.js
├── readme.md
├── src
    └── jquery.jcarousellite.js
└── jcarousellite.js


/.nojekyll:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *DS_Store


--------------------------------------------------------------------------------
/lib/tpl/footer.tpl:
--------------------------------------------------------------------------------
1 | 
2 | </body>
3 | </html>
4 | 


--------------------------------------------------------------------------------
/javascripts/main.js:
--------------------------------------------------------------------------------
1 | console.log('This would be the main JS file.');
2 | 


--------------------------------------------------------------------------------
/images/bg_hr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kswedberg/jquery-carousel-lite/HEAD/images/bg_hr.png


--------------------------------------------------------------------------------
/images/blacktocat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kswedberg/jquery-carousel-lite/HEAD/images/blacktocat.png


--------------------------------------------------------------------------------
/images/icon_download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kswedberg/jquery-carousel-lite/HEAD/images/icon_download.png


--------------------------------------------------------------------------------
/images/sprite_download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kswedberg/jquery-carousel-lite/HEAD/images/sprite_download.png


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   'extends': 'kswedberg/es5',
3 |   rules: {
4 |     'no-unused-vars': 'warn'
5 |   }
6 | };
7 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquery.jcarousellite",
 3 |   "version": "1.9.3",
 4 |   "title": "jCarousel Lite",
 5 |   "description": "A jQuery carousel plugin based on jCarouselLite by Ganeshji Marwaha",
 6 |   "author": {
 7 |     "name": "Karl Swedberg",
 8 |     "email": "kswedberg@gmail.com",
 9 |     "url": "http://www.learningjquery.com/"
10 |   },
11 |   "licenses": [
12 |     {
13 |       "type": "MIT",
14 |       "url": "http://kswedberg.github.com/jquery-carousel-lite/blob/master/LICENSE-MIT"
15 |     }
16 |   ],
17 |   "dependencies": {
18 |     "jquery": ">=1.4"
19 |   },
20 |   "main": "jcarousellite.js",
21 |   "ignore": [
22 |     "demo/",
23 |     "lib/",
24 |     "test/",
25 |     "src/",
26 |     "Gruntfile.js",
27 |     "package.json",
28 |     "jcarousellite.jquery.json"
29 |   ]
30 | }


--------------------------------------------------------------------------------
/jcarousellite.jquery.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jcarousellite",
 3 |   "title": "jCarousel Lite",
 4 |   "description": "A jQuery carousel plugin based on jCarouselLite by Ganeshji Marwaha",
 5 |   "version": "1.9.3",
 6 |   "homepage": "http://kswedberg.github.com/jquery-carousel-lite/",
 7 |   "author": {
 8 |     "name": "Karl Swedberg",
 9 |     "email": "kswedberg@gmail.com",
10 |     "url": "http://www.learningjquery.com/"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git://github.com/kswedberg/jquery-carousel-lite.git"
15 |   },
16 |   "homepage": "http://kswedberg.github.com/jquery-carousel-lite/",
17 |   "bugs": {
18 |     "url": "https://github.com/kswedberg/jquery-carousel-lite/issues"
19 |   },
20 |   "licenses": [
21 |     {
22 |       "type": "MIT",
23 |       "url": "http://kswedberg.github.com/jquery-carousel-lite/blob/master/LICENSE-MIT"
24 |     }
25 |   ],
26 |   "dependencies": {
27 |     "jquery": ">=1.4"
28 |   },
29 |   "keywords": []
30 | }
31 | 


--------------------------------------------------------------------------------
/LICENSE-MIT:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2012 Karl Swedberg
 2 | 
 3 | Permission is hereby granted, free of charge, to any person
 4 | obtaining a copy of this software and associated documentation
 5 | files (the "Software"), to deal in the Software without
 6 | restriction, including without limitation the rights to use,
 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell
 8 | copies of the Software, and to permit persons to whom the
 9 | Software is furnished to do so, subject to the following
10 | conditions:
11 | 
12 | The above copyright notice and this permission notice shall be
13 | included in all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jcarousellite",
 3 |   "title": "jCarousel Lite",
 4 |   "description": "A jQuery carousel plugin based on jCarouselLite by Ganeshji Marwaha",
 5 |   "version": "1.9.3",
 6 |   "author": {
 7 |     "name": "Karl Swedberg",
 8 |     "email": "kswedberg@gmail.com"
 9 |   },
10 |   "contributors": [
11 |     {
12 |       "name": "Ganeshji Marwaha",
13 |       "url": "http://gmarwaha.com"
14 |     }
15 |   ],
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "git://github.com/kswedberg/jquery-carousel-lite.git"
19 |   },
20 |   "homepage": "http://kswedberg.github.com/jquery-carousel-lite/",
21 |   "dependencies": {
22 |     "jquery": ">=1.4"
23 |   },
24 |   "devDependencies": {
25 |     "eslint-config-kswedberg": "^5.1.1",
26 |     "grunt": "^1.5.3",
27 |     "grunt-contrib-concat": "^2.1.0",
28 |     "grunt-contrib-jshint": "^3.2.0",
29 |     "grunt-contrib-uglify": "^5.2.2",
30 |     "grunt-contrib-watch": "^1.1.0",
31 |     "grunt-eslint": "^24.0.0",
32 |     "grunt-version": "^3.0.0",
33 |     "marked": "^4.1.0",
34 |     "node-syntaxhighlighter": "^0.8.1"
35 |   },
36 |   "licenses": [
37 |     {
38 |       "type": "MIT",
39 |       "url": "http://kswedberg.github.com/jquery-carousel-lite/blob/master/LICENSE-MIT"
40 |     }
41 |   ],
42 |   "keywords": [
43 |     "jquery-plugin",
44 |     "ecosystem:jquery",
45 |     "carousel",
46 |     "slideshow"
47 |   ]
48 | }
49 | 


--------------------------------------------------------------------------------
/lib/tpl/header.tpl:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>jQuery <%= pkg.title %> Plugin</title>
 7 |   <style>
 8 |   html,
 9 |   body {
10 |     margin: 0;
11 |     padding: 0;
12 |     border-width: 0;
13 |   }
14 |   body {
15 |     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
16 |     width: 94%;
17 |     margin: 0 auto;
18 |     padding: 0 3%;
19 |     max-width: 1120px;
20 |     font-size: 1em;
21 |     line-height: 1.5;
22 |     background-color: #fff;
23 |     color: #242424;
24 |   }
25 |   pre {
26 |     background-color: #f3f3f3;
27 |     padding: .25em;
28 |     border: 1px solid #ccc;
29 |     font-size: .9em;
30 |     overflow: auto;
31 |   }
32 |   code {
33 |     font-family: Monaco, Courier, monospace;
34 |   }
35 |   .comment,
36 |   .comments {
37 |     color: #aaa;
38 |   }
39 |   .keyword {
40 |     color: blue;
41 |   }
42 |   .string {
43 |     color: #090;
44 |   }
45 |   .number {
46 |     color: #099;
47 |   }
48 | 
49 |   td.gutter {
50 |     text-align: right;
51 |     padding-right: 3px;
52 |     padding-left: 3px;
53 |     background-color: #ddd;
54 |     color: #aaa;
55 |   }
56 |   td.code {
57 |     padding-left: 5px;
58 |   }
59 |   h1, h2, h3 {
60 |     font-weight: normal;
61 |     color: #141414;
62 |   }
63 |   h2 {
64 |     padding-bottom: .2em;
65 |     border-bottom: 1px solid #ccc;
66 |   }
67 |   .right {
68 |     float: right;
69 |   }
70 |   </style>
71 | </head>
72 | <body>
73 | 
74 | <div class="right"><a href="demo/index.html">Demo</a></div>
75 | 


--------------------------------------------------------------------------------
/lib/ios-orientationchange-fix.js:
--------------------------------------------------------------------------------
 1 | /*! A fix for the iOS orientationchange zoom bug.
 2 |  Script by @scottjehl, rebound by @wilto.
 3 |  MIT / GPLv2 License.
 4 | */
 5 | (function(w){
 6 | 
 7 |   // This fix addresses an iOS bug, so return early if the UA claims it's something else.
 8 |   var ua = navigator.userAgent;
 9 |   if( !( /iPhone|iPad|iPod/.test( navigator.platform ) && /OS [1-5]_[0-9_]* like Mac OS X/i.test(ua) && ua.indexOf( "AppleWebKit" ) > -1 ) ){
10 |     return;
11 |   }
12 | 
13 |     var doc = w.document;
14 | 
15 |     if( !doc.querySelector ){ return; }
16 | 
17 |     var meta = doc.querySelector( "meta[name=viewport]" ),
18 |         initialContent = meta && meta.getAttribute( "content" ),
19 |         disabledZoom = initialContent + ",maximum-scale=1",
20 |         enabledZoom = initialContent + ",maximum-scale=10",
21 |         enabled = true,
22 |     x, y, z, aig;
23 | 
24 |     if( !meta ){ return; }
25 | 
26 |     function restoreZoom(){
27 |       window.setTimeout(function() {
28 |         enabled = true;
29 |       }, 50);
30 |     }
31 | 
32 |     function disableZoom(){
33 |         meta.setAttribute( "content", disabledZoom );
34 |         enabled = false;
35 | 
36 |     }
37 | 
38 |     function checkTilt( e ){
39 |     aig = e.accelerationIncludingGravity;
40 |     x = Math.abs( aig.x );
41 |     y = Math.abs( aig.y );
42 |     z = Math.abs( aig.z );
43 | 
44 |     // If portrait orientation and in one of the danger zones
45 |     if( (!w.orientation || w.orientation === 180) && ( x > 7 || ( ( z > 6 && y < 8 || z < 8 && y > 6 ) && x > 5 ) ) ){
46 |       if( enabled ){
47 |         disableZoom();
48 |       }
49 |     }
50 |     else if( !enabled ){
51 |       restoreZoom();
52 |     }
53 |   }
54 | 
55 |   w.addEventListener( "orientationchange", restoreZoom, false );
56 |   w.addEventListener( "devicemotion", checkTilt, false );
57 | 
58 | })( this );
59 | 


--------------------------------------------------------------------------------
/demo/centered.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>demo</title>
  6 | <style type="text/css">
  7 | body {
  8 |   font-size: 13px;
  9 |   font-family: Helvetica, Arial, Verdana, sans-serif;
 10 |   line-height: 1.3em;
 11 | }
 12 | .container {
 13 |   width: 840px;
 14 |   margin: 0 auto;
 15 | }
 16 | .slideshow {
 17 |   width: 800px;
 18 |   overflow: hidden;
 19 |   padding: 0 100px;
 20 |   margin: 0 auto 20px;
 21 |   border: 5px solid #999;
 22 | }
 23 | .slides {
 24 |   margin: 0;
 25 |   padding: 0;
 26 |   list-style-type: none;
 27 | }
 28 | .slide {
 29 |   float: left;
 30 |   width: 300px;
 31 |   height: 200px;
 32 |   padding: 10px;
 33 | }
 34 | .slide img {
 35 |   display: block;
 36 | }
 37 | .nav {
 38 |   margin: 10px auto;
 39 |   text-align: center;
 40 | }
 41 | .nav a {
 42 |   display: inline-block;
 43 |   margin: 0;
 44 |   padding: .2em .5em;
 45 |   color: #00A3CB;
 46 |   text-decoration: none;
 47 | 
 48 | }
 49 | .nav a:hover {
 50 |   color: #00436B;
 51 | }
 52 | .nav a.active,
 53 | .nav a.active:hover {
 54 |   background-color: #00A3CB;
 55 |   color: white;
 56 | }
 57 | .disabled {
 58 |   color: #f00;
 59 | }
 60 | </style>
 61 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 62 | 
 63 |   <script src="../jcarousellite.js"></script>
 64 |   <script>
 65 |     $(document).ready(function() {
 66 |       var options = {
 67 |         auto: true,
 68 |         visible: 1,
 69 |         circular: true,
 70 |         speed: 300,
 71 |         pause: true,
 72 |         btnGo: $('div.nav a')
 73 |       };
 74 | 
 75 | 
 76 |       $('.slideshow').jCarouselLite(options);
 77 | 
 78 | 
 79 | 
 80 |     });
 81 | 
 82 |   </script>
 83 | </head>
 84 | <body>
 85 | <div class="container">
 86 |   <div class="slideshow">
 87 |     <ul class="slides">
 88 |       <li class="slide"><img src="http://placehold.it/300x200&text=1"></li>
 89 |       <li class="slide"><img src="http://placehold.it/300x200&text=2"></li>
 90 |       <li class="slide"><img src="http://placehold.it/300x200&text=3"></li>
 91 |       <li class="slide"><img src="http://placehold.it/300x200&text=4"></li>
 92 |       <li class="slide"><img src="http://placehold.it/300x200&text=5"></li>
 93 |       <li class="slide"><img src="http://placehold.it/300x200&text=6"></li>
 94 |       <li class="slide"><img src="http://placehold.it/300x200&text=7"></li>
 95 |     </ul>
 96 | 
 97 |   </div>
 98 | 
 99 |   <div class="nav">
100 |     <a href="#">1</a>
101 |     <a href="#">2</a>
102 |     <a href="#">3</a>
103 |     <a href="#">4</a>
104 |     <a href="#">5</a>
105 |     <a href="#">6</a>
106 |     <a href="#">7</a>
107 |   </div>
108 | 
109 | </div>
110 | </body>
111 | </html>
112 | 


--------------------------------------------------------------------------------
/lib/jquery.mousewheel.js:
--------------------------------------------------------------------------------
 1 | /*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
 2 |  * Licensed under the MIT License (LICENSE.txt).
 3 |  *
 4 |  * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 5 |  * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 6 |  * Thanks to: Seamus Leahy for adding deltaX and deltaY
 7 |  *
 8 |  * Version: 3.0.6
 9 |  * 
10 |  * Requires: 1.2.2+
11 |  */
12 | 
13 | (function($) {
14 | 
15 | var types = ['DOMMouseScroll', 'mousewheel'];
16 | 
17 | if ($.event.fixHooks) {
18 |     for ( var i=types.length; i; ) {
19 |         $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
20 |     }
21 | }
22 | 
23 | $.event.special.mousewheel = {
24 |     setup: function() {
25 |         if ( this.addEventListener ) {
26 |             for ( var i=types.length; i; ) {
27 |                 this.addEventListener( types[--i], handler, false );
28 |             }
29 |         } else {
30 |             this.onmousewheel = handler;
31 |         }
32 |     },
33 |     
34 |     teardown: function() {
35 |         if ( this.removeEventListener ) {
36 |             for ( var i=types.length; i; ) {
37 |                 this.removeEventListener( types[--i], handler, false );
38 |             }
39 |         } else {
40 |             this.onmousewheel = null;
41 |         }
42 |     }
43 | };
44 | 
45 | $.fn.extend({
46 |     mousewheel: function(fn) {
47 |         return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
48 |     },
49 |     
50 |     unmousewheel: function(fn) {
51 |         return this.unbind("mousewheel", fn);
52 |     }
53 | });
54 | 
55 | 
56 | function handler(event) {
57 |     var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
58 |     event = $.event.fix(orgEvent);
59 |     event.type = "mousewheel";
60 |     
61 |     // Old school scrollwheel delta
62 |     if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
63 |     if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
64 |     
65 |     // New school multidimensional scroll (touchpads) deltas
66 |     deltaY = delta;
67 |     
68 |     // Gecko
69 |     if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
70 |         deltaY = 0;
71 |         deltaX = -1*delta;
72 |     }
73 |     
74 |     // Webkit
75 |     if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
76 |     if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
77 |     
78 |     // Add event and delta to the front of the arguments
79 |     args.unshift(event, delta, deltaX, deltaY);
80 |     
81 |     return ($.event.dispatch || $.event.handle).apply(this, args);
82 | }
83 | 
84 | })(jQuery);


--------------------------------------------------------------------------------
/test/qunit/qunit.css:
--------------------------------------------------------------------------------
  1 | /** Font Family and Sizes */
  2 | 
  3 | #qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
  4 | 	font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;
  5 | }
  6 | 
  7 | #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
  8 | #qunit-tests { font-size: smaller; }
  9 | 
 10 | 
 11 | /** Resets */
 12 | 
 13 | #qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
 14 | 	margin: 0;
 15 | 	padding: 0;
 16 | }
 17 | 
 18 | 
 19 | /** Header */
 20 | 
 21 | #qunit-header {
 22 | 	padding: 0.5em 0 0.5em 1em;
 23 | 	
 24 | 	color: #fff;
 25 | 	text-shadow: rgba(0, 0, 0, 0.5) 4px 4px 1px;
 26 | 	background-color: #0d3349;
 27 | 	
 28 | 	border-radius: 15px 15px 0 0;
 29 | 	-moz-border-radius: 15px 15px 0 0;
 30 | 	-webkit-border-top-right-radius: 15px;
 31 | 	-webkit-border-top-left-radius: 15px;
 32 | }
 33 | 
 34 | #qunit-header a {
 35 | 	text-decoration: none;
 36 | 	color: white;
 37 | }
 38 | 
 39 | #qunit-banner {
 40 | 	height: 5px;
 41 | }
 42 | 
 43 | #qunit-testrunner-toolbar {
 44 | 	padding: 0em 0 0.5em 2em;
 45 | }
 46 | 
 47 | #qunit-userAgent {
 48 | 	padding: 0.5em 0 0.5em 2.5em;
 49 | 	background-color: #2b81af;
 50 | 	color: #fff;
 51 | 	text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
 52 | }
 53 | 
 54 | 
 55 | /** Tests: Pass/Fail */
 56 | 
 57 | #qunit-tests {
 58 | 	list-style-position: inside;
 59 | }
 60 | 
 61 | #qunit-tests li {
 62 | 	padding: 0.4em 0.5em 0.4em 2.5em;
 63 | 	border-bottom: 1px solid #fff;
 64 | 	list-style-position: inside;
 65 | }
 66 | 
 67 | #qunit-tests li strong {
 68 | 	cursor: pointer;
 69 | }
 70 | 
 71 | #qunit-tests ol {
 72 | 	margin-top: 0.5em;
 73 | 	padding: 0.5em;
 74 | 	
 75 | 	background-color: #fff;
 76 | 	
 77 | 	border-radius: 15px;
 78 | 	-moz-border-radius: 15px;
 79 | 	-webkit-border-radius: 15px;
 80 | 	
 81 | 	box-shadow: inset 0px 2px 13px #999;
 82 | 	-moz-box-shadow: inset 0px 2px 13px #999;
 83 | 	-webkit-box-shadow: inset 0px 2px 13px #999;
 84 | }
 85 | 
 86 | /*** Test Counts */
 87 | 
 88 | #qunit-tests b.counts                       { color: black; }
 89 | #qunit-tests b.passed                       { color: #5E740B; }
 90 | #qunit-tests b.failed                       { color: #710909; }
 91 | 
 92 | #qunit-tests li li {
 93 | 	margin: 0.5em;
 94 | 	padding: 0.4em 0.5em 0.4em 0.5em;
 95 | 	background-color: #fff;
 96 | 	border-bottom: none;
 97 | 	list-style-position: inside;
 98 | }
 99 | 
100 | /*** Passing Styles */
101 | 
102 | #qunit-tests li li.pass {
103 | 	color: #5E740B;
104 | 	background-color: #fff;
105 | 	border-left: 26px solid #C6E746;
106 | }
107 | 
108 | #qunit-tests .pass                          { color: #528CE0; background-color: #D2E0E6; }
109 | #qunit-tests .pass .test-name               { color: #366097; }
110 |  
111 | #qunit-tests .pass .test-actual,
112 | #qunit-tests .pass .test-expected           { color: #999999; }
113 | 
114 | #qunit-banner.qunit-pass                    { background-color: #C6E746; }
115 | 
116 | /*** Failing Styles */
117 | 
118 | #qunit-tests li li.fail {
119 | 	color: #710909;
120 | 	background-color: #fff;
121 | 	border-left: 26px solid #EE5757;
122 | }
123 | 
124 | #qunit-tests .fail                          { color: #000000; background-color: #EE5757; }
125 | #qunit-tests .fail .test-name,
126 | #qunit-tests .fail .module-name             { color: #000000; }
127 | 
128 | #qunit-tests .fail .test-actual             { color: #EE5757; }
129 | #qunit-tests .fail .test-expected           { color: green;   }
130 | 
131 | #qunit-banner.qunit-fail, 
132 | #qunit-testrunner-toolbar                   { background-color: #EE5757; }
133 | 
134 | 
135 | /** Footer */
136 | 
137 | #qunit-testresult {
138 | 	padding: 0.5em 0.5em 0.5em 2.5em;
139 | 
140 | 	color: #2b81af;
141 | 	background-color: #D2E0E6;
142 | 
143 | 	border-radius: 0 0 15px 15px;
144 | 	-moz-border-radius: 0 0 15px 15px;
145 | 	-webkit-border-bottom-right-radius: 15px;
146 | 	-webkit-border-bottom-left-radius: 15px;
147 | }
148 | 
149 | /** Fixture */
150 | 
151 | #qunit-fixture {
152 | 	position: absolute;
153 | 	top: -10000px;
154 | 	left: -10000px;
155 | }
156 | 


--------------------------------------------------------------------------------
/demo/responsive.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1">
  6 |   <title>demo</title>
  7 | 
  8 | <style type="text/css">
  9 | html,
 10 | body {
 11 |   margin: 0;
 12 |   padding: 0;
 13 | }
 14 | body {
 15 |   font-size: 13px;
 16 |   font-family: Helvetica, Arial, Verdana, sans-serif;
 17 |   line-height: 1.3em;
 18 | }
 19 | .container {
 20 |   max-width: 850px;
 21 |   margin: 0 auto;
 22 | }
 23 | .slideshow {
 24 |   overflow: hidden;
 25 |   padding: 0 20px;
 26 |   margin-bottom: 20px;
 27 |   border: 5px solid #999;
 28 | }
 29 | .slides {
 30 |   margin: 0;
 31 |   padding: 0;
 32 |   list-style-type: none;
 33 | }
 34 | .slide {
 35 |   float: left;
 36 |   width: 360px;
 37 |   height: 150px;
 38 |   padding: 20px;
 39 | }
 40 | .prev,
 41 | .next {
 42 |   position: relative;
 43 |   z-index: 10;
 44 |   display: inline-block;
 45 |   padding: 2px 8px;
 46 |   margin-bottom: 5px;
 47 |   text-decoration: none;
 48 |   background-color: #f3f3f3;
 49 |   color: #555;
 50 |   border: 1px solid #ccc;
 51 | }
 52 | .disabled {
 53 |   color: #bbb;
 54 |   cursor: default;
 55 | }
 56 | </style>
 57 | 
 58 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 59 |   <script>!window.jQuery && document.write(unescape('%3Cscript src="/lib/jquery.js"%3E%3C/script%3E'));</script>
 60 |   <script src="../lib/ios-orientationchange-fix.js"></script>
 61 |   <script src="../src/jquery.jcarousellite.js"></script>
 62 | 
 63 |   <script>
 64 |     $(document).ready(function() {
 65 | 
 66 |       var carouselOptions = {
 67 |         // auto: true,
 68 |         circular: false,
 69 |         autoWidth: true,
 70 |         responsive: true,
 71 |         visible: 2,
 72 |         speed: 300,
 73 |         pause: true,
 74 |         btnPrev: function() {
 75 |           return $(this).find('.prev');
 76 |         },
 77 |         btnNext: function() {
 78 |           return $(this).find('.next');
 79 |         }
 80 |       };
 81 | 
 82 |       $('div.slideshow').jCarouselLite(carouselOptions);
 83 | 
 84 |     });
 85 |   </script>
 86 | </head>
 87 | <body>
 88 | <div class="container">
 89 |   <p><a href="../">Instructions</a></p>
 90 |   <div class="slideshow">
 91 |     <ul class="slides">
 92 | 
 93 |       <li class="slide">
 94 |         <div class="img-wrapper">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 95 |         </div>
 96 |       </li>
 97 | 
 98 |       <li class="slide">
 99 |         <div class="img-wrapper">2 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
100 |           <span class="description"><span>Green Roof</span></span>
101 |         </div>
102 |       </li>
103 | 
104 | 
105 |       <li class="slide">
106 |         <div class="img-wrapper">3 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
107 |           <span class="description"><span>Zeeland</span></span>
108 |         </div>
109 |       </li>
110 | 
111 |       <li class="slide">
112 |         <div class="img-wrapper">4
113 |           In culpa qui officia deserunt mollit anim id est laborum.
114 |           <span class="description"><span>CityFlats Hotel</span></span>
115 | 
116 |         </div>
117 |       </li>
118 | 
119 |       <li class="slide">
120 |         <div class="img-wrapper">5                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
121 |         </div>
122 |       </li>
123 |     </ul>
124 |     <a href="#" class="prev">&lt;</a>
125 |     <a href="#" class="next">&gt;</a>
126 |   </div>
127 | 
128 | 
129 | 
130 | </div>
131 | </body>
132 | </html>
133 | 


--------------------------------------------------------------------------------
/stylesheets/pygment_trac.css:
--------------------------------------------------------------------------------
 1 | .highlight .hll { background-color: #ffffcc }
 2 | .highlight  { background: #f0f3f3; }
 3 | .highlight .c { color: #0099FF; font-style: italic } /* Comment */
 4 | .highlight .err { color: #AA0000; background-color: #FFAAAA } /* Error */
 5 | .highlight .k { color: #006699; font-weight: bold } /* Keyword */
 6 | .highlight .o { color: #555555 } /* Operator */
 7 | .highlight .cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
 8 | .highlight .cp { color: #009999 } /* Comment.Preproc */
 9 | .highlight .c1 { color: #0099FF; font-style: italic } /* Comment.Single */
10 | .highlight .cs { color: #0099FF; font-weight: bold; font-style: italic } /* Comment.Special */
11 | .highlight .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
12 | .highlight .ge { font-style: italic } /* Generic.Emph */
13 | .highlight .gr { color: #FF0000 } /* Generic.Error */
14 | .highlight .gh { color: #003300; font-weight: bold } /* Generic.Heading */
15 | .highlight .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
16 | .highlight .go { color: #AAAAAA } /* Generic.Output */
17 | .highlight .gp { color: #000099; font-weight: bold } /* Generic.Prompt */
18 | .highlight .gs { font-weight: bold } /* Generic.Strong */
19 | .highlight .gu { color: #003300; font-weight: bold } /* Generic.Subheading */
20 | .highlight .gt { color: #99CC66 } /* Generic.Traceback */
21 | .highlight .kc { color: #006699; font-weight: bold } /* Keyword.Constant */
22 | .highlight .kd { color: #006699; font-weight: bold } /* Keyword.Declaration */
23 | .highlight .kn { color: #006699; font-weight: bold } /* Keyword.Namespace */
24 | .highlight .kp { color: #006699 } /* Keyword.Pseudo */
25 | .highlight .kr { color: #006699; font-weight: bold } /* Keyword.Reserved */
26 | .highlight .kt { color: #007788; font-weight: bold } /* Keyword.Type */
27 | .highlight .m { color: #FF6600 } /* Literal.Number */
28 | .highlight .s { color: #CC3300 } /* Literal.String */
29 | .highlight .na { color: #330099 } /* Name.Attribute */
30 | .highlight .nb { color: #336666 } /* Name.Builtin */
31 | .highlight .nc { color: #00AA88; font-weight: bold } /* Name.Class */
32 | .highlight .no { color: #336600 } /* Name.Constant */
33 | .highlight .nd { color: #9999FF } /* Name.Decorator */
34 | .highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
35 | .highlight .ne { color: #CC0000; font-weight: bold } /* Name.Exception */
36 | .highlight .nf { color: #CC00FF } /* Name.Function */
37 | .highlight .nl { color: #9999FF } /* Name.Label */
38 | .highlight .nn { color: #00CCFF; font-weight: bold } /* Name.Namespace */
39 | .highlight .nt { color: #330099; font-weight: bold } /* Name.Tag */
40 | .highlight .nv { color: #003333 } /* Name.Variable */
41 | .highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
42 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */
43 | .highlight .mf { color: #FF6600 } /* Literal.Number.Float */
44 | .highlight .mh { color: #FF6600 } /* Literal.Number.Hex */
45 | .highlight .mi { color: #FF6600 } /* Literal.Number.Integer */
46 | .highlight .mo { color: #FF6600 } /* Literal.Number.Oct */
47 | .highlight .sb { color: #CC3300 } /* Literal.String.Backtick */
48 | .highlight .sc { color: #CC3300 } /* Literal.String.Char */
49 | .highlight .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
50 | .highlight .s2 { color: #CC3300 } /* Literal.String.Double */
51 | .highlight .se { color: #CC3300; font-weight: bold } /* Literal.String.Escape */
52 | .highlight .sh { color: #CC3300 } /* Literal.String.Heredoc */
53 | .highlight .si { color: #AA0000 } /* Literal.String.Interpol */
54 | .highlight .sx { color: #CC3300 } /* Literal.String.Other */
55 | .highlight .sr { color: #33AAAA } /* Literal.String.Regex */
56 | .highlight .s1 { color: #CC3300 } /* Literal.String.Single */
57 | .highlight .ss { color: #FFCC33 } /* Literal.String.Symbol */
58 | .highlight .bp { color: #336666 } /* Name.Builtin.Pseudo */
59 | .highlight .vc { color: #003333 } /* Name.Variable.Class */
60 | .highlight .vg { color: #003333 } /* Name.Variable.Global */
61 | .highlight .vi { color: #003333 } /* Name.Variable.Instance */
62 | .highlight .il { color: #FF6600 } /* Literal.Number.Integer.Long */
63 | 
64 | .type-csharp .highlight .k { color: #0000FF }
65 | .type-csharp .highlight .kt { color: #0000FF }
66 | .type-csharp .highlight .nf { color: #000000; font-weight: normal }
67 | .type-csharp .highlight .nc { color: #2B91AF }
68 | .type-csharp .highlight .nn { color: #000000 }
69 | .type-csharp .highlight .s { color: #A31515 }
70 | .type-csharp .highlight .sc { color: #A31515 }
71 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
  1 | /* global module:false*/
  2 | module.exports = function(grunt) {
  3 | 
  4 |   var _ = grunt.util._;
  5 |   var m = require('marked');
  6 |   var marked = m.marked;
  7 |   // var hl = require('highlight').Highlight;
  8 |   var hl = require('node-syntaxhighlighter');
  9 | 
 10 |   marked.setOptions({
 11 |     highlight: function(code, lang) {
 12 | 
 13 |       lang = hl.getLanguage(lang);
 14 | 
 15 |       return hl.highlight(code, lang);
 16 |     },
 17 |     gfm: true
 18 |   });
 19 | 
 20 |   // Project configuration.
 21 |   grunt.initConfig({
 22 |     pkg: grunt.file.readJSON('jcarousellite.jquery.json'),
 23 |     bowerjson: './bower.json',
 24 |     meta: {
 25 |       banner: '/*!<%= "\\n" %>' +
 26 |           ' * <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
 27 |           '<%= grunt.template.today("yyyy-mm-dd")  + "\\n" %>' +
 28 |           '<%= pkg.homepage ? " * " + pkg.homepage + "\\n" : "" %>' +
 29 |           ' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>' +
 30 |           '<%= "\\n" %>' +
 31 |           ' * based on the original by Ganeshji Marwaha (gmarwaha.com)' +
 32 |           '<%= "\\n" %>' +
 33 |           ' * Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %>' +
 34 |           ' (<%= _.pluck(pkg.licenses, "url").join(", ") %>)' +
 35 |           '<%= "\\n" %>' + ' */' +
 36 |           '<%= "\\n\\n" %>'
 37 |     },
 38 |     concat: {
 39 |       all: {
 40 |         src: ['src/jquery.<%= pkg.name %>.js'],
 41 |         dest: '<%= pkg.name %>.js'
 42 |       },
 43 |       options: {
 44 |         stripBanners: true,
 45 |         banner: '<%= meta.banner %>'
 46 |       }
 47 |     },
 48 |     uglify: {
 49 |       all: {
 50 |         files: {
 51 |           '<%= pkg.name %>.min.js': ['<%= concat.all.dest %>']
 52 |         },
 53 |         options: {
 54 |           preserveComments: false,
 55 |           banner: '<%= meta.banner %>'
 56 |         }
 57 |       }
 58 |     },
 59 |     watch: {
 60 |       scripts: {
 61 |         files: '<%= jshint.all %>',
 62 |         tasks: ['jshint']
 63 |       },
 64 |       docs: {
 65 |         files: ['readme.md', 'lib/tpl/**/*.tpl', 'Gruntfile.js'],
 66 |         tasks: ['docs']
 67 |       }
 68 |     },
 69 |     eslint: {
 70 |       all: ['Gruntfile.js', 'src/**/*.js'],
 71 |       options: {
 72 |         configFile: '.eslintrc.js'
 73 |       }
 74 |     },
 75 |     jshint: {
 76 |       all: ['Gruntfile.js', 'src/**/*.js'],
 77 |       options: {
 78 |         curly: true,
 79 |         // eqeqeq: true,
 80 |         // immed: true,
 81 |         latedef: true,
 82 |         newcap: true,
 83 |         noarg: true,
 84 |         sub: true,
 85 |         undef: true,
 86 |         boss: true,
 87 |         eqnull: true,
 88 |         browser: true,
 89 |         globals: {
 90 |           jQuery: true,
 91 |           require: false
 92 |         }
 93 |       }
 94 |     },
 95 |     version: {
 96 |       all: {
 97 |         src: ['src/*.js', '*.json']
 98 |       },
 99 |       banner: {
100 |         src: ['<%= pkg.name %>.js'],
101 |         options: {
102 |           prefix: 'Lite - v'
103 |         }
104 |       }
105 |     }
106 |   });
107 | 
108 |   grunt.registerMultiTask('setshell', 'Set grunt shell commands', function() {
109 |     var settings, cmd;
110 |     var tgt = this.target;
111 |     var cmdLabel = 'shell.' + tgt + '.command';
112 |     var file = this.data.file;
113 |     var append = this.data.cmdAppend || '';
114 | 
115 |     if (!grunt.file.exists(file)) {
116 |       grunt.warn('File does not exist: ' + file);
117 |     }
118 | 
119 |     settings = grunt.file.readJSON(file);
120 | 
121 |     if (!settings[tgt]) {
122 |       grunt.warn('No ' + tgt + ' property found in ' + file);
123 |     }
124 | 
125 |     cmd = settings[tgt] + append;
126 |     grunt.config(cmdLabel, cmd);
127 |     grunt.log.writeln(('Setting ' + cmdLabel + ' to:').cyan);
128 | 
129 |     grunt.log.writeln(cmd);
130 | 
131 |   });
132 | 
133 |   grunt.registerTask('bower', 'update bower.json', function() {
134 |     var comp = grunt.config('bowerjson');
135 |     var pkg = grunt.file.readJSON('jcarousellite.jquery.json');
136 |     var json = {};
137 | 
138 |     ['name', 'version', 'title', 'description', 'author', 'licenses', 'dependencies'].forEach(function(el) {
139 |       json[el] = pkg[el];
140 |     });
141 | 
142 |     _.extend(json, {
143 |       main: grunt.config('concat.all.dest'),
144 |       ignore: [
145 |         'demo/',
146 |         'lib/',
147 |         'test/',
148 |         'src/',
149 |         'Gruntfile.js',
150 |         'package.json',
151 |         'jcarousellite.jquery.json'
152 |       ]
153 |     });
154 |     json.name = 'jquery.' + json.name;
155 | 
156 |     grunt.file.write(comp, JSON.stringify(json, null, 2));
157 |     grunt.log.writeln('File "' + comp + ' updated."');
158 |   });
159 | 
160 |   grunt.registerTask('docs', function() {
161 |     var doc;
162 |     var readme = grunt.file.read('readme.md');
163 |     var head = grunt.template.process(grunt.file.read('lib/tpl/header.tpl'));
164 |     var foot = grunt.file.read('lib/tpl/footer.tpl');
165 | 
166 |     // Convert to markdown (with the highlight.js processing in setOptions.highlight)
167 |     doc = marked(readme);
168 |     // Remove function foo() {} after processing
169 |     // doc = doc.replace(/<span class="keyword">function<\/span> foo\(\) \{\}(\n)?/g, '');
170 | 
171 |     grunt.file.write('index.html', head + doc + foot);
172 | 
173 |   });
174 | 
175 |   grunt.registerTask('build', ['eslint', 'version', 'concat', 'bower', 'uglify', 'docs']);
176 |   grunt.registerTask('patch', ['eslint', 'version::patch', 'concat', 'bower', 'uglify']);
177 | 
178 |   grunt.loadNpmTasks('grunt-contrib-jshint');
179 |   grunt.loadNpmTasks('grunt-contrib-uglify');
180 |   grunt.loadNpmTasks('grunt-contrib-concat');
181 |   grunt.loadNpmTasks('grunt-contrib-watch');
182 |   grunt.loadNpmTasks('grunt-eslint');
183 |   grunt.loadNpmTasks('grunt-version');
184 | };
185 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>jCarousel Lite Plugin Tests</title>
  5 |   <link rel="stylesheet" href="qunit/qunit.css" media="screen">
  6 |   <style type="text/css">
  7 |   body {
  8 |     font-size: 13px;
  9 |     font-family: Helvetica, Arial, Verdana, sans-serif;
 10 |     line-height: 1.3em;
 11 |   }
 12 |   .container {
 13 |     width: 840px;
 14 |     margin: 0 auto;
 15 |   }
 16 |   .slideshow {
 17 |     width: 800px;
 18 |     overflow: hidden;
 19 |     margin-bottom: 20px;
 20 |     border: 5px solid #999;
 21 |   }
 22 |   .slides {
 23 |     position: relative;
 24 |     margin: 0;
 25 |     padding: 0;
 26 |     list-style-type: none;
 27 |   }
 28 |   .slide {
 29 |     float: left;
 30 |     width: 360px;
 31 |     height: 150px;
 32 |     padding: 20px;
 33 |   }
 34 |   #qunit-fixture {
 35 | /*    position: static;
 36 |     top: 0;
 37 |     left: 0;
 38 | */
 39 |   }
 40 |   </style>
 41 |     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 42 |     <script>!window.jQuery && document.write(unescape('%3Cscript src="../lib/jquery/jquery.js"%3E%3C/script%3E'));</script>
 43 | 
 44 |   <script src="qunit/qunit.js"></script>
 45 |   <script src="../jcarousellite.js"></script>
 46 |   <script src="tests.js"></script>
 47 | 
 48 | </head>
 49 | <body>
 50 |   <h1 id="qunit-header">jCarousel Lite Plugin Tests</h1>
 51 |   <h2 id="qunit-banner"></h2>
 52 |   <div id="qunit-testrunner-toolbar"></div>
 53 |   <h2 id="qunit-userAgent"></h2>
 54 |   <ol id="qunit-tests"></ol>
 55 |   <div id="qunit-fixture">
 56 |     <div class="slideshow">
 57 |       <ul class="slides">
 58 | 
 59 |         <li class="slide">
 60 |           <div class="img-wrapper">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 61 |           </div>
 62 |         </li>
 63 | 
 64 |         <li class="slide">
 65 |           <div class="img-wrapper">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 66 |             <span class="description"><span>Green Roof</span></span>
 67 |           </div>
 68 |         </li>
 69 | 
 70 | 
 71 |         <li class="slide">
 72 |           <div class="img-wrapper"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 73 |             <span class="description"><span>Zeeland</span></span>
 74 |           </div>
 75 |         </li>
 76 | 
 77 |         <li class="slide">
 78 |           <div class="img-wrapper">
 79 |             In culpa qui officia deserunt mollit anim id est laborum.
 80 |             <span class="description"><span>CityFlats Hotel</span></span>
 81 | 
 82 |           </div>
 83 |         </li>
 84 | 
 85 |         <li class="slide">
 86 |           <div class="img-wrapper">                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 87 |           </div>
 88 |         </li>
 89 | 
 90 |       </ul>
 91 |       <a href="#" class="prev">&lt;</a>
 92 |       <a href="#" class="next">&gt;</a>
 93 |     </div>
 94 | 
 95 |     <div class="slideshow">
 96 |       <ul class="slides">
 97 | 
 98 |         <li class="slide">
 99 |           <div class="img-wrapper">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
100 |           </div>
101 |         </li>
102 | 
103 |         <li class="slide">
104 |           <div class="img-wrapper">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
105 |             <span class="description"><span>GRCC Green Roof</span></span>
106 |           </div>
107 |         </li>
108 | 
109 | 
110 |         <li class="slide">
111 |           <div class="img-wrapper"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
112 |             <span class="description"><span>Zeeland Natatorium</span></span>
113 |           </div>
114 |         </li>
115 | 
116 |         <li class="slide">
117 |           <div class="img-wrapper">
118 |             In culpa qui officia deserunt mollit anim id est laborum.
119 |             <span class="description"><span>CityFlats Hotel</span></span>
120 | 
121 |           </div>
122 |         </li>
123 | 
124 |         <li class="slide">
125 |           <div class="img-wrapper">                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
126 |             <span class="description"><span>Calvin College</span></span>
127 |           </div>
128 |         </li>
129 | 
130 |       </ul>
131 |       <a href="#" class="prev">&lt;</a>
132 |       <a href="#" class="next">&gt;</a>
133 |     </div>
134 | 
135 |   </div>
136 | </body>
137 | 
138 | </html>
139 | 


--------------------------------------------------------------------------------
/demo/velocity.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>demo</title>
  6 | <style type="text/css">
  7 | body {
  8 |   font-size: 13px;
  9 |   font-family: Helvetica, Arial, Verdana, sans-serif;
 10 |   line-height: 1.3em;
 11 | }
 12 | .container {
 13 |   width: 840px;
 14 |   margin: 0 auto;
 15 | }
 16 | .slideshow {
 17 |   width: 800px;
 18 |   overflow: hidden;
 19 |   padding: 0 20px;
 20 |   margin-bottom: 20px;
 21 |   border: 5px solid #999;
 22 | }
 23 | .slides {
 24 |   margin: 0;
 25 |   padding: 0;
 26 |   list-style-type: none;
 27 | }
 28 | .slide {
 29 |   float: left;
 30 |   width: 360px;
 31 |   height: 150px;
 32 |   padding: 20px;
 33 | }
 34 | 
 35 | .nav a {
 36 |   display: inline-block;
 37 |   margin: 0;
 38 |   padding: .2em .5em;
 39 |   color: #00A3CB;
 40 |   text-decoration: none;
 41 | 
 42 | }
 43 | .nav a:hover {
 44 |   color: #00436B;
 45 | }
 46 | .nav a.vis,
 47 | .nav a.vis:hover {
 48 |   background-color: #aaa;
 49 |   color: white;
 50 | }
 51 | .nav a.active,
 52 | .nav a.active:hover {
 53 |   background-color: #00A3CB;
 54 |   color: white;
 55 | }
 56 | </style>
 57 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 58 |   <script src="../lib/jquery.velocity.js"></script>
 59 |   <script src="../src/jquery.jcarousellite.js"></script>
 60 |   <script>
 61 |     $(document).ready(function() {
 62 |       var carousel1Options = {
 63 |         // auto: true,
 64 |         visible: 2,
 65 |         speed: 300,
 66 |         pause: true,
 67 |         btnPrev: function() {
 68 |           return $(this).find('.prev');
 69 |         },
 70 |         btnNext: function() {
 71 |           return $(this).find('.next');
 72 |         }
 73 |       };
 74 | 
 75 |       var carousel2Options = {
 76 |         auto: true,
 77 |         visible: 2,
 78 |         speed: 3000,
 79 |         easing: 'linear',
 80 |         timeout: 0,
 81 |         pause: true,
 82 |         btnGo: $('div.nav').find('a')
 83 |       };
 84 | 
 85 |       var $slideshows = $('.slideshow');
 86 | 
 87 |       $slideshows.eq(0).jCarouselLite(carousel1Options);
 88 | 
 89 |       $slideshows.eq(1).jCarouselLite(carousel2Options);
 90 | 
 91 | 
 92 | 
 93 | 
 94 |     });
 95 | 
 96 |   </script>
 97 | </head>
 98 | <body>
 99 | <div class="container">
100 |   <p><a href="responsive.html">"Responsive" demo</a></p>
101 |   <div class="slideshow">
102 |     <ul class="slides">
103 | 
104 |       <li class="slide">
105 |         <div class="img-wrapper">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
106 |         </div>
107 |       </li>
108 | 
109 |       <li class="slide">
110 |         <div class="img-wrapper">2 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
111 |           <span class="description"><span>Green Roof</span></span>
112 |         </div>
113 |       </li>
114 | 
115 | 
116 |       <li class="slide">
117 |         <div class="img-wrapper">3 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
118 |           <span class="description"><span>Zeeland</span></span>
119 |         </div>
120 |       </li>
121 | 
122 |       <li class="slide">
123 |         <div class="img-wrapper">4
124 |           In culpa qui officia deserunt mollit anim id est laborum.
125 |           <span class="description"><span>CityFlats Hotel</span></span>
126 | 
127 |         </div>
128 |       </li>
129 | 
130 |       <li class="slide">
131 |         <div class="img-wrapper">5                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
132 |         </div>
133 |       </li>
134 | 
135 |     </ul>
136 |     <a href="#" class="prev">&lt;</a>
137 |     <a href="#" class="next">&gt;</a>
138 |   </div>
139 | 
140 |   <div class="slideshow">
141 |     <ul class="slides">
142 | 
143 |       <li class="slide">
144 |         <div class="img-wrapper">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
145 |         </div>
146 |       </li>
147 | 
148 |       <li class="slide">
149 |         <div class="img-wrapper">2 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
150 |           <span class="description"><span>GRCC Green Roof</span></span>
151 |         </div>
152 |       </li>
153 | 
154 | 
155 |       <li class="slide">
156 |         <div class="img-wrapper">3 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
157 |           <span class="description"><span>Zeeland Natatorium</span></span>
158 |         </div>
159 |       </li>
160 | 
161 |       <li class="slide">
162 |         <div class="img-wrapper">4
163 |           In culpa qui officia deserunt mollit anim id est laborum.
164 |           <span class="description"><span>CityFlats Hotel</span></span>
165 | 
166 |         </div>
167 |       </li>
168 | 
169 |       <li class="slide">
170 |         <div class="img-wrapper">5                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
171 |           <span class="description"><span>Calvin College</span></span>
172 |         </div>
173 |       </li>
174 | 
175 |     </ul>
176 |     <div class="nav">
177 |       <a href="#">1</a>
178 |       <a href="#">2</a>
179 |       <a href="#">3</a>
180 |       <a href="#">4</a>
181 |       <a href="#">5</a>
182 |     </div>
183 |   </div>
184 | 
185 | </div>
186 | </body>
187 | </html>
188 | 


--------------------------------------------------------------------------------
/jcarousellite.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * jCarousel Lite - v1.9.3 - 2015-02-16
3 |  * http://kswedberg.github.com/jquery-carousel-lite/
4 |  * Copyright (c) 2015 Karl Swedberg
5 |  * based on the original by Ganeshji Marwaha (gmarwaha.com)
6 |  * Licensed MIT (http://kswedberg.github.com/jquery-carousel-lite/blob/master/LICENSE-MIT)
7 |  */
8 | 
9 | !function(a){function b(a,b){return b.autoStop&&(b.circular?b.autoStop:Math.min(a,b.autoStop))}function c(a){this.id&&(this.id+=a)}a.jCarouselLite={version:"1.9.3",curr:0},a.fn.anim="undefined"!=typeof a.fn.velocity?a.fn.velocity:a.fn.animate,a.fn.jCarouselLite=function(d){var e=a.extend(!0,{},a.fn.jCarouselLite.defaults,d),f=Math.ceil,g=Math.abs;return this.each(function(){function d(){return n.slice(p).slice(0,G)}function h(b,c){if(v)return!1;c=c||{};var f=p,g=b>p,h="undefined"!=typeof c.speed?c.speed:e.speed,i=c.offset||0;return e.beforeStart&&e.beforeStart.call(B,d(),g,c),e.circular?(b>p&&b>o-G?(b-=p,p%=E,b=p+b,C.css(w,-p*u.liSize-i)):p>b&&0>b&&(p+=E,b+=E,C.css(w,-p*u.liSize-i)),p=b+b%1):(0>b?b=0:b>o-H&&(b=o-H),p=b,0===p&&e.first&&e.first.call(this,d(),g),p===o-H&&e.last&&e.last.call(this,d(),g),e.btnPrev&&e.$btnPrev.toggleClass(e.btnDisabledClass,0===p),e.btnNext&&e.$btnNext.toggleClass(e.btnDisabledClass,p===o-H)),S(p,L),a.jCarouselLite.curr=p,f!==p||c.force?(v=!0,x[w]=-(p*u.liSize),C.anim(x,h,e.easing,function(){e.afterEnd&&e.afterEnd.call(B,d(),g,c),v=!1}),p):(e.afterEnd&&e.afterEnd.call(B,d(),g,c),p)}var i,j,k,l,m,n,o,p,q,r,s,t="ontouchend"in document,u={div:{},ul:{},li:{}},v=!1,w=e.vertical?"top":"left",x={},y=e.vertical?"height":"width",z=e.vertical?"outerHeight":"outerWidth",A=this,B=a(this),C=B.find(e.containerSelector).eq(0),D=C.children(e.itemSelector),E=D.length,F=e.visible,G=f(F),H=Math.floor(F),I=Math.min(e.start,E-1),J=1,K=0,L={},M={},N={},O=e.vertical?"y":"x",P=e.vertical?"x":"y",Q=e.init.call(this,e,D);if(Q!==!1){var R=function(){i&&i.length&&(i.remove(),j.remove()),D=C.children(e.liSelector),E=D.length,i=D.slice(E-G).clone(!0).each(c),j=D.slice(0,G).clone(!0).each(c),C.prepend(i).append(j),n=C.children(e.liSelector),o=n.length};B.data("dirjc",J),B.data(w+"jc",B.css(w)),e.circular?(R(),I+=G,K=G):(n=C.children(e.liSelector),o=n.length),e.btnGo&&e.btnGo.length&&(s=a(a.isArray(e.btnGo)&&"string"==typeof e.btnGo[0]?e.btnGo.join():e.btnGo),s.each(function(b){a(this).bind("click.jc",function(a){a.preventDefault();var c={btnGo:this,btnGoIndex:b};return h(e.circular?F+b:b,c)})}),L.go=1);var S=function(a,b){a=f(a),n.filter("."+e.activeClass).removeClass(e.activeClass),n.eq(a).addClass(e.activeClass);var c=(a-K)%E,d=c+H;return b.go&&(s.removeClass(e.activeClass).removeClass(e.visibleClass),s.eq(c).addClass(e.activeClass),s.slice(c,c+H).addClass(e.visibleClass),d>s.length&&s.slice(0,d-s.length).addClass(e.visibleClass)),b.pager&&(k.removeClass(e.activeClass),k.eq(f(c/F)).addClass(e.activeClass)),c};p=I,a.jCarouselLite.curr=p;var T=function(a){var b,c,d;return a?(u.div[y]="",u.li={width:"",height:""},u):(b=n[z](!0),c=b*o,d=b*F,u.div[y]=d+"px",u.ul[y]=c+"px",u.ul[w]=-(p*b)+"px",u.li={width:n.width(),height:n.height()},u.liSize=b,u)},U=function(b){var c,d,f={div:{visibility:"visible",position:"relative",zIndex:2,left:"0"},ul:{margin:"0",padding:"0",position:"relative",listStyleType:"none",zIndex:1},li:{overflow:e.vertical?"hidden":"visible","float":e.vertical?"none":"left"}};b&&(c=T(!0),B.css(c.div),C.css(c.ul),n.css(c.li)),c=T(),e.autoCSS&&a.extend(!0,c,f),e.autoWidth&&(d=parseInt(B.css(y),10),u.liSize=d/e.visible,c.li[y]=u.liSize-(n[z](!0)-parseInt(n.css(y),10)),c.ul[y]=u.liSize*o+"px",c.ul[w]=-(p*u.liSize)+"px",c.div[y]=d),e.autoCSS&&(n.css(c.li),C.css(c.ul),B.css(c.div))};U();var V=0,W=b(E,e),X="number"==typeof e.auto?e.auto:e.scroll,Y=function(){A.setAutoAdvance=setTimeout(function(){(!W||W>V)&&(J=B.data("dirjc"),h(p+J*X,{auto:!0}),V++,Y())},e.timeout)};if(a.each(["btnPrev","btnNext"],function(b,c){e[c]&&(e["$"+c]=a.isFunction(e[c])?e[c].call(B[0]):a(e[c]),e["$"+c].bind("click.jc",function(a){a.preventDefault();var c=0===b?p-e.scroll:p+e.scroll;return e.directional&&B.data("dirjc",b?1:-1),h(c)}))}),e.circular||(e.btnPrev&&0===I&&e.$btnPrev.addClass(e.btnDisabledClass),e.btnNext&&I+H>=o&&e.$btnNext.addClass(e.btnDisabledClass)),e.autoPager){l=f(E/F),k=[];for(var Z=0;l>Z;Z++)k.push('<li><a href="#">'+(Z+1)+"</a></li>");k.length>1&&(k=a("<ul>"+k.join("")+"</ul>").appendTo(e.autoPager).find("li"),k.find("a").each(function(b){a(this).bind("click.jc",function(a){a.preventDefault();var c=b*F;return e.circular&&(c+=F),h(c)})}),L.pager=1)}S(I,L),e.mouseWheel&&B.mousewheel&&B.bind("mousewheel.jc",function(a,b){return h(b>0?p-e.scroll:p+e.scroll)}),e.pause&&e.auto&&!t&&B.bind("mouseenter.jc",function(){B.trigger("pauseCarousel.jc")}).bind("mouseleave.jc",function(){B.trigger("resumeCarousel.jc")}),e.auto&&Y(),a.jCarouselLite.vis=d,B.bind("go.jc",function(a,b,c){"undefined"==typeof b&&(b="+=1");var d="string"==typeof b&&/(\+=|-=)(\d+)/.exec(b);d?b="-="===d[1]?p-1*d[2]:p+1*d[2]:b+=I,h(b,c)}).bind("startCarousel.jc",function(){clearTimeout(A.setAutoAdvance),A.setAutoAdvance=void 0,B.trigger("go","+="+e.scroll),Y(),B.removeData("pausedjc").removeData("stoppedjc")}).bind("resumeCarousel.jc",function(a,b){if(!A.setAutoAdvance){clearTimeout(A.setAutoAdvance),A.setAutoAdvance=void 0;var c=B.data("stoppedjc");(b||!c)&&(Y(),B.removeData("pausedjc"),c&&B.removeData("stoppedjc"))}}).bind("pauseCarousel.jc",function(){clearTimeout(A.setAutoAdvance),A.setAutoAdvance=void 0,B.data("pausedjc",!0)}).bind("stopCarousel.jc",function(){clearTimeout(A.setAutoAdvance),A.setAutoAdvance=void 0,B.data("stoppedjc",!0)}).bind("refreshCarousel.jc",function(a,b){b&&e.circular&&R(),U(e.autoCSS)}).bind("endCarousel.jc",function(){A.setAutoAdvance&&(clearTimeout(A.setAutoAdvance),A.setAutoAdvance=void 0),e.btnPrev&&e.$btnPrev.addClass(e.btnDisabledClass).unbind(".jc"),e.btnNext&&e.$btnNext.addClass(e.btnDisabledClass).unbind(".jc"),e.btnGo&&a.each(e.btnGo,function(b,c){a(c).unbind(".jc")}),e.circular&&(n.slice(0,G).remove(),n.slice(-G).remove()),a.each([w+"jc","pausedjc","stoppedjc","dirjc"],function(a,b){B.removeData(b)}),B.unbind(".jc")}),r={touchstart:function(a){N.x=0,N.y=0,M.x=a.targetTouches[0].pageX,M.y=a.targetTouches[0].pageY,M[w]=parseFloat(C.css(w)),M.time=+new Date},touchmove:function(a){var b=a.targetTouches.length;1===b?(N.x=a.targetTouches[0].pageX,N.y=a.targetTouches[0].pageY,x[w]=M[w]+(N[O]-M[O]),C.css(x),e.preventTouchWindowScroll&&a.preventDefault()):(N.x=M.x,N.y=M.y)},touchend:function(){if(N.x){var a=M[O]-N[O],b=g(a),c=b>e.swipeThresholds[O],d=g(M[P]-N[P])<e.swipeThresholds[P],f=+new Date-M.time,h=f<e.swipeThresholds.time,i=a>0?"+=":"-=",j=i+e.scroll,k={force:!0};h&&c&&d?k.speed=e.speed/2:!h&&b<u.liSize/2||!c||h&&!d?j="+=0":!h&&b>u.liSize/2&&(j=Math.round(b/u.liSize),j=i+(j>e.visible?e.visible:j),k.offset=a),B.trigger("go.jc",[j,k]),N={}}},handle:function(a){a=a.originalEvent,r[a.type](a)}},t&&e.swipe&&B.bind("touchstart.jc touchmove.jc touchend.jc",r.handle),e.responsive&&(q=e.autoCSS,a(window).bind("resize",function(){q&&(C.width(2*C.width()),q=!1),clearTimeout(m),m=setTimeout(function(){B.trigger("refreshCarousel.jc",[!0]),q=e.autoCSS},100)}))}}),this},a.fn.jCarouselLite.defaults={containerSelector:"ul",itemSelector:"li",btnPrev:null,btnNext:null,btnGo:null,autoPager:null,btnDisabledClass:"disabled",activeClass:"active",visibleClass:"vis",mouseWheel:!1,speed:200,easing:null,timeout:4e3,auto:!1,directional:!1,autoStop:!1,pause:!0,vertical:!1,circular:!0,visible:3,start:0,scroll:1,autoCSS:!0,responsive:!1,autoWidth:!1,swipe:!0,swipeThresholds:{x:80,y:40,time:150},preventTouchWindowScroll:!0,init:function(){},first:null,last:null,beforeStart:null,afterEnd:null}}(jQuery);


--------------------------------------------------------------------------------
/test/tests.js:
--------------------------------------------------------------------------------
  1 | /*global module:false,test:false,equal:false,deepEqual:false,asyncTest:false,start:false */
  2 | jQuery(document).ready(function($) {
  3 | 
  4 |   module('carousels', {
  5 |     setup: function() {
  6 | 
  7 |       $('.slideshow').jCarouselLite({
  8 |         visible: 2,
  9 |         speed: 2
 10 |       });
 11 |       this.slideshow = $('div.slideshow');
 12 |       this.slides = $('ul.slides');
 13 |     }
 14 |   });
 15 | 
 16 |   test('starting position', function() {
 17 | 
 18 |     equal($('ul.slides').eq(0).css('left'), '-800px', 'first carousel starts at correct position');
 19 |     equal($('ul.slides').eq(1).css('left'), '-800px', 'second carousel starts at correct position');
 20 |   });
 21 | 
 22 |   asyncTest('go', function() {
 23 |     var s = this.slides;
 24 |     s.eq(1).trigger('go', 1);
 25 | 
 26 |     setTimeout(function() {
 27 |       equal(s.eq(1).css('left'), '-1200px', 'second carousel went to index 1 (2nd item)');
 28 |       start();
 29 |     }, 250);
 30 |   });
 31 | 
 32 |   asyncTest('go to 0', function() {
 33 |     var s = this.slides;
 34 |     this.slideshow.eq(1).trigger('go', 0);
 35 | 
 36 |     setTimeout(function() {
 37 |       equal(s.eq(1).css('left'), '-800px', 'second carousel went back to index 0 (1st item)');
 38 |       start();
 39 |     }, 250);
 40 |   });
 41 | 
 42 |   module('custom start and relative triggered go', {
 43 |     setup: function() {
 44 | 
 45 |       $('.slideshow').jCarouselLite({
 46 |         start: 4,
 47 |         visible: 2,
 48 |         speed: 2
 49 |       });
 50 |       this.slideshow = $('div.slideshow').eq(1);
 51 |       this.slides = $('ul.slides').eq(1);
 52 |     }
 53 |   });
 54 | 
 55 |   test('starting position', function() {
 56 |     equal(this.slides.css('left'), '-2400px', 'second carousel starts at index 4 (5th item)');
 57 |   });
 58 | 
 59 | 
 60 |   asyncTest('go foward 2 (wrap around)', function() {
 61 |     var slides = this.slides;
 62 |     this.slideshow.trigger('go', '+=2');
 63 | 
 64 |     setTimeout(function() {
 65 |       equal(slides.css('left'), '-1200px', 'second carousel advanced and wrapped around to index 1 (2nd item)');
 66 |       start();
 67 |     }, 750);
 68 |   });
 69 | 
 70 |   asyncTest('reset and go forward 4 (wrap around)', function() {
 71 |     var slides = this.slides;
 72 |     this.slideshow.trigger('go', '+=4');
 73 | 
 74 |     setTimeout(function() {
 75 |       equal(slides.css('left'), '-2000px', 'second carousel advanced and wrapped around to index 3 (4th item)');
 76 |       start();
 77 |     }, 750);
 78 |   });
 79 | 
 80 |   module('directional option', {
 81 |     setup: function() {
 82 | 
 83 |       this.slideshow = $('div.slideshow');
 84 |       this.slides = $('ul.slides');
 85 | 
 86 |       this.slideshow.jCarouselLite({
 87 |         auto: true,
 88 |         visible: 2,
 89 |         speed: 2,
 90 |         timeout: 200,
 91 |         directional: true,
 92 | 
 93 |         btnPrev: function() {
 94 |           return $(this).find('.prev');
 95 |         },
 96 |         btnNext: function() {
 97 |           return $(this).find('.next');
 98 |         }
 99 |       });
100 |     }
101 |   });
102 | 
103 |   asyncTest('change directions on prevBtn click', function() {
104 |     var s = this.slides;
105 |     this.slideshow.eq(1).find('.prev').trigger('click');
106 | 
107 |     setTimeout(function() {
108 |       equal(s.eq(0).css('left'), '-800px', 'first carousel stays at initial position');
109 |       equal(s.eq(1).css('left'), '-400px', 'second carousel goes to previous slide (last slide because circular)');
110 | 
111 |     }, 50);
112 | 
113 |     setTimeout(function() {
114 |       equal(s.eq(0).css('left'), '-1200px', 'first carousel autoscrolls forward');
115 |       equal(s.eq(1).css('left'), '0px', 'second carousel autoscrolls reverse');
116 |       start();
117 |     }, 250);
118 |   });
119 | 
120 | 
121 |   module('activeClass and visClass options', {
122 |     setup: function() {
123 |       this.slideshow = $('div.slideshow').eq(0);
124 |       this.slides = this.slideshow.find('ul.slides');
125 |       var btns = '';
126 |       var l = this.slides.children().length;
127 | 
128 |       for (var i = 0; i < l; i++) {
129 |         btns += '<a class="go" href="#">' + (i+1) + '</a>';
130 |       }
131 | 
132 |       this.slideshow.append('<div class="gonav">' + btns + '</div>');
133 | 
134 |       this.slideshow.jCarouselLite({
135 |         auto: true,
136 |         circular: false,
137 |         visible: 2,
138 |         speed: 2,
139 |         timeout: 200,
140 |         directional: true,
141 |         btnGo: $('a.go')
142 |       });
143 |     },
144 |     teardown: function() {
145 |       this.slideshow.trigger('endCarousel');
146 |     }
147 |   });
148 | 
149 |   asyncTest('active and vis classes correct when carousel auto-transitions', function() {
150 |     var slides = this.slides;
151 |     var vis = $('a.go.vis').map(function() {
152 |       return $(this).index();
153 |     }).get();
154 | 
155 |     equal(slides.find('li.active').index(), 0, 'first slide is initially active');
156 |     equal($('a.go.active').index(), 0, 'first "go button" is initially active');
157 |     deepEqual(vis, [0, 1], '2 "go buttons" represent initially visible items');
158 | 
159 |     setTimeout(function() {
160 |       equal(slides.find('li.active').index(), 1, 'second slide active after autoscrolling forward once');
161 |       equal($('a.go.active').index(), 1, 'second "go button" active after autoscrolling forward once');
162 |       vis = $('a.go.vis').map(function() {
163 |         return $(this).index();
164 |       }).get();
165 |       deepEqual(vis, [1, 2], '2 "go buttons" represent initially visible items');
166 |       start();
167 |     }, 300);
168 | 
169 |   });
170 | 
171 |   module('nav buttons', {
172 |     setup: function() {
173 |       this.slideshow = $('div.slideshow').eq(0);
174 |       this.slides = this.slideshow.find('ul.slides');
175 |       var btns = '';
176 |       var l = this.slides.children().length;
177 | 
178 |       for (var i = 0; i < l; i++) {
179 |         btns += '<a class="go" href="#">' + (i+1) + '</a>';
180 |       }
181 | 
182 |       this.slideshow.append('<div class="gonav">' + btns + '</div>');
183 |       this.slideshow.prepend('<div class="pagernav"></div>');
184 |     }
185 |   });
186 | 
187 |   asyncTest('correct carousel position after go button clicked', function() {
188 |     var s = this.slides;
189 |     this.slideshow.jCarouselLite({
190 |       auto: true,
191 |       visible: 2,
192 |       speed: 2,
193 |       timeout: 200,
194 |       directional: true,
195 |       btnGo: $('a.go')
196 |     });
197 | 
198 |     $('a.go').eq(2).triggerHandler('click');
199 |     setTimeout(function() {
200 |       equal(s.css('left'), '-1600px', 'clicked on button index 2, left prop accounts for 2 prepended slides');
201 |       $('a.go').eq(1).triggerHandler('click');
202 |       setTimeout(function() {
203 |         equal(s.css('left'), '-1200px', 'clicked on button index 1, left prop accounts for 2 prepended slides');
204 |         start();
205 |       }, 100);
206 |     }, 100);
207 |   });
208 | 
209 |   asyncTest('correct carousel position after autoPager nav button clicked', function() {
210 |     var pagernav = this.slideshow.find('div.pagernav');
211 |     var s = this.slides;
212 |     this.slideshow.trigger('endCarousel');
213 |     this.slideshow.jCarouselLite({
214 |       auto: false,
215 |       visible: 2,
216 |       speed: 2,
217 |       autoPager: this.slideshow.find('div.pagernav'),
218 |       timeout: 200,
219 |       btnGo: $('a.go')
220 |     });
221 | 
222 |     pagernav.find('a').eq(1).triggerHandler('click');
223 |     setTimeout(function() {
224 |       equal(s.css('left'), '-1600px', 'clicked on 2nd pager, left prop accounts for 2 prepended slides');
225 |       start();
226 |     }, 100);
227 |   });
228 | 
229 | 
230 | 
231 | });
232 | 


--------------------------------------------------------------------------------
/demo/refresh.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>demo</title>
  6 | <style type="text/css">
  7 | body {
  8 |   font-size: 13px;
  9 |   font-family: Helvetica, Arial, Verdana, sans-serif;
 10 |   line-height: 1.3em;
 11 | }
 12 | .container {
 13 |   width: 840px;
 14 |   margin: 0 auto;
 15 | }
 16 | .slideshow {
 17 |   width: 800px;
 18 |   overflow: hidden;
 19 |   padding: 0 20px;
 20 |   margin-bottom: 20px;
 21 |   border: 5px solid #999;
 22 | }
 23 | .slides {
 24 |   margin: 0;
 25 |   padding: 0;
 26 |   list-style-type: none;
 27 | }
 28 | .slide {
 29 |   float: left;
 30 |   width: 360px;
 31 |   height: 150px;
 32 |   padding: 20px;
 33 | }
 34 | 
 35 | .nav a {
 36 |   display: inline-block;
 37 |   margin: 0;
 38 |   padding: .2em .5em;
 39 |   color: #00A3CB;
 40 |   text-decoration: none;
 41 | 
 42 | }
 43 | .nav a:hover {
 44 |   color: #00436B;
 45 | }
 46 | .nav a.vis,
 47 | .nav a.vis:hover {
 48 |   background-color: #aaa;
 49 |   color: white;
 50 | }
 51 | .nav a.active,
 52 | .nav a.active:hover {
 53 |   background-color: #00A3CB;
 54 |   color: white;
 55 | }
 56 | .ct {
 57 |   color: #999;
 58 | }
 59 | </style>
 60 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 61 | 
 62 |   <script src="../src/jquery.jcarousellite.js"></script>
 63 |   <script>
 64 |     $(document).ready(function() {
 65 |       var carouselOptions = {
 66 |         // auto: true,
 67 |         visible: 2,
 68 |         speed: 300,
 69 |         pause: true,
 70 |         btnPrev: function() {
 71 |           return $(this).find('.prev');
 72 |         },
 73 |         btnNext: function() {
 74 |           return $(this).find('.next');
 75 |         }
 76 |       };
 77 | 
 78 | 
 79 |       var $slideshow = $('.slideshow');
 80 | 
 81 |       $slideshow.jCarouselLite(carouselOptions);
 82 | 
 83 |       $('button.prepend').on('click', function() {
 84 |         var curr = $.jCarouselLite.curr;
 85 |         var newSlide = '<li class="slide prepended">' + $('#to-prepend').html() + '</li>';
 86 |         $slideshow.children('ul').prepend(newSlide);
 87 | 
 88 |         $slideshow.trigger('refreshCarousel', ['all']);
 89 |         $slideshow.trigger('go', [curr + 1 - 2, {speed: 0}]);
 90 |       });
 91 | 
 92 |       $('button.insert').on('click', function() {
 93 |         var curr = $.jCarouselLite.curr;
 94 |         var newSlide = '<li class="slide">' + $('#to-insert').html() + '</li>';
 95 | 
 96 |         // Insert the slide after the current slide
 97 |         $slideshow.find('li.slide').eq(curr).after(newSlide);
 98 | 
 99 |         // Trigger the refresh with the second argument set to <code>['all']</code>
100 |         $slideshow.trigger('refreshCarousel', ['all']);
101 |       });
102 |     });
103 | 
104 |   </script>
105 | </head>
106 | <body>
107 | <div class="container">
108 |   <p><a href="responsive.html">"Responsive" demo</a></p>
109 |   <div class="slideshow">
110 |     <ul class="slides">
111 | 
112 |       <li class="slide">
113 |         <div class="img-wrapper">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
114 |         </div>
115 |       </li>
116 | 
117 |       <li class="slide">
118 |         <div class="img-wrapper">2 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
119 |           <span class="description"><span>Green Roof</span></span>
120 |         </div>
121 |       </li>
122 | 
123 | 
124 |       <li class="slide">
125 |         <div class="img-wrapper">3 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
126 |           <span class="description"><span>Zeeland</span></span>
127 |         </div>
128 |       </li>
129 | 
130 |       <li class="slide">
131 |         <div class="img-wrapper">4
132 |           In culpa qui officia deserunt mollit anim id est laborum.
133 |           <span class="description"><span>CityFlats Hotel</span></span>
134 | 
135 |         </div>
136 |       </li>
137 | 
138 |       <li class="slide">
139 |         <div class="img-wrapper">5
140 |         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
141 |         </div>
142 |       </li>
143 | 
144 |     </ul>
145 |     <a href="#" class="prev">&lt;</a>
146 |     <a href="#" class="next">&gt;</a>
147 |   </div>
148 |   <div style="float:left; width:45%;">
149 |     <button class="prepend">Insert new first slide</button>
150 |     <p><strong>Text that will be inserted as the first slide:</strong></p>
151 |     <div id="to-prepend">
152 |       Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
153 |     </div>
154 |     <p><strong>And the code to do it:</strong></p>
155 |     <pre style="width:100%; overflow:auto;"><code>
156 | $('button.insert').on('click', function() {
157 |   var curr = $.jCarouselLite.curr;
158 |   var newSlide = '&lt;li class="slide prepended">' +
159 |       $('#to-prepend').html() +
160 |       '&lt;/li>';
161 | 
162 |   <span class="ct">// Insert the slide at the beginning</span>
163 |   $slideshow.children('ul').prepend(newSlide);
164 | 
165 |   <span class="ct">// Trigger the refresh
166 |   // with the second argument set to ['all']</span>
167 |   $slideshow.trigger('refreshCarousel', ['all']);
168 |   <span class="ct">
169 |   // Now, since the slide was inserted *before* the current one,
170 |   // we have to immediately adjust the carousel position
171 |   // if we want it to remain at the same slide.
172 |   //
173 |   // Add 1 to the current position for the new slide,
174 |   // and subtract 1 for *each* visible slide
175 |   // (because the carousel is circular and
176 |   // the plugin thus adds "padding" slides)
177 |   </span>
178 |   $slideshow
179 |   .trigger('go', [curr + 1 - 2, {speed: 0}]);
180 | });
181 |     </code></pre>
182 |   </div>
183 |   <div style="float:right;width:45%;">
184 |     <button class="insert">Insert new slide</button>
185 |     <p><strong>Text that will be inserted in a new slide after the first currently visible slide:</strong></p>
186 |     <div id="to-insert">
187 |       Completely synergize resource intensive relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
188 |     </div>
189 |     <p><strong>And the code to do it:</strong></p>
190 |     <pre><code>
191 | $('button.insert').on('click', function() {
192 |   var curr = $.jCarouselLite.curr;
193 |   var newSlide = '&lt;li class="slide">' +
194 |       $('#to-insert').html() +
195 |       '&lt;/li>';
196 | 
197 |   <span class="ct">// Insert the slide after the current slide</span>
198 |   $slideshow.find('li.slide').eq(curr)
199 |   .after(newSlide);
200 | 
201 |   <span class="ct">// Trigger the refresh
202 |   // with the second argument set to ['all']
203 |   </span>
204 |   $slideshow.trigger('refreshCarousel', ['all']);
205 | });
206 |     </code></pre>
207 |   </div>
208 | </div>
209 | </body>
210 | </html>
211 | 


--------------------------------------------------------------------------------
/stylesheets/stylesheet.css:
--------------------------------------------------------------------------------
  1 | /*******************************************************************************
  2 | Slate Theme for Github Pages
  3 | by Jason Costello, @jsncostello
  4 | *******************************************************************************/
  5 | 
  6 | @import url(pygment_trac.css);
  7 | 
  8 | /*******************************************************************************
  9 | MeyerWeb Reset
 10 | *******************************************************************************/
 11 | 
 12 | html, body, div, span, applet, object, iframe,
 13 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 14 | a, abbr, acronym, address, big, cite, code,
 15 | del, dfn, em, img, ins, kbd, q, s, samp,
 16 | small, strike, strong, sub, sup, tt, var,
 17 | b, u, i, center,
 18 | dl, dt, dd, ol, ul, li,
 19 | fieldset, form, label, legend,
 20 | table, caption, tbody, tfoot, thead, tr, th, td,
 21 | article, aside, canvas, details, embed,
 22 | figure, figcaption, footer, header, hgroup,
 23 | menu, nav, output, ruby, section, summary,
 24 | time, mark, audio, video {
 25 |   margin: 0;
 26 |   padding: 0;
 27 |   border: 0;
 28 |   font: inherit;
 29 |   vertical-align: baseline;
 30 | }
 31 | 
 32 | /* HTML5 display-role reset for older browsers */
 33 | article, aside, details, figcaption, figure,
 34 | footer, header, hgroup, menu, nav, section {
 35 |   display: block;
 36 | }
 37 | 
 38 | ol, ul {
 39 |   list-style: none;
 40 | }
 41 | 
 42 | blockquote, q {
 43 | }
 44 | 
 45 | table {
 46 |   border-collapse: collapse;
 47 |   border-spacing: 0;
 48 | }
 49 | 
 50 | a:focus {
 51 |   outline: none;
 52 | }
 53 | 
 54 | /*******************************************************************************
 55 | Theme Styles
 56 | *******************************************************************************/
 57 | 
 58 | body {
 59 |   box-sizing: border-box;
 60 |   color:#373737;
 61 |   background: #212121;
 62 |   font-size: 16px;
 63 |   font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
 64 |   line-height: 1.5;
 65 |   -webkit-font-smoothing: antialiased;
 66 | }
 67 | 
 68 | h1, h2, h3, h4, h5, h6 {
 69 |   margin: 10px 0;
 70 |   font-weight: 700;
 71 |   color:#222222;
 72 |   font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
 73 |   letter-spacing: -1px;
 74 | }
 75 | 
 76 | h1 {
 77 |   font-size: 36px;
 78 |   font-weight: 700;
 79 | }
 80 | 
 81 | h2 {
 82 |   padding-bottom: 10px;
 83 |   font-size: 32px;
 84 |   background: url('../images/bg_hr.png') repeat-x bottom;
 85 | }
 86 | 
 87 | h3 {
 88 |   font-size: 24px;
 89 | }
 90 | 
 91 | h4 {
 92 |   font-size: 21px;
 93 | }
 94 | 
 95 | h5 {
 96 |   font-size: 18px;
 97 | }
 98 | 
 99 | h6 {
100 |   font-size: 16px;
101 | }
102 | 
103 | p {
104 |   margin: 10px 0 15px 0;
105 | }
106 | 
107 | footer p {
108 |   color: #f2f2f2;
109 | }
110 | 
111 | a {
112 |   text-decoration: none;
113 |   color: #007edf;
114 |   text-shadow: none;
115 | 
116 |   transition: color 0.5s ease;
117 |   transition: text-shadow 0.5s ease;
118 |   -webkit-transition: color 0.5s ease;
119 |   -webkit-transition: text-shadow 0.5s ease;
120 |   -moz-transition: color 0.5s ease;
121 |   -moz-transition: text-shadow 0.5s ease;
122 |   -o-transition: color 0.5s ease;
123 |   -o-transition: text-shadow 0.5s ease;
124 |   -ms-transition: color 0.5s ease;
125 |   -ms-transition: text-shadow 0.5s ease;
126 | }
127 | 
128 | #main_content a:hover {
129 |   color: #0069ba;
130 |   text-shadow: #0090ff 0px 0px 2px;
131 | }
132 | 
133 | footer a:hover {
134 |   color: #43adff;
135 |   text-shadow: #0090ff 0px 0px 2px;
136 | }
137 | 
138 | em {
139 |   font-style: italic;
140 | }
141 | 
142 | strong {
143 |   font-weight: bold;
144 | }
145 | 
146 | img {
147 |   position: relative;
148 |   margin: 0 auto;
149 |   max-width: 739px;
150 |   padding: 5px;
151 |   margin: 10px 0 10px 0;
152 |   border: 1px solid #ebebeb;
153 | 
154 |   box-shadow: 0 0 5px #ebebeb;
155 |   -webkit-box-shadow: 0 0 5px #ebebeb;
156 |   -moz-box-shadow: 0 0 5px #ebebeb;
157 |   -o-box-shadow: 0 0 5px #ebebeb;
158 |   -ms-box-shadow: 0 0 5px #ebebeb;
159 | }
160 | 
161 | pre, code {
162 |   width: 100%;
163 |   color: #222;
164 |   background-color: #fff;
165 | 
166 |   font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
167 |   font-size: 14px;
168 | 
169 |   border-radius: 2px;
170 |   -moz-border-radius: 2px;
171 |   -webkit-border-radius: 2px;
172 | 
173 | 
174 | 
175 | }
176 | 
177 | pre {
178 |   width: 100%;
179 |   padding: 10px;
180 |   box-shadow: 0 0 10px rgba(0,0,0,.1);
181 |   overflow: auto;
182 | }
183 | 
184 | code {
185 |   padding: 3px;
186 |   margin: 0 3px;
187 |   box-shadow: 0 0 10px rgba(0,0,0,.1);
188 | }
189 | 
190 | pre code {
191 |   display: block;
192 |   box-shadow: none;
193 | }
194 | 
195 | blockquote {
196 |   color: #666;
197 |   margin-bottom: 20px;
198 |   padding: 0 0 0 20px;
199 |   border-left: 3px solid #bbb;
200 | }
201 | 
202 | ul, ol, dl {
203 |   margin-bottom: 15px
204 | }
205 | 
206 | ul li {
207 |   list-style: inside;
208 |   padding-left: 20px;
209 | }
210 | 
211 | ol li {
212 |   list-style: decimal inside;
213 |   padding-left: 20px;
214 | }
215 | 
216 | dl dt {
217 |   font-weight: bold;
218 | }
219 | 
220 | dl dd {
221 |   padding-left: 20px;
222 |   font-style: italic;
223 | }
224 | 
225 | dl p {
226 |   padding-left: 20px;
227 |   font-style: italic;
228 | }
229 | 
230 | hr {
231 |   height: 1px;
232 |   margin-bottom: 5px;
233 |   border: none;
234 |   background: url('../images/bg_hr.png') repeat-x center;
235 | }
236 | 
237 | table {
238 |   border: 1px solid #373737;
239 |   margin-bottom: 20px;
240 |   text-align: left;
241 |  }
242 | 
243 | th {
244 |   font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
245 |   padding: 10px;
246 |   background: #373737;
247 |   color: #fff;
248 |  }
249 | 
250 | td {
251 |   padding: 10px;
252 |   border: 1px solid #373737;
253 |  }
254 | 
255 | form {
256 |   background: #f2f2f2;
257 |   padding: 20px;
258 | }
259 | 
260 | img {
261 |   width: 100%;
262 |   max-width: 100%;
263 | }
264 | 
265 | /*******************************************************************************
266 | Full-Width Styles
267 | *******************************************************************************/
268 | 
269 | .outer {
270 |   width: 100%;
271 | }
272 | 
273 | .inner {
274 |   position: relative;
275 |   max-width: 640px;
276 |   padding: 20px 10px;
277 |   margin: 0 auto;
278 | }
279 | 
280 | #forkme_banner {
281 |   display: block;
282 |   position: absolute;
283 |   top:0;
284 |   right: 10px;
285 |   z-index: 10;
286 |   padding: 10px 50px 10px 10px;
287 |   color: #fff;
288 |   background: url('../images/blacktocat.png') #0090ff no-repeat 95% 50%;
289 |   font-weight: 700;
290 |   box-shadow: 0 0 10px rgba(0,0,0,.5);
291 |   border-bottom-left-radius: 2px;
292 |   border-bottom-right-radius: 2px;
293 | }
294 | 
295 | #header_wrap {
296 |   background: #212121;
297 |   background: -moz-linear-gradient(top, #373737, #212121);
298 |   background: -webkit-linear-gradient(top, #373737, #212121);
299 |   background: -ms-linear-gradient(top, #373737, #212121);
300 |   background: -o-linear-gradient(top, #373737, #212121);
301 |   background: linear-gradient(top, #373737, #212121);
302 | }
303 | 
304 | #header_wrap .inner {
305 |   padding: 50px 10px 30px 10px;
306 | }
307 | 
308 | #project_title {
309 |   margin: 0;
310 |   color: #fff;
311 |   font-size: 42px;
312 |   font-weight: 700;
313 |   text-shadow: #111 0px 0px 10px;
314 | }
315 | 
316 | #project_tagline {
317 |   color: #fff;
318 |   font-size: 24px;
319 |   font-weight: 300;
320 |   background: none;
321 |   text-shadow: #111 0px 0px 10px;
322 | }
323 | 
324 | #downloads {
325 |   position: absolute;
326 |   width: 210px;
327 |   z-index: 10;
328 |   bottom: -40px;
329 |   right: 0;
330 |   height: 70px;
331 |   background: url('../images/icon_download.png') no-repeat 0% 90%;
332 | }
333 | 
334 | .zip_download_link {
335 |   display: block;
336 |   float: right;
337 |   width: 90px;
338 |   height:70px;
339 |   text-indent: -5000px;
340 |   overflow: hidden;
341 |   background: url(../images/sprite_download.png) no-repeat bottom left;
342 | }
343 | 
344 | .tar_download_link {
345 |   display: block;
346 |   float: right;
347 |   width: 90px;
348 |   height:70px;
349 |   text-indent: -5000px;
350 |   overflow: hidden;
351 |   background: url(../images/sprite_download.png) no-repeat bottom right;
352 |   margin-left: 10px;
353 | }
354 | 
355 | .zip_download_link:hover {
356 |   background: url(../images/sprite_download.png) no-repeat top left;
357 | }
358 | 
359 | .tar_download_link:hover {
360 |   background: url(../images/sprite_download.png) no-repeat top right;
361 | }
362 | 
363 | #main_content_wrap {
364 |   background: #f2f2f2;
365 |   border-top: 1px solid #111;
366 |   border-bottom: 1px solid #111;
367 | }
368 | 
369 | #main_content {
370 |   padding-top: 40px;
371 | }
372 | 
373 | #footer_wrap {
374 |   background: #212121;
375 | }
376 | 
377 | 
378 | 
379 | /*******************************************************************************
380 | Small Device Styles
381 | *******************************************************************************/
382 | 
383 | @media screen and (max-width: 480px) {
384 |   body {
385 |     font-size:14px;
386 |   }
387 | 
388 |   #downloads {
389 |     display: none;
390 |   }
391 | 
392 |   .inner {
393 |     min-width: 320px;
394 |     max-width: 480px;
395 |   }
396 | 
397 |   #project_title {
398 |   font-size: 32px;
399 |   }
400 | 
401 |   h1 {
402 |     font-size: 28px;
403 |   }
404 | 
405 |   h2 {
406 |     font-size: 24px;
407 |   }
408 | 
409 |   h3 {
410 |     font-size: 21px;
411 |   }
412 | 
413 |   h4 {
414 |     font-size: 18px;
415 |   }
416 | 
417 |   h5 {
418 |     font-size: 14px;
419 |   }
420 | 
421 |   h6 {
422 |     font-size: 12px;
423 |   }
424 | 
425 |   code, pre {
426 |     min-width: 320px;
427 |     max-width: 480px;
428 |     font-size: 11px;
429 |   }
430 | 
431 | }
432 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <title>demo</title>
  6 |     <style type="text/css">
  7 |       body {
  8 |         font-size: 13px;
  9 |         font-family: Helvetica, Arial, Verdana, sans-serif;
 10 |         line-height: 1.3em;
 11 |       }
 12 |       .container {
 13 |         width: 840px;
 14 |         margin: 0 auto;
 15 |       }
 16 |       .slideshow {
 17 |         width: 800px;
 18 |         overflow: hidden;
 19 |         padding: 0 20px;
 20 |         margin-bottom: 20px;
 21 |         border: 5px solid #999;
 22 |       }
 23 |       .slides {
 24 |         margin: 0;
 25 |         padding: 0;
 26 |         list-style-type: none;
 27 |       }
 28 |       .slide {
 29 |         float: left;
 30 |         width: 360px;
 31 |         height: 150px;
 32 |         padding: 20px;
 33 |       }
 34 | 
 35 |       .slideshow .prev,
 36 |       .slideshow .next {
 37 |         appearance: none;
 38 |         margin: 2px 0;
 39 |         padding: 4px 8px;
 40 |         text-align: center;
 41 |         vertical-align: middle;
 42 |         border: 1px solid #dee0e8;
 43 |         border-radius: 3px;
 44 |       }
 45 |       code {
 46 |         background: #ccc;
 47 |         display: inline-block;
 48 |         vertical-align: middle;
 49 |         padding: 5px;
 50 |       }
 51 | 
 52 |       .nav {
 53 |         margin-bottom: 0.2em;
 54 |         text-align: center;
 55 |       }
 56 |       .nav button {
 57 |         appearance: none;
 58 |         cursor: pointer;
 59 |         background-color: #fff;
 60 |         border-width: 0;
 61 |         display: inline-flex;
 62 |         align-items: center;
 63 |         justify-content: center;
 64 |         border-radius: 50%;
 65 |         margin: 0;
 66 |         width: 1.8em;
 67 |         height: 1.8em;
 68 |         line-height: 1;
 69 |         color: #00a3cb;
 70 |         text-decoration: none;
 71 |       }
 72 |       .nav button:hover {
 73 |         color: #00436b;
 74 |       }
 75 |       .nav button.vis,
 76 |       .nav button.vis:hover {
 77 |         background-color: #aaa;
 78 |         color: white;
 79 |       }
 80 |       .nav button.active,
 81 |       .nav button.active:hover {
 82 |         background-color: #00a3cb;
 83 |         color: white;
 84 |       }
 85 |     </style>
 86 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 87 |     <script src="../src/jquery.jcarousellite.js"></script>
 88 |     <script>
 89 |       $(document).ready(function () {
 90 |         var carousel1Options = {
 91 |           auto: true,
 92 |           visible: 2,
 93 |           speed: 300,
 94 |           pause: true,
 95 |           btnPrev: function () {
 96 |             return $(this).find('.prev');
 97 |           },
 98 |           btnNext: function () {
 99 |             return $(this).find('.next');
100 |           },
101 |         };
102 | 
103 |         var carousel2Options = {
104 |           visible: 2,
105 |           speed: 300,
106 |           pause: true,
107 |           btnGo: $('div.nav').find('button'),
108 |         };
109 | 
110 |         var carousel3Options = {
111 |           containerSelector: 'section',
112 |           itemSelector: 'article',
113 |           visible: 2,
114 |           speed: 300,
115 |           btnPrev: function () {
116 |             return $(this).find('.prev');
117 |           },
118 |           btnNext: function () {
119 |             return $(this).find('.next');
120 |           },
121 |         };
122 | 
123 |         var $slideshows = $('.slideshow');
124 | 
125 |         $slideshows.eq(0).jCarouselLite(carousel1Options);
126 | 
127 |         $('.pause').on('click', function () {
128 |           $slideshows.eq(0).trigger('pauseCarousel');
129 |         });
130 |         $('.resume').on('click', function () {
131 |           $slideshows.eq(0).trigger('resumeCarousel');
132 |         });
133 | 
134 |         $slideshows.eq(1).jCarouselLite(carousel2Options);
135 | 
136 |         $slideshows.eq(2).jCarouselLite(carousel3Options);
137 |       });
138 |     </script>
139 |   </head>
140 |   <body>
141 |     <div class="container">
142 |       <p><a href="../">Instructions</a></p>
143 |       <p><a href="responsive.html">"Responsive" demo</a></p>
144 |       <div class="slideshow">
145 |         <h2>Example using "Previous"/"Next" navigation:</h2>
146 |         <ul class="slides">
147 |           <li class="slide">
148 |             <div class="img-wrapper">
149 |               1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
150 |               dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
151 |               ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
152 |               fugiat nulla pariatur.
153 |             </div>
154 |           </li>
155 | 
156 |           <li class="slide">
157 |             <div class="img-wrapper">
158 |               2 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
159 |               consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
160 |               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
161 |               id est laborum.
162 | 
163 |               <a href="#" class="description"><span>Green Roof</span></a>
164 |             </div>
165 |           </li>
166 | 
167 |           <li class="slide">
168 |             <div class="img-wrapper">
169 |               3 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
170 |               laborum.
171 |               <span class="description"><span>Zeeland</span></span>
172 |             </div>
173 |           </li>
174 | 
175 |           <li class="slide">
176 |             <div class="img-wrapper">
177 |               4 In culpa qui officia deserunt mollit anim id est laborum.
178 |               <span class="description"><span>CityFlats Hotel</span></span>
179 |             </div>
180 |           </li>
181 | 
182 |           <li class="slide">
183 |             <div class="img-wrapper">
184 |               5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
185 |               dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
186 |               ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
187 |               fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
188 |               mollit anim id est laborum.
189 |             </div>
190 |           </li>
191 |         </ul>
192 |         <button type="button" class="prev">&lt;</button>
193 |         <button type="button" class="next">&gt;</button>
194 |       </div>
195 |       <p>
196 |         <button class="pause">Pause</button>
197 |         <button class="resume">Resume</button>
198 |       </p>
199 |       <div class="slideshow">
200 |         <h2>Example using numbered navigation:</h2>
201 |         <ul class="slides">
202 |           <li class="slide">
203 |             <div class="img-wrapper">
204 |               1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
205 |               dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
206 |               ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
207 |               fugiat nulla pariatur.
208 |             </div>
209 |           </li>
210 | 
211 |           <li class="slide">
212 |             <div class="img-wrapper">
213 |               2 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
214 |               consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
215 |               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
216 |               id est laborum.
217 |               <a href="#" class="description"><span>GRCC Green Roof</span></a>
218 |             </div>
219 |           </li>
220 | 
221 |           <li class="slide">
222 |             <div class="img-wrapper">
223 |               3 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
224 |               laborum.
225 |               <span class="description"><span>Zeeland Natatorium</span></span>
226 |             </div>
227 |           </li>
228 | 
229 |           <li class="slide">
230 |             <div class="img-wrapper">
231 |               4 In culpa qui officia deserunt mollit anim id est laborum.
232 |               <span class="description"><span>CityFlats Hotel</span></span>
233 |             </div>
234 |           </li>
235 | 
236 |           <li class="slide">
237 |             <div class="img-wrapper">
238 |               5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
239 |               dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
240 |               ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
241 |               fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
242 |               mollit anim id est laborum.
243 |               <span class="description"><span>Calvin College</span></span>
244 |             </div>
245 |           </li>
246 |         </ul>
247 |         <div class="nav">
248 |           <button type="button">1</button>
249 |           <button type="button">2</button>
250 |           <button type="button">3</button>
251 |           <button type="button">4</button>
252 |           <button type="button">5</button>
253 |         </div>
254 |       </div>
255 | 
256 |       <div class="slideshow">
257 |         <h2>Example using custom HTML5 selectors <code>section</code> and <code>article</code>:</h2>
258 |         <section class="slides">
259 |           <article class="slide">
260 |             <div class="img-wrapper">
261 |               1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
262 |               dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
263 |               ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
264 |               fugiat nulla pariatur.
265 |             </div>
266 |           </article>
267 | 
268 |           <article class="slide">
269 |             <div class="img-wrapper">
270 |               2 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
271 |               consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
272 |               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
273 |               id est laborum.
274 |               <a href="#" class="description"><span>GRCC Green Roof</span></a>
275 |             </div>
276 |           </article>
277 | 
278 |           <article class="slide">
279 |             <div class="img-wrapper">
280 |               3 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
281 |               laborum.
282 |               <span class="description"><span>Zeeland</span></span>
283 |             </div>
284 |           </article>
285 | 
286 |           <article class="slide">
287 |             <div class="img-wrapper">
288 |               4 In culpa qui officia deserunt mollit anim id est laborum.
289 |               <span class="description"><span>CityFlats Hotel</span></span>
290 |             </div>
291 |           </article>
292 | 
293 |           <article class="slide">
294 |             <div class="img-wrapper">
295 |               5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
296 |               dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
297 |               ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
298 |               fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
299 |               mollit anim id est laborum.
300 |             </div>
301 |           </article>
302 |         </section>
303 |         <button type="button" class="prev">&lt;</button>
304 |         <button type="button" class="next">&gt;</button>
305 |       </div>
306 |     </div>
307 |   </body>
308 | </html>
309 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | # jCarouselLite
  2 | 
  3 | By [Karl Swedberg](https://karlswedberg.com/), based on the original by [Ganeshji Marwaha](gmarwaha.com).
  4 | 
  5 | This jQuery plugin creates a carousel-style navigation widget for images, or any content, from simple HTML markup.
  6 | 
  7 | ## Related Projects
  8 | 
  9 | Because jCarouselLite is relatively "light," it doesn't include a number of features that you might want for your project.
 10 | Also, the responsive feature is a little hacky. If the plugin doesn't suit your needs, please consider one of the following:
 11 | 
 12 | * [Cycle2](http://jquery.malsup.com/cycle2/) by Mike Alsup
 13 | * [Slick Carousel](http://kenwheeler.github.io/slick/) by Ken Wheeler
 14 | 
 15 | ## Installation
 16 | 
 17 | Choose one of the following ways to put the plugin in your project:
 18 | 
 19 | * Via bower: `bower install jquery-carousel-lite`
 20 | * Via npm: `npm install jcarousellite`
 21 | * Via github: Download https://github.com/kswedberg/jquery-carousel-lite/blob/master/jcarousellite.js and place it somewhere in your project
 22 | * Via rawgit: Directly reference the file with `<script src="https://rawgit.com/kswedberg/jquery-carousel-lite/master/jcarousellite.js">`
 23 | 
 24 | 
 25 | ## Getting Started
 26 | 
 27 | ### HTML
 28 | 
 29 | The HTML markup to build the carousel can be as simple as the following:
 30 | 
 31 | ```html
 32 | <div class="carousel">
 33 |    <ul>
 34 |        <li><img src="image/1.jpg" alt="1"></li>
 35 |        <li><img src="image/2.jpg" alt="2"></li>
 36 |        <li><img src="image/3.jpg" alt="3"></li>
 37 |    </ul>
 38 | </div>
 39 | ```
 40 | 
 41 | This snippet is nothing but a simple div containing an unordered list of images.
 42 | The "carousel" class for the div here is **just for the sake of explanation**.
 43 | You can use any class — or none at all — for any of the elements.
 44 | 
 45 | To manually navigate the elements of the carousel, you can include some kind of navigation buttons.
 46 | For example, you can have a "previous" button to go backward and a "next" button to go forward.
 47 | They need not be part of the carousel `div` itself; they can be any element in your document.
 48 | For example, let's assume you want the following elements to be used as prev and next buttons:
 49 | 
 50 | ```html
 51 | <button class='prev'> &raquo; </button>
 52 | <button class='next'> &laquo; </button>
 53 | ```
 54 | 
 55 | ### CSS
 56 | 
 57 | With the default settings, the carousel probably needs only a single CSS rule in your stylesheet
 58 | (again, using `<div class="carousel">` as our example):
 59 | 
 60 | ```css
 61 | div.carousel {
 62 |   overflow: hidden;
 63 | }
 64 | ```
 65 | 
 66 | ### jQuery
 67 | 
 68 | All you need to do is call the carousel component on the `div` element that represents it and pass in the
 69 | navigation buttons as options.
 70 | 
 71 | ```javascript
 72 | $('div.carousel').jCarouselLite({
 73 |   btnNext: '.next',
 74 |   btnPrev: '.prev'
 75 | });
 76 | ```
 77 | 
 78 | There are quite a few other settings that you can use to customize it. Each will be explained with an example below.
 79 | 
 80 | * [Options](#options)
 81 | * [Callback Options](#callbacks)
 82 | * [Events](#events)
 83 | * [Responsive Carousels](#responsive-carousels)
 84 | 
 85 | ## Demo
 86 | 
 87 | You can view a bare-bones demo at [kswedberg.github.io/jquery-carousel-lite/demo/](https://kswedberg.github.io/jquery-carousel-lite/demo/)
 88 | 
 89 | ## Options <a id="options">
 90 | 
 91 | You can specify all the options shown below as object properties.
 92 | 
 93 | ### `containerSelector` : string - default is "ul"
 94 | 
 95 | *New as of jCarouselLite 1.9.* Allows the "ul" container to be customized using any valid selector expression to match elements against. The plugin will use the *first* element within the carousel div that matches the selector.
 96 | 
 97 | ```javascript
 98 | $('div.carousel').jCarouselLite({
 99 |   containerSelector: '.my-slide-container'
100 | });
101 | ```
102 | 
103 | ### `itemSelector` : string - default is "li"
104 | 
105 | *New as of jCarouselLite 1.9.* Allows the "li" slides to be customized using any valid selector expression to match elements against. The plugin will use elements that match the `itemSelector` string **and** are direct children of the `containerSelector`.
106 | 
107 | ```javascript
108 | $('div.carousel').jCarouselLite({
109 |   itemSelector: '.my-slide'
110 | });
111 | ```
112 | 
113 | ### `responsive` : Boolean - default is false
114 | 
115 | New as of jCarouselLite 1.8. Allows the height and width of the carousel and its list items to be reset when the window size changes (if `autoCSS` and/or `autoWidth` set to `true`). Adds an event handler on the window resize event that triggers the `refreshCarousel` custom event when the window stops being resized. See [Responsive Carousels](#responsive-carousels) for more information.
116 | 
117 | ### `swipe` : Boolean - default is true
118 | 
119 | New as of jCarouselLite 1.8. Enables the carousel to respond to touch input — namely single-touch swiping motions.
120 | 
121 | ### swipeThresholds : Object - default is { x: 80, y: 120, time: 150 }
122 | 
123 | New as of jCarouselLite 1.8 The three swipeThresholds properties refer to movement along the x and y axes (in pixels) and the duration of that movement (in milliseconds) from touch start to touch end. The combination of these properties determine when a directional swipe has occurred and, thus, when the carousel should scroll.
124 | 
125 | ### `preventTouchWindowScroll`: Boolean - default is true
126 | 
127 | When true (default), prevents vertical scrolling of the document window when swiping on a horizontal carousel.
128 | 
129 | ### `btnPrev`, `btnNext` : String - no defaults
130 | 
131 | Creates a basic carousel. Clicking "btnPrev" navigates backwards and "btnNext" navigates forward.
132 | 
133 | ```javascript
134 | $('div.carousel').jCarouselLite({
135 |   btnNext: '.next',
136 |   btnPrev: '.prev'
137 | });
138 | ```
139 | 
140 | ### `btnGo` : array | jQuery object - no defaults
141 | 
142 | You can use the `btnGo` option along with the `btnNext` / `btnPrev` buttons or instead of them.
143 | 
144 | If you supply an array, the index of each item in the array represents the index of the element in the carousel.
145 | In other words, if the first element in the array is ".one," then clicking the element represented by ".one"
146 | will slide the carousel to the first element.
147 | 
148 | ```javascript
149 | $('div.carousel').jCarouselLite({
150 |   btnNext: '.next',
151 |   btnPrev: '.prev',
152 |   btnGo: ['.one', '.two', '.three']
153 | });
154 | ```
155 | 
156 | In the following example, clicking a link within `#carousel-nav` will slide the carousel to the item with an index matching the link's index among the other links.
157 | 
158 | ```javascript
159 | $('div.carousel').jCarouselLite({
160 |   btnGo: $('#carousel-nav a')
161 | });
162 | ```
163 | 
164 | ### `autoCSS` : Boolean - default is true
165 | 
166 | When the `autoCSS` option is set to `false`, the plugin does *not* set any of the initial styles on the carousel elements, allowing you to apply these styles (or a subset of them) yourself in a stylesheet.
167 | 
168 | ```javascript
169 | $('div.carousel').jCarouselLite({
170 |   autoCSS: false
171 | });
172 | ```
173 | 
174 | The following is a generic example of styles set by the plugin when the default `autoCSS: true` is used.
175 | 
176 | ```css
177 | /* the selectors here (div, ul, li) are meant only for example.
178 |    you would, of course, use more specific selectors
179 |    to target your actual carousel elements */
180 | 
181 | div {
182 |   visibility: visible;
183 |   position: relative;
184 |   z-index: 2;
185 |   /* if the vertical option is set to true, the following would be height */
186 |   width: XXX /* calculated: width of the first li * number of visible items */;
187 | }
188 | 
189 | ul {
190 |   margin: 0;
191 |   padding: 0;
192 |   position: relative;
193 |   list-style-type: none;
194 |   z-index: 1;
195 | 
196 |   /* if the vertical option is set to true, the following would be height */
197 |   /* can be any number larger than total combined width of list items */
198 |   width: XXX /* calculated: width of the first li * total number of list items */;
199 | 
200 |   /* if the vertical option is set to true, the following would be margin-top */
201 |   margin-left: -XXX /* calculdated: -starting item * width of first li */;
202 | }
203 | 
204 | li {
205 |   overflow: visible /* if vertical: true, overflow is hidden */;
206 |   float: left /* if vertical: true, float is none */;
207 |   width: XXX /*calculated: width of the first li */
208 |   height: XXX /*calculated: height of the first li */
209 | }
210 | ```
211 | 
212 | ### `autoWidth`: Boolean - default is false
213 | 
214 | When the `autoWidth` option is set to `true`, the plugin sets the width of
215 | the `<li>`s and left/top of the `<ul>` based on the width of the `<div>`
216 | 
217 | ### `btnDisabledClass`: String - default is "disabled"
218 | 
219 | The `btnDisabledClass` value is automatically added to the `btnPrev` or `btnNext` element when a non-circular carousel is at the first or last slide, respectively.
220 | 
221 | ### `activeClass` : String - default is "active"
222 | 
223 | The `activeClass` value is automatically added to the active slide's class. This allows customized animations within the `beforeStart` and `beforeEnd` callback options.
224 | 
225 | When the `btnGo` option is set, the element in the `btnGo` set that corresponds to the first currently visible carousel item will have a class added to it. The default `activeClass` is "active," but this can be overridden as shown in the following example:
226 | 
227 | ```javascript
228 | $('div.carousel').jCarouselLite({
229 |   btnGo: $('#carousel-nav a'),
230 |   visible: 2,
231 |   activeClass: 'current'
232 | });
233 | ```
234 | 
235 | 
236 | ### `visibleClass` : String - default is "vis"
237 | 
238 | When the `btnGo` option is set, the element in the `btnGo` set that corresponds to the currently visible carousel item(s) will have a class added to them. The default `visibleClass` is "vis," but this can be overridden as shown in the following example:
239 | 
240 | ```javascript
241 | $('div.carousel').jCarouselLite({
242 |   btnGo: $('#carousel-nav a'),
243 |   visible: 2,
244 |   visibleClass: 'highlight'
245 | });
246 | ```
247 | 
248 | 
249 | ### `auto` : Boolean | Number - default is false, meaning automatic scrolling is disabled by default
250 | 
251 | The carousel will navigate by itself if this option is set to `true` or a number greater than 0. If `true`, the carousel will scroll by the number of slides indicated by the `scroll` option (default is 1). If a positive number, it will auto-scroll by that number instead, although clicks on the previous/next button will still cause it to scroll by the `scroll` option's number.
252 | 
253 | ```javascript
254 | $('div.carousel').jCarouselLite({
255 |   auto: true,
256 |   speed: 500
257 | });
258 | ```
259 | ```javascript
260 | $('div.carousel').jCarouselLite({
261 |   auto: 2,
262 |   scroll: 1,
263 |   visible: 2,
264 |   btnNext: '.next',
265 |   btnPrev: '.prev'
266 | });
267 | ```
268 | 
269 | ### `pause`: Boolean - default is true
270 | 
271 | When both `pause` and `auto` are `true`, scrolling will pause when the mouse enters the carousel and resume when the mouse leaves the carousel.
272 | 
273 | ### `directional`: Boolean - default is false
274 | 
275 | If the `directional` option is set to `true`, autoscrolling changes direction  when the user clicks the "previous" or "next" button
276 | 
277 | ### `timeout` : Number - default is 4000
278 | 
279 | When the `auto` option is set to `true` (or a number greater than 0), the carousel automatically transitions after the amount of time specified by the `timeout` option.
280 | 
281 | ```javascript
282 | $('div.carousel').jCarouselLite({
283 |   auto: true,
284 |   timeout: 8000
285 | });
286 | ```
287 | 
288 | ### `autoStop` : Number - default is Infinity
289 | 
290 | The number of iterations before an auto carousel will stop automatically advancing. If the `circular` option is set to `false`, the carousel will not continue advancing after the last item has been reached, even if the number of iterations has not yet reached the `autoStop` value.
291 | 
292 | ### `speed` : Number - default is 200
293 | 
294 | Specifying a speed will slow down or speed up the sliding speed of your carousel. Providing 0 will remove the slide effect.
295 | 
296 | ```javascript
297 | $('div.carousel').jCarouselLite({
298 |   btnNext: '.next',
299 |   btnPrev: '.prev',
300 |   speed: 800
301 | });
302 | ```
303 | 
304 | ### `easing` : String - no easing effects by default.
305 | 
306 | The default easing of jQuery core, "swing," is used if no easing is specified in the options. You will need an easing plugin if you wish to specify an easing effect other than jQuery's own "swing" or "linear."
307 | 
308 | ```javascript
309 | $('div.carousel').jCarouselLite({
310 |   btnNext: '.next',
311 |   btnPrev: '.prev',
312 |   easing: 'bounceout'
313 | });
314 | ```
315 | 
316 | ### `vertical` : Boolean - default is false
317 | 
318 | Determines the direction of the carousel. If set to `true`, the carousel will display vertically; the next and
319 | prev buttons will slide the items vertically as well. The default is `false`, which means that the carousel will
320 | display horizontally. The next and prev buttons will slide the items from left to right in this case.
321 | 
322 | ```javascript
323 | $('div.carousel').jCarouselLite({
324 |   btnNext: '.next',
325 |   btnPrev: '.prev',
326 |   vertical: true
327 | });
328 | ```
329 | 
330 | ### `circular` : Boolean - default is true
331 | 
332 | Setting it to `true` enables circular navigation. This means, if you click "next" after you reach the last
333 | element, you will automatically slide to the first element and vice versa. If you set circular to false, then
334 | if you click on the "next" button after you reach the last element, you will stay in the last element itself
335 | and similarly for "previous" button and first element.
336 | 
337 | ```javascript
338 | $('div.carousel').jCarouselLite({
339 |   btnNext: '.next',
340 |   btnPrev: '.prev',
341 |   circular: false
342 | });
343 | ```
344 | 
345 | ### `visible` : Number - default is 3
346 | 
347 | This specifies the number of items visible at all times within the carousel. The default is 3.
348 | You may set this option to a fractional number (such as `3.5`), as well.
349 | 
350 | ```javascript
351 | $('div.carousel').jCarouselLite({
352 |   btnNext: '.next',
353 |   btnPrev: '.prev',
354 |   visible: 4
355 | });
356 | ```
357 | 
358 | ### `start` : Number - default is 0
359 | 
360 | You can specify from which item the carousel should start. Remember, the first item in the carousel
361 | has a start of 0, and so on.
362 | 
363 | ```javascript
364 | $('div.carousel').jCarouselLite({
365 |   btnNext: '.next',
366 |   btnPrev: '.prev',
367 |   // start on the *third* item
368 |   start: 2
369 | });
370 | ```
371 | 
372 | ### `scroll` : Number - default is 1
373 | 
374 | The number of items that should scroll/slide when you click the next/prev navigation buttons. By
375 | default, only one item is scrolled, but you may set it to any number. For example, setting it to `2` will scroll
376 | 2 items when you click the next or previous buttons.
377 | 
378 | ```javascript
379 | $('div.carousel').jCarouselLite({
380 |   btnNext: '.next',
381 |   btnPrev: '.prev',
382 |   scroll: 2
383 | });
384 | ```
385 | 
386 | ### `mouseWheel` : Boolean - default is false
387 | 
388 | The carousel can also be navigated using the mouse wheel interface of a scroll mouse instead of (or in addition to) using buttons. To enable this feature, you have to do 2 things:
389 | 
390 | * include the mouse-wheel plugin from Brandon Aaron (http://github.com/brandonaaron/).
391 | * set the option "mouseWheel" to true.
392 | 
393 | ```javascript
394 | $('div.carousel').jCarouselLite({
395 |   mouseWheel: true
396 | });
397 | ```
398 | 
399 | To use the previous/next buttons as well as the scroll wheel, just supply the options required for both:
400 | 
401 | ```javascript
402 | $('div.carousel').jCarouselLite({
403 |   btnNext: '.next',
404 |   btnPrev: '.prev',
405 |   mouseWheel: true
406 | });
407 | ```
408 | 
409 | ## Callback Options<a id="callbacks"></a>
410 | 
411 | ### `init` : Function - callback
412 | 
413 | The init callback function allows you to do some logic for each carousel div before any of the carousel behavior and styles are applied to it.
414 | The function will be passed two arguments:
415 | 
416 | 1. Object representing the result of merging the default settings with the options object passed in when calling .jCarousellite()
417 | 2. jQuery Object containing the top-level `<li>` elements in the carousel (useful for checking their length against number of items to be visible at once)
418 | 
419 | If the function returns `false`, the plugin will skip all the carousel magic for that carousel `<div>`.
420 | 
421 | ```javascript
422 | $('div.carousel').jCarouselLite({
423 |   btnNext: '.next',
424 |   btnPrev: '.prev',
425 |   init: function(opts, $lis) {
426 |     if ($lis.length > opts.visible) {
427 |       $('div.carousel').append('<a class="prevnext prev">previous</a> <a class="prevnext next">next</a>');
428 |     } else {
429 |       return false;
430 |     }
431 |   }
432 | });
433 | ```
434 | 
435 | ### `first`, `last` : Function - callbacks
436 | 
437 | When the `circular` option is set to false you have the option of doing something once the first or last slide has been reached via callbacks.
438 | 
439 | ```javascript
440 | $('div.carousel').jCarouselLite({
441 |   btnNext: '.next',
442 |   btnPrev: '.prev',
443 |   first: function() {
444 |     alert('This is the first slide');
445 |   },
446 |   last: function() {
447 |     alert('This is the last slide');
448 |   }
449 | });
450 | ```
451 | 
452 | ### `beforeStart`, `afterEnd` : Function - callbacks
453 | 
454 | If you want to do some logic before the slide starts and after the slide ends,
455 | you can register these 2 callbacks. Inside the functions, `this` is the
456 | div on which the .jCarouselLite() method is called.
457 | The functions will be passed three arguments:
458 | 
459 | 1. Array of elements that are visible at the time of callback.
460 | 2. Boolean indicating whether the direction is forward (`true`) or backward (`false`);
461 | 3. Object containing information that differs depending on what triggered the advance. If triggered by clicking one of the `btnGo` elements, for example, the object has two properties: `btnGo`, which references the clicked DOM element, and `btnGoIndex`, presenting the index of the clicked DOM element in relation to the other "btnGo" buttons.
462 | 
463 | ```javascript
464 | $('div.carousel').jCarouselLite({
465 |   btnNext: '.next',
466 |   btnPrev: '.prev',
467 |   beforeStart: function(a, direction) {
468 |     alert('Before animation starts:' + a);
469 |   },
470 |   afterEnd: function(a, direction) {
471 |     alert('After animation ends:' + a);
472 |   }
473 | });
474 | ```
475 | 
476 | ## Events <a id="events"></a>
477 | 
478 | The plugin binds a few custom event handlers to the wrapping `div` element. They can be triggered at any time by using jQuery's event triggering mechanism. If other custom events are bound to the same elements, you may wish to trigger these using the `.jc` namespace. For example, instead of `.trigger("pauseCarousel")`, you could write `.trigger("pauseCarousel.jc")`.
479 | 
480 | ### `pauseCarousel`
481 | 
482 | Pauses an autoscrolling carousel until `resumeCarousel` is triggered. Note: if the `pause` option is set to `true`, then the `resumeCarousel` event is automatically triggered when the mouse leaves the carousel div.
483 | 
484 | ```javascript
485 | $('div.carousel').trigger('pauseCarousel')
486 | ```
487 | 
488 | ###  `resumeCarousel`
489 | 
490 | Resumes an autoscrolling carousel after having been paused.
491 | 
492 | ```javascript
493 | $('div.carousel').trigger('resumeCarousel')
494 | ```
495 | 
496 | ### `stopCarousel`
497 | 
498 | Stops an autoscrolling carousel in a similar fashion to `pauseCarousel`, with the exception that  `resumeCarousel` will NOT resume the carousel, and neither will the mouse leaving the carousel div.  To resume automatic movement on the carousel, use `startCarousel`.
499 | 
500 | ```javascript
501 | $('div.carousel').trigger('stopCarousel')
502 | ```
503 | 
504 | ### `endCarousel`
505 | 
506 | Stops the carousel from functioning and removes all events and data bound by the plugin.
507 | 
508 | ### `refreshCarousel`
509 | 
510 | Updates the dimensions of the carousel and, optionally (as of 1.9.1), the plugin's record of items being used in the carousel. When the `responsive` option is set to `true`, the `refreshCarousel` event is triggered automatically when the window stop resizing (it is "debounced" so it doesn't occur repeatedly during resize).
511 | 
512 | ```javascript
513 | // Insert a slide into the carousel.
514 | // Then...
515 | $('div.carousel').trigger('refreshCarousel', '[all]')
516 | ```
517 | 
518 | To get a better sense of dynamically adding slides to a carousel, see this <a href="http://plugins.learningjquery.com/jcarousellite/demo/refresh.html">example of `refreshCarousel`</a>
519 | 
520 | ```javascript
521 | $('div.carousel').trigger('endCarousel')
522 | ```
523 | 
524 | ### `go`
525 | 
526 | When triggering the `go` custom event, you can pass in an integer representing the item in the carousel to go to.
527 | 
528 | ```javascript
529 | $('div.carousel').trigger('go', 3)
530 | ```
531 | 
532 | You may also pass in a string ("+=n" or "-=n") to specify an item relative to the currently active item.
533 | 
534 | ```javascript
535 | $('div.carousel').trigger('go', '+=2')
536 | ```
537 | 
538 | The default is "+=1" (i.e. the next item).
539 | 
540 | ```javascript
541 | $('div.carousel').trigger('go')
542 | ```
543 | 
544 | ## Responsive Carousels<a id="responsive-carousels"></a>
545 | 
546 | The `responsive` option is set to `false` by default. Once you set it to `true`,
547 | you may want to set a few other options to get the desired effect:
548 | 
549 | ### Everything automatic (`autoCSS` is `true` by default, so no need to add it)
550 | 
551 | ```javascript
552 | $('div.carousel').jCarouselLite({
553 |   // autoCSS: true,
554 |   autoWidth: true,
555 |   responsive: true
556 | });
557 | ```
558 | 
559 | ### Everything manual (`autoWidth` is `false` by default, so no need to add it)
560 | 
561 | Your best bet in this situation is to use CSS media queries.
562 | 
563 | ```javascript
564 | $('div.carousel').jCarouselLite({
565 |   autoCSS: false,
566 |   // autoWidth: false,
567 |   responsive: true
568 | });
569 | 
570 | // Bind your own handler to the `refreshCarousel` custom event,
571 | // which is triggered when the window stops resizing
572 | $('div.carousel').on('refreshCarousel', function() {
573 |   // do something
574 | });
575 | ```
576 | 


--------------------------------------------------------------------------------
/src/jquery.jcarousellite.js:
--------------------------------------------------------------------------------
  1 | 
  2 | (function($) {
  3 |   $.jCarouselLite = {
  4 |     version: '1.9.3',
  5 |     curr: 0
  6 |   };
  7 | 
  8 |   $.fn.anim = typeof $.fn.velocity !== 'undefined' ? $.fn.velocity : $.fn.animate;
  9 | 
 10 |   $.fn.jCarouselLite = function(options) {
 11 |     var o = $.extend(true, {}, $.fn.jCarouselLite.defaults, options);
 12 |     var ceil = Math.ceil;
 13 |     var mabs = Math.abs;
 14 | 
 15 |     this.each(function() {
 16 | 
 17 |       var beforeCirc, afterCirc, pageNav, pageNavCount, resize,
 18 |         li, itemLength, curr,
 19 |         prepResize, touchEvents, $btnsGo;
 20 |       var isTouch = 'ontouchend' in document;
 21 |       var styles = {div: {}, ul: {}, li: {}};
 22 |       var running = false;
 23 |       var animCss = o.vertical ? 'top' : 'left';
 24 |       var aniProps = {};
 25 |       var sizeProp = o.vertical ? 'height' : 'width';
 26 |       var outerMethod = o.vertical ? 'outerHeight' : 'outerWidth';
 27 |       var self = this;
 28 |       var div = $(this);
 29 |       var ul = div.find(o.containerSelector).eq(0);
 30 |       var tLi = ul.children(o.itemSelector);
 31 |       var tl = tLi.length;
 32 |       var visibleNum = o.visible;
 33 |       // need visibleCeil and visibleFloor in case we want a fractional number of visible items at a time
 34 |       var visibleCeil = ceil(visibleNum);
 35 |       var visibleFloor = Math.floor(visibleNum);
 36 |       var start = Math.min(o.start, tl - 1);
 37 |       var direction = 1;
 38 |       var activeBtnOffset = 0;
 39 |       var activeBtnTypes = {};
 40 |       var startTouch = {};
 41 |       var endTouch = {};
 42 |       var axisPrimary = o.vertical ? 'y' : 'x';
 43 |       var axisSecondary = o.vertical ? 'x' : 'y';
 44 |       var init = o.init.call(this, o, tLi);
 45 | 
 46 |       // bail out for this carousel if the o.init() callback returns `false`
 47 |       if (init === false) {
 48 |         return;
 49 |       }
 50 | 
 51 |       var fixIds = function(i) {
 52 |         if (this.id) {
 53 |           this.id += i;
 54 |         }
 55 |       };
 56 | 
 57 |       var makeCircular = function() {
 58 |         if (beforeCirc && beforeCirc.length) {
 59 |           beforeCirc.remove();
 60 |           afterCirc.remove();
 61 |         }
 62 |         tLi = ul.children(o.liSelector);
 63 |         tl = tLi.length;
 64 |         beforeCirc = tLi.slice(tl - visibleCeil).clone(true).each(fixIds);
 65 |         afterCirc = tLi.slice(0, visibleCeil).clone(true).each(fixIds);
 66 |         ul.prepend(beforeCirc)
 67 |           .append(afterCirc);
 68 |         li = ul.children(o.liSelector);
 69 |         itemLength = li.length;
 70 |       };
 71 | 
 72 |       var iterations = function(itemLength, options) {
 73 |         return options.autoStop && (options.circular ? options.autoStop : Math.min(itemLength, options.autoStop));
 74 |       };
 75 | 
 76 |       div.data('dirjc', direction);
 77 |       div.data(animCss + 'jc', div.css(animCss));
 78 | 
 79 |       if (o.circular) {
 80 | 
 81 |         makeCircular();
 82 |         start += visibleCeil;
 83 |         activeBtnOffset = visibleCeil;
 84 | 
 85 |       } else {
 86 |         li = ul.children(o.liSelector);
 87 |         itemLength = li.length;
 88 |       }
 89 | 
 90 |       var setActive = function(i, types) {
 91 |         i = ceil(i);
 92 | 
 93 |         // Set active class on the appropriate carousel item
 94 |         li.filter('.' + o.activeClass).removeClass(o.activeClass);
 95 |         li.eq(i).addClass(o.activeClass);
 96 | 
 97 |         var activeBtnIndex = (i - activeBtnOffset) % tl;
 98 |         var visEnd = activeBtnIndex + visibleFloor;
 99 | 
100 |         if (types.go) {
101 |           // remove active and visible classes from all the go buttons
102 |           $btnsGo.removeClass(o.activeClass).removeClass(o.visibleClass);
103 |           // add active class to the go button corresponding to the first visible slide
104 |           $btnsGo.eq(activeBtnIndex).addClass(o.activeClass);
105 |           // add visible class to go buttons corresponding to all visible slides
106 |           $btnsGo.slice(activeBtnIndex, activeBtnIndex + visibleFloor).addClass(o.visibleClass);
107 | 
108 |           if (visEnd > $btnsGo.length) {
109 |             $btnsGo.slice(0, visEnd - $btnsGo.length).addClass(o.visibleClass);
110 |           }
111 |         }
112 | 
113 |         if (types.pager) {
114 |           pageNav.removeClass(o.activeClass);
115 |           pageNav.eq(ceil(activeBtnIndex / visibleNum)).addClass(o.activeClass);
116 |         }
117 | 
118 |         return activeBtnIndex;
119 |       };
120 | 
121 |       curr = start;
122 | 
123 |       $.jCarouselLite.curr = curr;
124 | 
125 |       var getDimensions = function(reset) {
126 |         var liSize, ulSize, divSize;
127 | 
128 |         if (reset) {
129 | 
130 |           styles.div[sizeProp] = '';
131 |           styles.li = {
132 |             width: '',
133 |             height: ''
134 |           };
135 | 
136 |           // bail out with the reset styles
137 |           return styles;
138 |         }
139 | 
140 |         // Full li size(incl margin)-Used for animation
141 |         liSize = li[outerMethod](true);
142 | 
143 |         // size of full ul(total length, not just for the visible items)
144 |         ulSize = liSize * itemLength;
145 | 
146 |         // size of entire div(total length for just the visible items)
147 |         divSize = liSize * visibleNum;
148 | 
149 |         styles.div[sizeProp] = divSize + 'px';
150 |         styles.ul[sizeProp] = ulSize + 'px';
151 |         styles.ul[animCss] = -(curr * liSize) + 'px';
152 |         styles.li = {
153 |           width: li.width(),
154 |           height: li.height()
155 |         };
156 |         styles.liSize = liSize;
157 | 
158 |         return styles;
159 |       };
160 | 
161 |       var setDimensions = function(reset) {
162 |         var css, tmpDivSize;
163 |         var prelimCss = {
164 |           div: {visibility: 'visible', position: 'relative', zIndex: 2, left: '0'},
165 |           ul: {margin: '0', padding: '0', position: 'relative', listStyleType: 'none', zIndex: 1},
166 |           li: {overflow: o.vertical ? 'hidden' : 'visible', 'float': o.vertical ? 'none' : 'left'}
167 |         };
168 | 
169 |         if (reset) {
170 |           css = getDimensions(true);
171 |           div.css(css.div);
172 |           ul.css(css.ul);
173 |           li.css(css.li);
174 |         }
175 | 
176 |         css = getDimensions();
177 | 
178 |         if (o.autoCSS) {
179 |           $.extend(true, css, prelimCss);
180 |           // firstCss = false;
181 |         }
182 | 
183 |         if (o.autoWidth) {
184 |           tmpDivSize = parseInt(div.css(sizeProp), 10);
185 |           styles.liSize = tmpDivSize / o.visible;
186 |           css.li[sizeProp] = styles.liSize - (li[outerMethod](true) - parseInt(li.css(sizeProp), 10));
187 | 
188 |           // Need to adjust other settings to fit with li width
189 |           css.ul[sizeProp] = (styles.liSize * itemLength) + 'px';
190 |           css.ul[animCss] = -(curr * styles.liSize) + 'px';
191 |           css.div[sizeProp] = tmpDivSize;
192 |         }
193 | 
194 |         if (o.autoCSS) {
195 |           li.css(css.li);
196 |           ul.css(css.ul);
197 |           div.css(css.div);
198 |         }
199 |       };
200 | 
201 |       setDimensions();
202 | 
203 |       var vis = function vis() {
204 |         return li.slice(curr).slice(0, visibleCeil);
205 |       };
206 | 
207 |       $.jCarouselLite.vis = vis;
208 | 
209 |       var go = function(to, settings) {
210 |         if (running) {
211 |           return false;
212 |         }
213 |         settings = settings || {};
214 |         var prev = curr;
215 |         var direction = to > curr;
216 |         var speed = typeof settings.speed !== 'undefined' ? settings.speed : o.speed;
217 |         // offset appears if touch moves slide;
218 |         var offset = settings.offset || 0;
219 | 
220 |         if (o.beforeStart) {
221 |           o.beforeStart.call(div, vis(), direction, settings);
222 |         }
223 | 
224 |         // If circular and we are in first or last, then go to the other end
225 |         if (o.circular) {
226 |           if (to > curr && to > itemLength - visibleCeil) {
227 | 
228 |             // temporarily set "to" as the difference
229 |             to = to - curr;
230 |             curr = curr % tl;
231 | 
232 |             // use the difference to make "to" correct relative to curr
233 |             to = curr + to;
234 |             ul.css(animCss, (-curr * styles.liSize) - offset);
235 |           } else if (to < curr && to < 0) {
236 |             curr += tl;
237 |             to += tl;
238 |             ul.css(animCss, (-curr * styles.liSize) - offset);
239 |           }
240 | 
241 |           curr = to + (to % 1);
242 | 
243 |         // If non-circular and "to" points beyond first or last, we change to first or last.
244 |         } else {
245 |           if (to < 0) {
246 |             to = 0;
247 |           } else if (to > itemLength - visibleFloor) {
248 |             to = itemLength - visibleFloor;
249 |           }
250 | 
251 |           curr = to;
252 | 
253 |           if (curr === 0 && o.first) {
254 |             o.first.call(this, vis(), direction);
255 |           }
256 | 
257 |           if (curr === itemLength - visibleFloor && o.last) {
258 |             o.last.call(this, vis(), direction);
259 |           }
260 | 
261 |           // Disable buttons when the carousel reaches the last/first, and enable when not
262 |           if (o.btnPrev) {
263 |             o.$btnPrev.toggleClass(o.btnDisabledClass, curr === 0);
264 |           }
265 | 
266 |           if (o.btnNext) {
267 |             o.$btnNext.toggleClass(o.btnDisabledClass, curr === itemLength - visibleFloor);
268 |           }
269 |         }
270 | 
271 |         // if btnGo, set the active class on the btnGo element corresponding to the first visible carousel li
272 |         // if autoPager, set active class on the appropriate autopager element
273 |         setActive(curr, activeBtnTypes);
274 | 
275 |         $.jCarouselLite.curr = curr;
276 | 
277 |         if (prev === curr && !settings.force) {
278 |           if (o.afterEnd) {
279 |             o.afterEnd.call(div, vis(), direction, settings);
280 |           }
281 | 
282 |           return curr;
283 |         }
284 | 
285 |         running = true;
286 | 
287 |         aniProps[animCss] = -(curr * styles.liSize);
288 |         ul.anim(aniProps, speed, o.easing, function() {
289 |           if (o.afterEnd) {
290 |             o.afterEnd.call(div, vis(), direction, settings);
291 |           }
292 |           running = false;
293 |         });
294 | 
295 |         return curr;
296 |       }; // end go function
297 | 
298 |       if (o.btnGo && o.btnGo.length) {
299 | 
300 |         if ($.isArray(o.btnGo) && typeof o.btnGo[0] === 'string') {
301 |           $btnsGo = $(o.btnGo.join());
302 |         } else {
303 |           $btnsGo = $(o.btnGo);
304 |         }
305 | 
306 |         $btnsGo.each(function(i) {
307 |           $(this).bind('click.jc', function(event) {
308 |             event.preventDefault();
309 |             var btnInfo = {
310 |               btnGo: this,
311 |               btnGoIndex: i
312 |             };
313 | 
314 |             return go(o.circular ? visibleNum + i : i, btnInfo);
315 |           });
316 |         });
317 |         activeBtnTypes.go = 1;
318 |       }
319 | 
320 |       // set up timed advancer
321 |       var advanceCounter = 0;
322 |       var autoStop = iterations(tl, o);
323 |       var autoScrollBy = typeof o.auto === 'number' ? o.auto : o.scroll;
324 | 
325 |       var advancer = function() {
326 |         self.setAutoAdvance = setTimeout(function() {
327 | 
328 |           if (!autoStop || autoStop > advanceCounter) {
329 |             direction = div.data('dirjc');
330 |             go(curr + (direction * autoScrollBy), {auto: true});
331 |             advanceCounter++;
332 |             advancer();
333 |           }
334 |         }, o.timeout);
335 |       };
336 | 
337 |       // bind click handlers to prev and next buttons, if set
338 |       $.each(['btnPrev', 'btnNext'], function(index, btn) {
339 |         if (o[btn]) {
340 |           o['$' + btn] = $.isFunction(o[btn]) ? o[btn].call(div[0]) : $(o[btn]);
341 |           o['$' + btn].bind('click.jc', function(event) {
342 |             event.preventDefault();
343 |             var step = index === 0 ? curr - o.scroll : curr + o.scroll;
344 | 
345 |             if (o.directional) {
346 |               // set direction of subsequent scrolls to:
347 |               //  1 if "btnNext" clicked
348 |               // -1 if "btnPrev" clicked
349 |               div.data('dirjc', (index ? 1 : -1));
350 |             }
351 | 
352 |             return go(step);
353 |           });
354 |         }
355 |       });
356 | 
357 |       if (!o.circular) {
358 |         if (o.btnPrev && start === 0) {
359 |           o.$btnPrev.addClass(o.btnDisabledClass);
360 |         }
361 | 
362 |         if (o.btnNext && start + visibleFloor >= itemLength) {
363 |           o.$btnNext.addClass(o.btnDisabledClass);
364 |         }
365 |       }
366 | 
367 |       if (o.autoPager) {
368 |         pageNavCount = ceil(tl / visibleNum);
369 |         pageNav = [];
370 | 
371 |         for (var i = 0; i < pageNavCount; i++) {
372 |           pageNav.push('<li><a href="#">' + (i + 1) + '</a></li>');
373 |         }
374 | 
375 |         if (pageNav.length > 1) {
376 |           pageNav = $('<ul>' + pageNav.join('') + '</ul>').appendTo(o.autoPager).find('li');
377 |           pageNav.find('a').each(function(i) {
378 |             $(this).bind('click.jc', function(event) {
379 |               event.preventDefault();
380 |               var slide = i * visibleNum;
381 | 
382 |               if (o.circular) {
383 |                 slide += visibleNum;
384 |               }
385 | 
386 |               return go(slide);
387 |             });
388 |           });
389 |           activeBtnTypes.pager = 1;
390 |         }
391 |       }
392 | 
393 |       // set the active class on the btn corresponding to the "start" li
394 |       setActive(start, activeBtnTypes);
395 | 
396 |       if (o.mouseWheel && div.mousewheel) {
397 |         div.bind('mousewheel.jc', function(e, d) {
398 |           return d > 0 ? go(curr - o.scroll) : go(curr + o.scroll);
399 |         });
400 |       }
401 | 
402 |       if (o.pause && o.auto && !isTouch) {
403 |         div.bind('mouseenter.jc', function() {
404 |           div.trigger('pauseCarousel.jc');
405 |         }).bind('mouseleave.jc', function() {
406 |           div.trigger('resumeCarousel.jc');
407 |         });
408 |       }
409 | 
410 |       if (o.auto) {
411 |         advancer();
412 |       }
413 | 
414 |       // bind custom events so they can be triggered by user
415 |       div
416 |       .bind('go.jc', function(e, to, settings) {
417 | 
418 |         if (typeof to === 'undefined') {
419 |           to = '+=1';
420 |         }
421 | 
422 |         var todir = typeof to === 'string' && /(\+=|-=)(\d+)/.exec(to);
423 | 
424 |         if (todir) {
425 |           to = todir[1] === '-=' ? curr - todir[2] * 1 : curr + todir[2] * 1;
426 |         } else {
427 |           to += start;
428 |         }
429 |         go(to, settings);
430 |       })
431 |       .bind('startCarousel.jc', function() {
432 |         clearTimeout(self.setAutoAdvance);
433 |         self.setAutoAdvance = undefined;
434 |         div.trigger('go', '+=' + o.scroll);
435 |         advancer();
436 |         div.removeData('pausedjc').removeData('stoppedjc');
437 |       })
438 |       .bind('resumeCarousel.jc', function(event, forceRun) {
439 |         if (self.setAutoAdvance) {
440 |           return;
441 |         }
442 |         clearTimeout(self.setAutoAdvance);
443 |         self.setAutoAdvance = undefined;
444 | 
445 |         var stopped = div.data('stoppedjc');
446 | 
447 |         if (forceRun || !stopped) {
448 |           advancer();
449 |           div.removeData('pausedjc');
450 | 
451 |           if (stopped) {
452 |             div.removeData('stoppedjc');
453 |           }
454 |         }
455 |       })
456 | 
457 |       .bind('pauseCarousel.jc', function() {
458 |         clearTimeout(self.setAutoAdvance);
459 |         self.setAutoAdvance = undefined;
460 |         div.data('pausedjc', true);
461 |       })
462 |       .bind('stopCarousel.jc', function() {
463 |         clearTimeout(self.setAutoAdvance);
464 |         self.setAutoAdvance = undefined;
465 | 
466 |         div.data('stoppedjc', true);
467 |       })
468 | 
469 |       .bind('refreshCarousel.jc', function(event, all) {
470 |         if (all && o.circular) {
471 |           makeCircular();
472 |         }
473 |         setDimensions(o.autoCSS);
474 |       })
475 | 
476 |       .bind('endCarousel.jc', function() {
477 |         if (self.setAutoAdvance) {
478 |           clearTimeout(self.setAutoAdvance);
479 |           self.setAutoAdvance = undefined;
480 |         }
481 | 
482 |         if (o.btnPrev) {
483 |           o.$btnPrev.addClass(o.btnDisabledClass).unbind('.jc');
484 |         }
485 | 
486 |         if (o.btnNext) {
487 |           o.$btnNext.addClass(o.btnDisabledClass).unbind('.jc');
488 |         }
489 | 
490 |         if (o.btnGo) {
491 |           $.each(o.btnGo, function(i, val) {
492 |             $(val).unbind('.jc');
493 |           });
494 |         }
495 | 
496 |         if (o.circular) {
497 |           li.slice(0, visibleCeil).remove();
498 |           li.slice(-visibleCeil).remove();
499 |         }
500 |         $.each([animCss + 'jc', 'pausedjc', 'stoppedjc', 'dirjc'], function(i, d) {
501 |           div.removeData(d);
502 |         });
503 |         div.unbind('.jc');
504 |       });
505 | 
506 |       // touch gesture support
507 | 
508 |       touchEvents = {
509 |         touchstart: function(event) {
510 |           endTouch.x = 0;
511 |           endTouch.y = 0;
512 |           startTouch.x = event.targetTouches[0].pageX;
513 |           startTouch.y = event.targetTouches[0].pageY;
514 |           startTouch[animCss] = parseFloat(ul.css(animCss));
515 |           startTouch.time = +new Date();
516 |         },
517 | 
518 |         touchmove: function(event) {
519 |           var tlength = event.targetTouches.length;
520 | 
521 |           if (tlength === 1) {
522 |             endTouch.x = event.targetTouches[0].pageX;
523 |             endTouch.y = event.targetTouches[0].pageY;
524 |             aniProps[animCss] = startTouch[animCss] + (endTouch[axisPrimary] - startTouch[axisPrimary]);
525 |             ul.css(aniProps);
526 | 
527 |             if (o.preventTouchWindowScroll) {
528 |               event.preventDefault();
529 |             }
530 |           } else {
531 |             endTouch.x = startTouch.x;
532 |             endTouch.y = startTouch.y;
533 |           }
534 |         },
535 | 
536 |         touchend: function() {
537 |           // bail out early if there is no touch movement
538 |           if (!endTouch.x) {
539 |             return;
540 |           }
541 | 
542 |           var pxDelta = startTouch[axisPrimary] - endTouch[axisPrimary];
543 |           var pxAbsDelta = mabs(pxDelta);
544 |           var primaryAxisGood = pxAbsDelta > o.swipeThresholds[axisPrimary];
545 |           var secondaryAxisGood =  mabs(startTouch[axisSecondary] - endTouch[axisSecondary]) < o.swipeThresholds[axisSecondary];
546 |           var timeDelta = +new Date() - startTouch.time;
547 |           var quickSwipe = timeDelta < o.swipeThresholds.time;
548 |           var operator = pxDelta > 0 ? '+=' : '-=';
549 |           var to = operator + o.scroll;
550 |           var swipeInfo  = {force: true};
551 | 
552 |           // quick, clean swipe
553 |           if (quickSwipe && primaryAxisGood && secondaryAxisGood) {
554 |             // set animation speed to twice as fast as that set in speed option
555 |             swipeInfo.speed = o.speed / 2;
556 |           } else
557 |           // slow swipe < 1/2 slide width, OR
558 |           // not enough movement for swipe, OR
559 |           // too much movement on secondary axis when quick swipe
560 |           if ((!quickSwipe && pxAbsDelta < styles.liSize / 2) ||
561 |             !primaryAxisGood ||
562 |             (quickSwipe && !secondaryAxisGood)
563 |             ) {
564 |             // revert to same slide
565 |             to = '+=0';
566 |           } else
567 |           // slow swipe > 1/2 slide width
568 |           if (!quickSwipe && pxAbsDelta > styles.liSize / 2) {
569 |             to = Math.round(pxAbsDelta / styles.liSize);
570 |             to = operator + (to > o.visible ? o.visible : to);
571 | 
572 |             // send pxDelta along as offset in case carousel is circular and needs to reset
573 |             swipeInfo.offset = pxDelta;
574 |           }
575 | 
576 |           div.trigger('go.jc', [to, swipeInfo]);
577 |           endTouch = {};
578 |         },
579 | 
580 |         handle: function(event) {
581 |           event = event.originalEvent;
582 |           touchEvents[event.type](event);
583 |         }
584 |       };
585 | 
586 |       if (isTouch && o.swipe) {
587 |         div.bind('touchstart.jc touchmove.jc touchend.jc', touchEvents.handle);
588 |       } // end swipe events
589 | 
590 |       // Responsive design handling:
591 |       // Reset dimensions on window.resize
592 |       if (o.responsive) {
593 |         prepResize = o.autoCSS;
594 |         $(window).bind('resize', function() {
595 |           if (prepResize) {
596 |             ul.width(ul.width() * 2);
597 |             prepResize = false;
598 |           }
599 | 
600 |           clearTimeout(resize);
601 |           resize = setTimeout(function() {
602 |             div.trigger('refreshCarousel.jc', [true]);
603 |             prepResize = o.autoCSS;
604 |           }, 100);
605 |         });
606 |       }
607 | 
608 |     }); // end each
609 | 
610 |     return this;
611 |   };
612 | 
613 |   $.fn.jCarouselLite.defaults = {
614 | 
615 |     // valid selector for the "ul" container containing the slides
616 |     containerSelector: 'ul',
617 | 
618 |     // valid selector for the slide "li" items
619 |     itemSelector: 'li',
620 | 
621 |     btnPrev: null,
622 |     btnNext: null,
623 | 
624 |     // array (or jQuery object) of elements. When clicked, makes the corresponding carousel LI the first visible one
625 |     btnGo: null,
626 | 
627 |     // selector (or jQuery object) indicating the containing element for pagination navigation.
628 |     autoPager: null,
629 |     btnDisabledClass: 'disabled',
630 | 
631 |     // class applied to the active slide and btnGo element
632 |     activeClass: 'active',
633 | 
634 |     // class applied to the btnGo elements corresponding to the visible slides
635 |     visibleClass: 'vis',
636 |     mouseWheel: false,
637 |     speed: 200,
638 |     easing: null,
639 | 
640 |     // milliseconds between scrolls
641 |     timeout: 4000,
642 | 
643 |     // true to enable auto scrolling; number to auto-scroll by different number at a time than that of scroll option
644 |     auto: false,
645 | 
646 |     // true to enable changing direction of auto scrolling when user clicks prev or next button
647 |     directional: false,
648 | 
649 |     // number of times before autoscrolling will stop. (if circular is false, won't iterate more than number of items)
650 |     autoStop: false,
651 | 
652 |     // pause scrolling on hover
653 |     pause: true,
654 |     vertical: false,
655 | 
656 |     // continue scrolling when reach the last item
657 |     circular: true,
658 | 
659 |     // the number to be visible at a given time.
660 |     visible: 3,
661 | 
662 |     // index of item to show initially in the first posiition
663 |     start: 0,
664 | 
665 |     // number of items to scroll at a time
666 |     scroll: 1,
667 | 
668 |     // whether to set initial styles on the carousel elements. See readme for info
669 |     autoCSS: true,
670 | 
671 |     // whether the dimensions should change on resize
672 |     responsive: false,
673 | 
674 |     // whether to set width of <li>s (and left/top of <ul>) based on width of <div>
675 |     autoWidth: false,
676 | 
677 |     // touch options
678 |     swipe: true,
679 |     swipeThresholds: {
680 |       x: 80,
681 |       y: 40,
682 |       time: 150
683 |     },
684 | 
685 |     // whether to prevent vertical scrolling of the document window when swiping
686 |     preventTouchWindowScroll: true,
687 | 
688 |     // Function to be called for each matched carousel when .jCaourselLite() is called.
689 |     // Inside the function, `this` is the carousel div.
690 |     // The function can take 2 arguments:
691 |     // 1. The merged options object
692 |     // 2. A jQuery object containing the <li> items in the carousel
693 |     // If the function returns `false`, the plugin will skip all the carousel magic for that carousel div
694 |     init: function() {},
695 | 
696 |     // function to be called once the first slide is hit
697 |     first: null,
698 | 
699 |     // function to be called once the last slide is hit
700 |     last: null,
701 | 
702 |     // function to be called before each transition starts
703 |     beforeStart: null,
704 | 
705 |     // function to be called after each transition ends
706 |     afterEnd: null
707 |   };
708 | 
709 | })(jQuery);
710 | 


--------------------------------------------------------------------------------
/jcarousellite.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * jCarousel Lite - v1.9.3 - 2015-02-16
  3 |  * http://kswedberg.github.com/jquery-carousel-lite/
  4 |  * Copyright (c) 2015 Karl Swedberg
  5 |  * based on the original by Ganeshji Marwaha (gmarwaha.com)
  6 |  * Licensed MIT (http://kswedberg.github.com/jquery-carousel-lite/blob/master/LICENSE-MIT)
  7 |  */
  8 | 
  9 | 
 10 | (function($) {
 11 |   $.jCarouselLite = {
 12 |     version: '1.9.3',
 13 |     curr: 0
 14 |   };
 15 | 
 16 |   $.fn.anim = typeof $.fn.velocity !== 'undefined' ? $.fn.velocity : $.fn.animate;
 17 | 
 18 |   $.fn.jCarouselLite = function(options) {
 19 |     var o = $.extend(true, {}, $.fn.jCarouselLite.defaults, options),
 20 |         ceil = Math.ceil,
 21 |         mabs = Math.abs;
 22 | 
 23 |     this.each(function() {
 24 | 
 25 |       var beforeCirc, afterCirc, pageNav, pageNavCount, resize,
 26 |           li, itemLength, curr,
 27 |           prepResize, touchEvents, $btnsGo,
 28 |           isTouch = 'ontouchend' in document,
 29 |           styles = { div: {}, ul: {}, li: {} },
 30 |           // firstCss = true,
 31 |           running = false,
 32 |           animCss = o.vertical ? 'top': 'left',
 33 |           aniProps = {},
 34 |           sizeProp = o.vertical ? 'height': 'width',
 35 |           outerMethod = o.vertical ? 'outerHeight': 'outerWidth',
 36 |           self = this,
 37 |           div = $(this),
 38 |           ul = div.find(o.containerSelector).eq(0),
 39 |           tLi = ul.children(o.itemSelector),
 40 |           tl = tLi.length,
 41 |           visibleNum = o.visible,
 42 |           // need visibleCeil and visibleFloor in case we want a fractional number of visible items at a time
 43 |           visibleCeil = ceil(visibleNum),
 44 |           visibleFloor = Math.floor(visibleNum),
 45 |           start = Math.min(o.start, tl - 1),
 46 |           direction = 1,
 47 |           activeBtnOffset = 0,
 48 |           activeBtnTypes = {},
 49 |           startTouch = {},
 50 |           endTouch = {},
 51 |           axisPrimary = o.vertical ? 'y' : 'x',
 52 |           axisSecondary = o.vertical ? 'x' : 'y';
 53 | 
 54 | 
 55 |       var init = o.init.call(this, o, tLi);
 56 |       // bail out for this carousel if the o.init() callback returns `false`
 57 |       if ( init === false ) {
 58 |         return;
 59 |       }
 60 | 
 61 |       var makeCircular = function() {
 62 |         if (beforeCirc && beforeCirc.length) {
 63 |           beforeCirc.remove();
 64 |           afterCirc.remove();
 65 |         }
 66 |         tLi = ul.children(o.liSelector);
 67 |         tl = tLi.length;
 68 |         beforeCirc = tLi.slice( tl - visibleCeil ).clone(true).each(fixIds);
 69 |         afterCirc = tLi.slice( 0, visibleCeil ).clone(true).each(fixIds);
 70 |         ul.prepend( beforeCirc )
 71 |           .append( afterCirc );
 72 |         li = ul.children(o.liSelector);
 73 |         itemLength = li.length;
 74 |       };
 75 | 
 76 |       div.data('dirjc', direction);
 77 |       div.data(animCss + 'jc', div.css(animCss));
 78 | 
 79 |       if (o.circular) {
 80 | 
 81 |         makeCircular();
 82 |         start += visibleCeil;
 83 |         activeBtnOffset = visibleCeil;
 84 | 
 85 |       } else {
 86 |         li = ul.children(o.liSelector);
 87 |         itemLength = li.length;
 88 |       }
 89 | 
 90 |       if (o.btnGo && o.btnGo.length) {
 91 | 
 92 |         if ( $.isArray(o.btnGo) && typeof o.btnGo[0] === 'string' ) {
 93 |           $btnsGo = $( o.btnGo.join() );
 94 |         } else {
 95 |           $btnsGo = $(o.btnGo);
 96 |         }
 97 | 
 98 |         $btnsGo.each(function(i) {
 99 |           $(this).bind('click.jc', function(event) {
100 |             event.preventDefault();
101 |             var btnInfo = {
102 |               btnGo: this,
103 |               btnGoIndex: i
104 |             };
105 |             return go(o.circular ? visibleNum + i : i, btnInfo);
106 |           });
107 |         });
108 |         activeBtnTypes.go = 1;
109 |       }
110 | 
111 |       var setActive = function(i, types) {
112 |         i = ceil(i);
113 | 
114 |         // Set active class on the appropriate carousel item
115 |         li.filter('.' + o.activeClass).removeClass(o.activeClass);
116 |         li.eq(i).addClass(o.activeClass);
117 | 
118 |         var activeBtnIndex = (i - activeBtnOffset) % tl,
119 |             visEnd = activeBtnIndex + visibleFloor;
120 | 
121 |         if ( types.go ) {
122 |           // remove active and visible classes from all the go buttons
123 |           $btnsGo.removeClass(o.activeClass).removeClass(o.visibleClass);
124 |           // add active class to the go button corresponding to the first visible slide
125 |           $btnsGo.eq(activeBtnIndex).addClass(o.activeClass);
126 |           // add visible class to go buttons corresponding to all visible slides
127 |           $btnsGo.slice(activeBtnIndex, activeBtnIndex + visibleFloor).addClass(o.visibleClass);
128 | 
129 |           if ( visEnd > $btnsGo.length ) {
130 |             $btnsGo.slice(0, visEnd - $btnsGo.length).addClass(o.visibleClass);
131 |           }
132 |         }
133 | 
134 |         if ( types.pager ) {
135 |           pageNav.removeClass(o.activeClass);
136 |           pageNav.eq( ceil(activeBtnIndex / visibleNum) ).addClass(o.activeClass);
137 |         }
138 |         return activeBtnIndex;
139 |       };
140 | 
141 |       curr = start;
142 | 
143 |       $.jCarouselLite.curr = curr;
144 | 
145 |       var getDimensions = function(reset) {
146 |         var liSize, ulSize, divSize;
147 | 
148 |         if (reset) {
149 | 
150 |           styles.div[sizeProp] = '';
151 |           styles.li = {
152 |             width: '',
153 |             height: ''
154 |           };
155 |           // bail out with the reset styles
156 |           return styles;
157 |         }
158 | 
159 |         // Full li size(incl margin)-Used for animation
160 |         liSize = li[outerMethod](true);
161 | 
162 |         // size of full ul(total length, not just for the visible items)
163 |         ulSize = liSize * itemLength;
164 | 
165 |         // size of entire div(total length for just the visible items)
166 |         divSize = liSize * visibleNum;
167 | 
168 |         styles.div[sizeProp] = divSize + 'px';
169 |         styles.ul[sizeProp] = ulSize + 'px';
170 |         styles.ul[animCss] = -(curr * liSize) + 'px';
171 |         styles.li = {
172 |           width: li.width(),
173 |           height: li.height()
174 |         };
175 |         styles.liSize = liSize;
176 |         return styles;
177 |       };
178 | 
179 | 
180 |       var setDimensions = function(reset) {
181 |         var css, tmpDivSize;
182 |         var prelimCss = {
183 |           div: {visibility: 'visible', position: 'relative', zIndex: 2, left: '0'},
184 |           ul: {margin: '0', padding: '0', position: 'relative', listStyleType: 'none', zIndex: 1},
185 |           li: {overflow: o.vertical ? 'hidden' : 'visible', 'float': o.vertical ? 'none' : 'left'}
186 |         };
187 | 
188 |         if (reset) {
189 |           css = getDimensions(true);
190 |           div.css(css.div);
191 |           ul.css(css.ul);
192 |           li.css(css.li);
193 |         }
194 | 
195 |         css = getDimensions();
196 | 
197 |         if (o.autoCSS) {
198 |           $.extend(true, css, prelimCss);
199 |           // firstCss = false;
200 |         }
201 | 
202 |         if (o.autoWidth) {
203 |           tmpDivSize = parseInt(div.css(sizeProp), 10);
204 |           styles.liSize = tmpDivSize / o.visible;
205 |           css.li[sizeProp] = styles.liSize - (li[outerMethod](true) - parseInt(li.css(sizeProp), 10));
206 | 
207 |           // Need to adjust other settings to fit with li width
208 |           css.ul[sizeProp] = (styles.liSize * itemLength) + 'px';
209 |           css.ul[animCss] = -(curr * styles.liSize) + 'px';
210 |           css.div[sizeProp] = tmpDivSize;
211 |         }
212 | 
213 |         if (o.autoCSS) {
214 |           li.css(css.li);
215 |           ul.css(css.ul);
216 |           div.css(css.div);
217 |         }
218 |       };
219 | 
220 |       setDimensions();
221 | 
222 |       // set up timed advancer
223 |       var advanceCounter = 0,
224 |           autoStop = iterations(tl, o),
225 |           autoScrollBy = typeof o.auto === 'number' ? o.auto : o.scroll;
226 | 
227 |       var advancer = function() {
228 |         self.setAutoAdvance = setTimeout(function() {
229 | 
230 |           if (!autoStop || autoStop > advanceCounter) {
231 |             direction = div.data('dirjc');
232 |             go( curr + (direction * autoScrollBy), {auto: true} );
233 |             advanceCounter++;
234 |             advancer();
235 |           }
236 |         }, o.timeout);
237 |       };
238 | 
239 |       // bind click handlers to prev and next buttons, if set
240 |       $.each([ 'btnPrev', 'btnNext' ], function(index, btn) {
241 |         if ( o[btn] ) {
242 |           o['$' + btn] = $.isFunction( o[btn] ) ? o[btn].call( div[0] ) : $( o[btn] );
243 |           o['$' + btn].bind('click.jc', function(event) {
244 |             event.preventDefault();
245 |             var step = index === 0 ? curr - o.scroll : curr + o.scroll;
246 |             if (o.directional) {
247 |               // set direction of subsequent scrolls to:
248 |               //  1 if "btnNext" clicked
249 |               // -1 if "btnPrev" clicked
250 |               div.data( 'dirjc', (index ? 1 : -1) );
251 |             }
252 |             return go( step );
253 |           });
254 |         }
255 |       });
256 | 
257 |       if (!o.circular) {
258 |         if (o.btnPrev && start === 0) {
259 |           o.$btnPrev.addClass(o.btnDisabledClass);
260 |         }
261 | 
262 |         if ( o.btnNext && start + visibleFloor >= itemLength ) {
263 |           o.$btnNext.addClass(o.btnDisabledClass);
264 |         }
265 |       }
266 | 
267 |       if (o.autoPager) {
268 |         pageNavCount = ceil(tl / visibleNum);
269 |         pageNav = [];
270 |         for (var i=0; i < pageNavCount; i++) {
271 |           pageNav.push('<li><a href="#">' + (i+1) + '</a></li>');
272 |         }
273 |         if (pageNav.length > 1) {
274 |           pageNav = $('<ul>' + pageNav.join('') + '</ul>').appendTo(o.autoPager).find('li');
275 |           pageNav.find('a').each(function(i) {
276 |             $(this).bind('click.jc', function(event) {
277 |               event.preventDefault();
278 |               var slide = i * visibleNum;
279 |               if (o.circular) {
280 |                 slide += visibleNum;
281 |               }
282 |               return go(slide);
283 |             });
284 |           });
285 |           activeBtnTypes.pager = 1;
286 |         }
287 |       }
288 | 
289 |       // set the active class on the btn corresponding to the "start" li
290 |       setActive(start, activeBtnTypes);
291 | 
292 |       if (o.mouseWheel && div.mousewheel) {
293 |         div.bind('mousewheel.jc', function(e, d) {
294 |           return d > 0 ? go(curr - o.scroll) : go(curr + o.scroll);
295 |         });
296 |       }
297 | 
298 |       if (o.pause && o.auto && !isTouch) {
299 |         div.bind('mouseenter.jc', function() {
300 |           div.trigger('pauseCarousel.jc');
301 |         }).bind('mouseleave.jc', function() {
302 |           div.trigger('resumeCarousel.jc');
303 |         });
304 |       }
305 | 
306 |       if (o.auto) {
307 |         advancer();
308 |       }
309 | 
310 |       function vis() {
311 |         return li.slice(curr).slice(0, visibleCeil);
312 |       }
313 | 
314 |       $.jCarouselLite.vis = vis;
315 | 
316 |       function go(to, settings) {
317 |         if (running) { return false; }
318 |         settings = settings || {};
319 |         var prev = curr,
320 |             direction = to > curr,
321 |             speed = typeof settings.speed !== 'undefined' ? settings.speed : o.speed,
322 |             // offset appears if touch moves slides
323 |             offset = settings.offset || 0;
324 | 
325 |         if (o.beforeStart) {
326 |           o.beforeStart.call(div, vis(), direction, settings);
327 |         }
328 | 
329 |         // If circular and we are in first or last, then go to the other end
330 |         if (o.circular) {
331 |           if (to > curr && to > itemLength - visibleCeil) {
332 | 
333 |             // temporarily set "to" as the difference
334 |             to = to - curr;
335 |             curr = curr % tl;
336 | 
337 |             // use the difference to make "to" correct relative to curr
338 |             to = curr + to;
339 |             ul.css(animCss, (-curr * styles.liSize) - offset);
340 |           } else if ( to < curr && to < 0) {
341 |             curr += tl;
342 |             to += tl;
343 |             ul.css(animCss, (-curr * styles.liSize) - offset);
344 |           }
345 | 
346 |           curr = to + (to % 1);
347 | 
348 |         // If non-circular and "to" points beyond first or last, we change to first or last.
349 |         } else {
350 |           if (to < 0) {
351 |             to = 0;
352 |           } else if  (to > itemLength - visibleFloor) {
353 |             to = itemLength - visibleFloor;
354 |           }
355 | 
356 |           curr = to;
357 | 
358 |           if (curr === 0 && o.first) {
359 |             o.first.call(this, vis(), direction);
360 |           }
361 | 
362 |           if (curr === itemLength - visibleFloor && o.last) {
363 |             o.last.call(this, vis(), direction);
364 |           }
365 | 
366 |           // Disable buttons when the carousel reaches the last/first, and enable when not
367 |           if (o.btnPrev) {
368 |             o.$btnPrev.toggleClass(o.btnDisabledClass, curr === 0);
369 |           }
370 |           if (o.btnNext) {
371 |             o.$btnNext.toggleClass(o.btnDisabledClass, curr === itemLength - visibleFloor);
372 |           }
373 |         }
374 | 
375 |         // if btnGo, set the active class on the btnGo element corresponding to the first visible carousel li
376 |         // if autoPager, set active class on the appropriate autopager element
377 |         setActive(curr, activeBtnTypes);
378 | 
379 |         $.jCarouselLite.curr = curr;
380 | 
381 |         if (prev === curr && !settings.force) {
382 |           if (o.afterEnd) {
383 |             o.afterEnd.call(div, vis(), direction, settings);
384 |           }
385 |           return curr;
386 |         }
387 | 
388 |         running = true;
389 | 
390 |         aniProps[animCss] = -(curr * styles.liSize);
391 |         ul.anim(aniProps, speed, o.easing, function() {
392 |           if (o.afterEnd) {
393 |             o.afterEnd.call(div, vis(), direction, settings);
394 |           }
395 |           running = false;
396 |         });
397 | 
398 |         return curr;
399 |       } // end go function
400 | 
401 |       // bind custom events so they can be triggered by user
402 |       div
403 |       .bind('go.jc', function(e, to, settings) {
404 | 
405 |         if (typeof to === 'undefined') {
406 |           to = '+=1';
407 |         }
408 | 
409 |         var todir = typeof to === 'string' && /(\+=|-=)(\d+)/.exec(to);
410 | 
411 |         if ( todir ) {
412 |           to = todir[1] === '-=' ? curr - todir[2] * 1 : curr + todir[2] * 1;
413 |         } else {
414 |           to += start;
415 |         }
416 |         go(to, settings);
417 |       })
418 |       .bind('startCarousel.jc', function() {
419 |         clearTimeout(self.setAutoAdvance);
420 |         self.setAutoAdvance = undefined;
421 |         div.trigger('go', '+=' + o.scroll);
422 |         advancer();
423 |         div.removeData('pausedjc').removeData('stoppedjc');
424 |       })
425 |       .bind('resumeCarousel.jc', function(event, forceRun) {
426 |         if (self.setAutoAdvance) { return; }
427 |         clearTimeout(self.setAutoAdvance);
428 |         self.setAutoAdvance = undefined;
429 | 
430 |         var stopped = div.data('stoppedjc');
431 |         if ( forceRun || !stopped ) {
432 |           advancer();
433 |           div.removeData('pausedjc');
434 |           if (stopped) {
435 |             div.removeData('stoppedjc');
436 |           }
437 |         }
438 |       })
439 | 
440 |       .bind('pauseCarousel.jc', function() {
441 |         clearTimeout(self.setAutoAdvance);
442 |         self.setAutoAdvance = undefined;
443 |         div.data('pausedjc', true);
444 |       })
445 |       .bind('stopCarousel.jc', function() {
446 |         clearTimeout(self.setAutoAdvance);
447 |         self.setAutoAdvance = undefined;
448 | 
449 |         div.data('stoppedjc', true);
450 |       })
451 | 
452 |       .bind('refreshCarousel.jc', function(event, all) {
453 |         if (all && o.circular) {
454 |           makeCircular();
455 |         }
456 |         setDimensions(o.autoCSS);
457 |       })
458 | 
459 |       .bind('endCarousel.jc', function() {
460 |         if (self.setAutoAdvance) {
461 |           clearTimeout(self.setAutoAdvance);
462 |           self.setAutoAdvance = undefined;
463 |         }
464 |         if (o.btnPrev) {
465 |           o.$btnPrev.addClass(o.btnDisabledClass).unbind('.jc');
466 |         }
467 |         if (o.btnNext) {
468 |           o.$btnNext.addClass(o.btnDisabledClass).unbind('.jc');
469 |         }
470 |         if (o.btnGo) {
471 |           $.each(o.btnGo, function(i, val) {
472 |             $(val).unbind('.jc');
473 |           });
474 |         }
475 | 
476 |         if (o.circular) {
477 |           li.slice(0, visibleCeil).remove();
478 |           li.slice(-visibleCeil).remove();
479 |         }
480 |         $.each([animCss + 'jc', 'pausedjc', 'stoppedjc', 'dirjc'], function(i, d) {
481 |           div.removeData(d);
482 |         });
483 |         div.unbind('.jc');
484 |       });
485 | 
486 |       // touch gesture support
487 | 
488 |       touchEvents = {
489 |         touchstart: function(event) {
490 |           endTouch.x = 0;
491 |           endTouch.y = 0;
492 |           startTouch.x = event.targetTouches[0].pageX;
493 |           startTouch.y = event.targetTouches[0].pageY;
494 |           startTouch[animCss] = parseFloat( ul.css(animCss) );
495 |           startTouch.time = +new Date();
496 |         },
497 | 
498 |         touchmove: function(event) {
499 |           var tlength = event.targetTouches.length;
500 | 
501 |           if (tlength === 1) {
502 |             endTouch.x = event.targetTouches[0].pageX;
503 |             endTouch.y = event.targetTouches[0].pageY;
504 |             aniProps[animCss] = startTouch[animCss] + (endTouch[axisPrimary] - startTouch[axisPrimary]);
505 |             ul.css(aniProps);
506 |             if (o.preventTouchWindowScroll) {
507 |               event.preventDefault();
508 |             }
509 |           } else {
510 |             endTouch.x = startTouch.x;
511 |             endTouch.y = startTouch.y;
512 |           }
513 |         },
514 | 
515 |         touchend: function() {
516 |           // bail out early if there is no touch movement
517 |           if (!endTouch.x) {
518 |             return;
519 |           }
520 | 
521 |           var pxDelta = startTouch[axisPrimary] - endTouch[axisPrimary],
522 |               pxAbsDelta = mabs( pxDelta ),
523 |               primaryAxisGood = pxAbsDelta > o.swipeThresholds[axisPrimary],
524 |               secondaryAxisGood =  mabs(startTouch[axisSecondary] - endTouch[axisSecondary]) < o.swipeThresholds[axisSecondary],
525 |               timeDelta = +new Date() - startTouch.time,
526 |               quickSwipe = timeDelta < o.swipeThresholds.time,
527 |               operator = pxDelta > 0 ? '+=' : '-=',
528 |               to = operator + o.scroll,
529 |               swipeInfo  = { force: true };
530 | 
531 |           // quick, clean swipe
532 |           if ( quickSwipe && primaryAxisGood && secondaryAxisGood ) {
533 |             // set animation speed to twice as fast as that set in speed option
534 |             swipeInfo.speed = o.speed / 2;
535 |           }
536 |           else
537 |           // slow swipe < 1/2 slide width, OR
538 |           // not enough movement for swipe, OR
539 |           // too much movement on secondary axis when quick swipe
540 |           if ( (!quickSwipe && pxAbsDelta < styles.liSize / 2) ||
541 |             !primaryAxisGood ||
542 |             (quickSwipe && !secondaryAxisGood)
543 |             ) {
544 |             // revert to same slide
545 |             to = '+=0';
546 |           }
547 |           else
548 |           // slow swipe > 1/2 slide width
549 |           if ( !quickSwipe && pxAbsDelta > styles.liSize / 2 ) {
550 |             to = Math.round(pxAbsDelta / styles.liSize);
551 |             to = operator + (to > o.visible ? o.visible : to);
552 | 
553 |             // send pxDelta along as offset in case carousel is circular and needs to reset
554 |             swipeInfo.offset = pxDelta;
555 |           }
556 | 
557 |           div.trigger('go.jc', [to, swipeInfo]);
558 |           endTouch = {};
559 |         },
560 | 
561 |         handle: function(event) {
562 |           event = event.originalEvent;
563 |           touchEvents[event.type](event);
564 |         }
565 |       };
566 | 
567 |       if ( isTouch && o.swipe ) {
568 |         div.bind('touchstart.jc touchmove.jc touchend.jc', touchEvents.handle);
569 |       } // end swipe events
570 | 
571 |       // Responsive design handling:
572 |       // Reset dimensions on window.resize
573 |       if (o.responsive) {
574 |         prepResize = o.autoCSS;
575 |         $(window).bind('resize', function() {
576 |           if (prepResize) {
577 |             ul.width( ul.width() * 2 );
578 |             prepResize = false;
579 |           }
580 | 
581 |           clearTimeout(resize);
582 |           resize = setTimeout(function() {
583 |             div.trigger('refreshCarousel.jc', [true]);
584 |             prepResize = o.autoCSS;
585 |           }, 100);
586 |         });
587 |       }
588 | 
589 |     }); // end each
590 | 
591 |     return this;
592 |   };
593 | 
594 |   $.fn.jCarouselLite.defaults = {
595 | 
596 |     // valid selector for the "ul" container containing the slides
597 |     containerSelector: 'ul',
598 | 
599 |     // valid selector for the slide "li" items
600 |     itemSelector: 'li',
601 | 
602 |     btnPrev: null,
603 |     btnNext: null,
604 | 
605 |     // array (or jQuery object) of elements. When clicked, makes the corresponding carousel LI the first visible one
606 |     btnGo: null,
607 | 
608 |     // selector (or jQuery object) indicating the containing element for pagination navigation.
609 |     autoPager: null,
610 |     btnDisabledClass: 'disabled',
611 | 
612 |     // class applied to the active slide and btnGo element
613 |     activeClass: 'active',
614 | 
615 |     // class applied to the btnGo elements corresponding to the visible slides
616 |     visibleClass: 'vis',
617 |     mouseWheel: false,
618 |     speed: 200,
619 |     easing: null,
620 | 
621 |     // milliseconds between scrolls
622 |     timeout: 4000,
623 | 
624 |     // true to enable auto scrolling; number to auto-scroll by different number at a time than that of scroll option
625 |     auto: false,
626 | 
627 | 
628 |     // true to enable changing direction of auto scrolling when user clicks prev or next button
629 |     directional: false,
630 | 
631 |     // number of times before autoscrolling will stop. (if circular is false, won't iterate more than number of items)
632 |     autoStop: false,
633 | 
634 |     // pause scrolling on hover
635 |     pause: true,
636 |     vertical: false,
637 | 
638 |     // continue scrolling when reach the last item
639 |     circular: true,
640 | 
641 |     // the number to be visible at a given time.
642 |     visible: 3,
643 | 
644 |     // index of item to show initially in the first posiition
645 |     start: 0,
646 | 
647 |     // number of items to scroll at a time
648 |     scroll: 1,
649 | 
650 |     // whether to set initial styles on the carousel elements. See readme for info
651 |     autoCSS: true,
652 | 
653 |     // whether the dimensions should change on resize
654 |     responsive: false,
655 | 
656 |     // whether to set width of <li>s (and left/top of <ul>) based on width of <div>
657 |     autoWidth: false,
658 | 
659 |     // touch options
660 |     swipe: true,
661 |     swipeThresholds: {
662 |       x: 80,
663 |       y: 40,
664 |       time: 150
665 |     },
666 | 
667 |     // whether to prevent vertical scrolling of the document window when swiping
668 |     preventTouchWindowScroll: true,
669 | 
670 |     // Function to be called for each matched carousel when .jCaourselLite() is called.
671 |     // Inside the function, `this` is the carousel div.
672 |     // The function can take 2 arguments:
673 |         // 1. The merged options object
674 |         // 2. A jQuery object containing the <li> items in the carousel
675 |     // If the function returns `false`, the plugin will skip all the carousel magic for that carousel div
676 |     init: function() {},
677 | 
678 |     // function to be called once the first slide is hit
679 |     first: null,
680 | 
681 |     // function to be called once the last slide is hit
682 |     last: null,
683 | 
684 |     // function to be called before each transition starts
685 |     beforeStart: null,
686 | 
687 |     // function to be called after each transition ends
688 |     afterEnd: null
689 |   };
690 | 
691 |   function iterations(itemLength, options) {
692 |     return options.autoStop && (options.circular ? options.autoStop : Math.min(itemLength, options.autoStop));
693 |   }
694 | 
695 |   function fixIds(i) {
696 |     if ( this.id ) {
697 |       this.id += i;
698 |     }
699 |   }
700 | })(jQuery);
701 | 


--------------------------------------------------------------------------------
/test/qunit/qunit.js:
--------------------------------------------------------------------------------
   1 | /*
   2 |  * QUnit - A JavaScript Unit Testing Framework
   3 |  * 
   4 |  * http://docs.jquery.com/QUnit
   5 |  *
   6 |  * Copyright (c) 2009 John Resig, Jörn Zaefferer
   7 |  * Dual licensed under the MIT (MIT-LICENSE.txt)
   8 |  * and GPL (GPL-LICENSE.txt) licenses.
   9 |  */
  10 | 
  11 | (function(window) {
  12 | 
  13 | var QUnit = {
  14 | 
  15 | 	// call on start of module test to prepend name to all tests
  16 | 	module: function(name, testEnvironment) {
  17 | 		config.currentModule = name;
  18 | 
  19 | 		synchronize(function() {
  20 | 			if ( config.currentModule ) {
  21 | 				QUnit.moduleDone( config.currentModule, config.moduleStats.bad, config.moduleStats.all );
  22 | 			}
  23 | 
  24 | 			config.currentModule = name;
  25 | 			config.moduleTestEnvironment = testEnvironment;
  26 | 			config.moduleStats = { all: 0, bad: 0 };
  27 | 
  28 | 			QUnit.moduleStart( name, testEnvironment );
  29 | 		});
  30 | 	},
  31 | 
  32 | 	asyncTest: function(testName, expected, callback) {
  33 | 		if ( arguments.length === 2 ) {
  34 | 			callback = expected;
  35 | 			expected = 0;
  36 | 		}
  37 | 
  38 | 		QUnit.test(testName, expected, callback, true);
  39 | 	},
  40 | 	
  41 | 	test: function(testName, expected, callback, async) {
  42 | 		var name = '<span class="test-name">' + testName + '</span>', testEnvironment, testEnvironmentArg;
  43 | 
  44 | 		if ( arguments.length === 2 ) {
  45 | 			callback = expected;
  46 | 			expected = null;
  47 | 		}
  48 | 		// is 2nd argument a testEnvironment?
  49 | 		if ( expected && typeof expected === 'object') {
  50 | 			testEnvironmentArg =  expected;
  51 | 			expected = null;
  52 | 		}
  53 | 
  54 | 		if ( config.currentModule ) {
  55 | 			name = '<span class="module-name">' + config.currentModule + "</span>: " + name;
  56 | 		}
  57 | 
  58 | 		if ( !validTest(config.currentModule + ": " + testName) ) {
  59 | 			return;
  60 | 		}
  61 | 
  62 | 		synchronize(function() {
  63 | 
  64 | 			testEnvironment = extend({
  65 | 				setup: function() {},
  66 | 				teardown: function() {}
  67 | 			}, config.moduleTestEnvironment);
  68 | 			if (testEnvironmentArg) {
  69 | 				extend(testEnvironment,testEnvironmentArg);
  70 | 			}
  71 | 
  72 | 			QUnit.testStart( testName, testEnvironment );
  73 | 
  74 | 			// allow utility functions to access the current test environment
  75 | 			QUnit.current_testEnvironment = testEnvironment;
  76 | 			
  77 | 			config.assertions = [];
  78 | 			config.expected = expected;
  79 | 			
  80 | 			var tests = id("qunit-tests");
  81 | 			if (tests) {
  82 | 				var b = document.createElement("strong");
  83 | 					b.innerHTML = "Running " + name;
  84 | 				var li = document.createElement("li");
  85 | 					li.appendChild( b );
  86 | 					li.id = "current-test-output";
  87 | 				tests.appendChild( li )
  88 | 			}
  89 | 
  90 | 			try {
  91 | 				if ( !config.pollution ) {
  92 | 					saveGlobal();
  93 | 				}
  94 | 
  95 | 				testEnvironment.setup.call(testEnvironment);
  96 | 			} catch(e) {
  97 | 				QUnit.ok( false, "Setup failed on " + name + ": " + e.message );
  98 | 			}
  99 | 	    });
 100 | 	
 101 | 	    synchronize(function() {
 102 | 			if ( async ) {
 103 | 				QUnit.stop();
 104 | 			}
 105 | 
 106 | 			try {
 107 | 				callback.call(testEnvironment);
 108 | 			} catch(e) {
 109 | 				fail("Test " + name + " died, exception and test follows", e, callback);
 110 | 				QUnit.ok( false, "Died on test #" + (config.assertions.length + 1) + ": " + e.message );
 111 | 				// else next test will carry the responsibility
 112 | 				saveGlobal();
 113 | 
 114 | 				// Restart the tests if they're blocking
 115 | 				if ( config.blocking ) {
 116 | 					start();
 117 | 				}
 118 | 			}
 119 | 		});
 120 | 
 121 | 		synchronize(function() {
 122 | 			try {
 123 | 				checkPollution();
 124 | 				testEnvironment.teardown.call(testEnvironment);
 125 | 			} catch(e) {
 126 | 				QUnit.ok( false, "Teardown failed on " + name + ": " + e.message );
 127 | 			}
 128 | 	    });
 129 | 	
 130 | 	    synchronize(function() {
 131 | 			try {
 132 | 				QUnit.reset();
 133 | 			} catch(e) {
 134 | 				fail("reset() failed, following Test " + name + ", exception and reset fn follows", e, QUnit.reset);
 135 | 			}
 136 | 
 137 | 			if ( config.expected && config.expected != config.assertions.length ) {
 138 | 				QUnit.ok( false, "Expected " + config.expected + " assertions, but " + config.assertions.length + " were run" );
 139 | 			}
 140 | 
 141 | 			var good = 0, bad = 0,
 142 | 				tests = id("qunit-tests");
 143 | 
 144 | 			config.stats.all += config.assertions.length;
 145 | 			config.moduleStats.all += config.assertions.length;
 146 | 
 147 | 			if ( tests ) {
 148 | 				var ol  = document.createElement("ol");
 149 | 
 150 | 				for ( var i = 0; i < config.assertions.length; i++ ) {
 151 | 					var assertion = config.assertions[i];
 152 | 
 153 | 					var li = document.createElement("li");
 154 | 					li.className = assertion.result ? "pass" : "fail";
 155 | 					li.innerHTML = assertion.message || "(no message)";
 156 | 					ol.appendChild( li );
 157 | 
 158 | 					if ( assertion.result ) {
 159 | 						good++;
 160 | 					} else {
 161 | 						bad++;
 162 | 						config.stats.bad++;
 163 | 						config.moduleStats.bad++;
 164 | 					}
 165 | 				}
 166 | 				if (bad == 0) {
 167 | 					ol.style.display = "none";
 168 | 				}
 169 | 
 170 | 				var b = document.createElement("strong");
 171 | 				b.innerHTML = name + " <b class='counts'>(<b class='failed'>" + bad + "</b>, <b class='passed'>" + good + "</b>, " + config.assertions.length + ")</b>";
 172 | 				
 173 | 				addEvent(b, "click", function() {
 174 | 					var next = b.nextSibling, display = next.style.display;
 175 | 					next.style.display = display === "none" ? "block" : "none";
 176 | 				});
 177 | 				
 178 | 				addEvent(b, "dblclick", function(e) {
 179 | 					var target = e && e.target ? e.target : window.event.srcElement;
 180 | 					if ( target.nodeName.toLowerCase() == "span" || target.nodeName.toLowerCase() == "b" ) {
 181 | 						target = target.parentNode;
 182 | 					}
 183 | 					if ( window.location && target.nodeName.toLowerCase() === "strong" ) {
 184 | 						window.location.search = "?" + encodeURIComponent(getText([target]).replace(/\(.+\)$/, "").replace(/(^\s*|\s*$)/g, ""));
 185 | 					}
 186 | 				});
 187 | 
 188 | 				var li = id("current-test-output");
 189 | 				li.id = "";
 190 | 				li.className = bad ? "fail" : "pass";
 191 | 				li.removeChild( li.firstChild );
 192 | 				li.appendChild( b );
 193 | 				li.appendChild( ol );
 194 | 
 195 | 				if ( bad ) {
 196 | 					var toolbar = id("qunit-testrunner-toolbar");
 197 | 					if ( toolbar ) {
 198 | 						toolbar.style.display = "block";
 199 | 						id("qunit-filter-pass").disabled = null;
 200 | 						id("qunit-filter-missing").disabled = null;
 201 | 					}
 202 | 				}
 203 | 
 204 | 			} else {
 205 | 				for ( var i = 0; i < config.assertions.length; i++ ) {
 206 | 					if ( !config.assertions[i].result ) {
 207 | 						bad++;
 208 | 						config.stats.bad++;
 209 | 						config.moduleStats.bad++;
 210 | 					}
 211 | 				}
 212 | 			}
 213 | 
 214 | 			QUnit.testDone( testName, bad, config.assertions.length );
 215 | 
 216 | 			if ( !window.setTimeout && !config.queue.length ) {
 217 | 				done();
 218 | 			}
 219 | 		});
 220 | 
 221 | 		synchronize( done );
 222 | 	},
 223 | 	
 224 | 	/**
 225 | 	 * Specify the number of expected assertions to gurantee that failed test (no assertions are run at all) don't slip through.
 226 | 	 */
 227 | 	expect: function(asserts) {
 228 | 		config.expected = asserts;
 229 | 	},
 230 | 
 231 | 	/**
 232 | 	 * Asserts true.
 233 | 	 * @example ok( "asdfasdf".length > 5, "There must be at least 5 chars" );
 234 | 	 */
 235 | 	ok: function(a, msg) {
 236 | 		msg = escapeHtml(msg);
 237 | 		QUnit.log(a, msg);
 238 | 
 239 | 		config.assertions.push({
 240 | 			result: !!a,
 241 | 			message: msg
 242 | 		});
 243 | 	},
 244 | 
 245 | 	/**
 246 | 	 * Checks that the first two arguments are equal, with an optional message.
 247 | 	 * Prints out both actual and expected values.
 248 | 	 *
 249 | 	 * Prefered to ok( actual == expected, message )
 250 | 	 *
 251 | 	 * @example equal( format("Received {0} bytes.", 2), "Received 2 bytes." );
 252 | 	 *
 253 | 	 * @param Object actual
 254 | 	 * @param Object expected
 255 | 	 * @param String message (optional)
 256 | 	 */
 257 | 	equal: function(actual, expected, message) {
 258 | 		push(expected == actual, actual, expected, message);
 259 | 	},
 260 | 
 261 | 	notEqual: function(actual, expected, message) {
 262 | 		push(expected != actual, actual, expected, message);
 263 | 	},
 264 | 	
 265 | 	deepEqual: function(actual, expected, message) {
 266 | 		push(QUnit.equiv(actual, expected), actual, expected, message);
 267 | 	},
 268 | 
 269 | 	notDeepEqual: function(actual, expected, message) {
 270 | 		push(!QUnit.equiv(actual, expected), actual, expected, message);
 271 | 	},
 272 | 
 273 | 	strictEqual: function(actual, expected, message) {
 274 | 		push(expected === actual, actual, expected, message);
 275 | 	},
 276 | 
 277 | 	notStrictEqual: function(actual, expected, message) {
 278 | 		push(expected !== actual, actual, expected, message);
 279 | 	},
 280 | 
 281 | 	raises: function(fn,  message) {
 282 | 		try {
 283 | 			fn();
 284 | 			ok( false, message );
 285 | 		}
 286 | 		catch (e) {
 287 | 			ok( true, message );
 288 | 		}
 289 | 	},
 290 | 
 291 | 	start: function() {
 292 | 		// A slight delay, to avoid any current callbacks
 293 | 		if ( window.setTimeout ) {
 294 | 			window.setTimeout(function() {
 295 | 				if ( config.timeout ) {
 296 | 					clearTimeout(config.timeout);
 297 | 				}
 298 | 
 299 | 				config.blocking = false;
 300 | 				process();
 301 | 			}, 13);
 302 | 		} else {
 303 | 			config.blocking = false;
 304 | 			process();
 305 | 		}
 306 | 	},
 307 | 	
 308 | 	stop: function(timeout) {
 309 | 		config.blocking = true;
 310 | 
 311 | 		if ( timeout && window.setTimeout ) {
 312 | 			config.timeout = window.setTimeout(function() {
 313 | 				QUnit.ok( false, "Test timed out" );
 314 | 				QUnit.start();
 315 | 			}, timeout);
 316 | 		}
 317 | 	}
 318 | 
 319 | };
 320 | 
 321 | // Backwards compatibility, deprecated
 322 | QUnit.equals = QUnit.equal;
 323 | QUnit.same = QUnit.deepEqual;
 324 | 
 325 | // Maintain internal state
 326 | var config = {
 327 | 	// The queue of tests to run
 328 | 	queue: [],
 329 | 
 330 | 	// block until document ready
 331 | 	blocking: true
 332 | };
 333 | 
 334 | // Load paramaters
 335 | (function() {
 336 | 	var location = window.location || { search: "", protocol: "file:" },
 337 | 		GETParams = location.search.slice(1).split('&');
 338 | 
 339 | 	for ( var i = 0; i < GETParams.length; i++ ) {
 340 | 		GETParams[i] = decodeURIComponent( GETParams[i] );
 341 | 		if ( GETParams[i] === "noglobals" ) {
 342 | 			GETParams.splice( i, 1 );
 343 | 			i--;
 344 | 			config.noglobals = true;
 345 | 		} else if ( GETParams[i].search('=') > -1 ) {
 346 | 			GETParams.splice( i, 1 );
 347 | 			i--;
 348 | 		}
 349 | 	}
 350 | 	
 351 | 	// restrict modules/tests by get parameters
 352 | 	config.filters = GETParams;
 353 | 	
 354 | 	// Figure out if we're running the tests from a server or not
 355 | 	QUnit.isLocal = !!(location.protocol === 'file:');
 356 | })();
 357 | 
 358 | // Expose the API as global variables, unless an 'exports'
 359 | // object exists, in that case we assume we're in CommonJS
 360 | if ( typeof exports === "undefined" || typeof require === "undefined" ) {
 361 | 	extend(window, QUnit);
 362 | 	window.QUnit = QUnit;
 363 | } else {
 364 | 	extend(exports, QUnit);
 365 | 	exports.QUnit = QUnit;
 366 | }
 367 | 
 368 | // define these after exposing globals to keep them in these QUnit namespace only
 369 | extend(QUnit, {
 370 | 	config: config,
 371 | 
 372 | 	// Initialize the configuration options
 373 | 	init: function() {
 374 | 		extend(config, {
 375 | 			stats: { all: 0, bad: 0 },
 376 | 			moduleStats: { all: 0, bad: 0 },
 377 | 			started: +new Date,
 378 | 			updateRate: 1000,
 379 | 			blocking: false,
 380 | 			autostart: true,
 381 | 			autorun: false,
 382 | 			assertions: [],
 383 | 			filters: [],
 384 | 			queue: []
 385 | 		});
 386 | 
 387 | 		var tests = id("qunit-tests"),
 388 | 			banner = id("qunit-banner"),
 389 | 			result = id("qunit-testresult");
 390 | 
 391 | 		if ( tests ) {
 392 | 			tests.innerHTML = "";
 393 | 		}
 394 | 
 395 | 		if ( banner ) {
 396 | 			banner.className = "";
 397 | 		}
 398 | 
 399 | 		if ( result ) {
 400 | 			result.parentNode.removeChild( result );
 401 | 		}
 402 | 	},
 403 | 	
 404 | 	/**
 405 | 	 * Resets the test setup. Useful for tests that modify the DOM.
 406 | 	 */
 407 | 	reset: function() {
 408 | 		if ( window.jQuery ) {
 409 | 			jQuery("#main, #qunit-fixture").html( config.fixture );
 410 | 		}
 411 | 	},
 412 | 	
 413 | 	/**
 414 | 	 * Trigger an event on an element.
 415 | 	 *
 416 | 	 * @example triggerEvent( document.body, "click" );
 417 | 	 *
 418 | 	 * @param DOMElement elem
 419 | 	 * @param String type
 420 | 	 */
 421 | 	triggerEvent: function( elem, type, event ) {
 422 | 		if ( document.createEvent ) {
 423 | 			event = document.createEvent("MouseEvents");
 424 | 			event.initMouseEvent(type, true, true, elem.ownerDocument.defaultView,
 425 | 				0, 0, 0, 0, 0, false, false, false, false, 0, null);
 426 | 			elem.dispatchEvent( event );
 427 | 
 428 | 		} else if ( elem.fireEvent ) {
 429 | 			elem.fireEvent("on"+type);
 430 | 		}
 431 | 	},
 432 | 	
 433 | 	// Safe object type checking
 434 | 	is: function( type, obj ) {
 435 | 		return QUnit.objectType( obj ) == type;
 436 | 	},
 437 | 	
 438 | 	objectType: function( obj ) {
 439 | 		if (typeof obj === "undefined") {
 440 | 				return "undefined";
 441 | 
 442 | 		// consider: typeof null === object
 443 | 		}
 444 | 		if (obj === null) {
 445 | 				return "null";
 446 | 		}
 447 | 
 448 | 		var type = Object.prototype.toString.call( obj )
 449 | 			.match(/^\[object\s(.*)\]$/)[1] || '';
 450 | 
 451 | 		switch (type) {
 452 | 				case 'Number':
 453 | 						if (isNaN(obj)) {
 454 | 								return "nan";
 455 | 						} else {
 456 | 								return "number";
 457 | 						}
 458 | 				case 'String':
 459 | 				case 'Boolean':
 460 | 				case 'Array':
 461 | 				case 'Date':
 462 | 				case 'RegExp':
 463 | 				case 'Function':
 464 | 						return type.toLowerCase();
 465 | 		}
 466 | 		if (typeof obj === "object") {
 467 | 				return "object";
 468 | 		}
 469 | 		return undefined;
 470 | 	},
 471 | 	
 472 | 	// Logging callbacks
 473 | 	begin: function() {},
 474 | 	done: function(failures, total) {},
 475 | 	log: function(result, message) {},
 476 | 	testStart: function(name, testEnvironment) {},
 477 | 	testDone: function(name, failures, total) {},
 478 | 	moduleStart: function(name, testEnvironment) {},
 479 | 	moduleDone: function(name, failures, total) {}
 480 | });
 481 | 
 482 | if ( typeof document === "undefined" || document.readyState === "complete" ) {
 483 | 	config.autorun = true;
 484 | }
 485 | 
 486 | addEvent(window, "load", function() {
 487 | 	QUnit.begin();
 488 | 	
 489 | 	// Initialize the config, saving the execution queue
 490 | 	var oldconfig = extend({}, config);
 491 | 	QUnit.init();
 492 | 	extend(config, oldconfig);
 493 | 
 494 | 	config.blocking = false;
 495 | 
 496 | 	var userAgent = id("qunit-userAgent");
 497 | 	if ( userAgent ) {
 498 | 		userAgent.innerHTML = navigator.userAgent;
 499 | 	}
 500 | 	var banner = id("qunit-header");
 501 | 	if ( banner ) {
 502 | 		banner.innerHTML = '<a href="' + location.href + '">' + banner.innerHTML + '</a>'; 
 503 | 	}
 504 | 	
 505 | 	var toolbar = id("qunit-testrunner-toolbar");
 506 | 	if ( toolbar ) {
 507 | 		toolbar.style.display = "none";
 508 | 		
 509 | 		var filter = document.createElement("input");
 510 | 		filter.type = "checkbox";
 511 | 		filter.id = "qunit-filter-pass";
 512 | 		filter.disabled = true;
 513 | 		addEvent( filter, "click", function() {
 514 | 			var li = document.getElementsByTagName("li");
 515 | 			for ( var i = 0; i < li.length; i++ ) {
 516 | 				if ( li[i].className.indexOf("pass") > -1 ) {
 517 | 					li[i].style.display = filter.checked ? "none" : "";
 518 | 				}
 519 | 			}
 520 | 		});
 521 | 		toolbar.appendChild( filter );
 522 | 
 523 | 		var label = document.createElement("label");
 524 | 		label.setAttribute("for", "qunit-filter-pass");
 525 | 		label.innerHTML = "Hide passed tests";
 526 | 		toolbar.appendChild( label );
 527 | 
 528 | 		var missing = document.createElement("input");
 529 | 		missing.type = "checkbox";
 530 | 		missing.id = "qunit-filter-missing";
 531 | 		missing.disabled = true;
 532 | 		addEvent( missing, "click", function() {
 533 | 			var li = document.getElementsByTagName("li");
 534 | 			for ( var i = 0; i < li.length; i++ ) {
 535 | 				if ( li[i].className.indexOf("fail") > -1 && li[i].innerHTML.indexOf('missing test - untested code is broken code') > - 1 ) {
 536 | 					li[i].parentNode.parentNode.style.display = missing.checked ? "none" : "block";
 537 | 				}
 538 | 			}
 539 | 		});
 540 | 		toolbar.appendChild( missing );
 541 | 
 542 | 		label = document.createElement("label");
 543 | 		label.setAttribute("for", "qunit-filter-missing");
 544 | 		label.innerHTML = "Hide missing tests (untested code is broken code)";
 545 | 		toolbar.appendChild( label );
 546 | 	}
 547 | 
 548 | 	var main = id('main') || id('qunit-fixture');
 549 | 	if ( main ) {
 550 | 		config.fixture = main.innerHTML;
 551 | 	}
 552 | 
 553 | 	if (config.autostart) {
 554 | 		QUnit.start();
 555 | 	}
 556 | });
 557 | 
 558 | function done() {
 559 | 	if ( config.doneTimer && window.clearTimeout ) {
 560 | 		window.clearTimeout( config.doneTimer );
 561 | 		config.doneTimer = null;
 562 | 	}
 563 | 
 564 | 	if ( config.queue.length ) {
 565 | 		config.doneTimer = window.setTimeout(function(){
 566 | 			if ( !config.queue.length ) {
 567 | 				done();
 568 | 			} else {
 569 | 				synchronize( done );
 570 | 			}
 571 | 		}, 13);
 572 | 
 573 | 		return;
 574 | 	}
 575 | 
 576 | 	config.autorun = true;
 577 | 
 578 | 	// Log the last module results
 579 | 	if ( config.currentModule ) {
 580 | 		QUnit.moduleDone( config.currentModule, config.moduleStats.bad, config.moduleStats.all );
 581 | 	}
 582 | 
 583 | 	var banner = id("qunit-banner"),
 584 | 		tests = id("qunit-tests"),
 585 | 		html = ['Tests completed in ',
 586 | 		+new Date - config.started, ' milliseconds.<br/>',
 587 | 		'<span class="passed">', config.stats.all - config.stats.bad, '</span> tests of <span class="total">', config.stats.all, '</span> passed, <span class="failed">', config.stats.bad,'</span> failed.'].join('');
 588 | 
 589 | 	if ( banner ) {
 590 | 		banner.className = (config.stats.bad ? "qunit-fail" : "qunit-pass");
 591 | 	}
 592 | 
 593 | 	if ( tests ) {	
 594 | 		var result = id("qunit-testresult");
 595 | 
 596 | 		if ( !result ) {
 597 | 			result = document.createElement("p");
 598 | 			result.id = "qunit-testresult";
 599 | 			result.className = "result";
 600 | 			tests.parentNode.insertBefore( result, tests.nextSibling );
 601 | 		}
 602 | 
 603 | 		result.innerHTML = html;
 604 | 	}
 605 | 
 606 | 	QUnit.done( config.stats.bad, config.stats.all );
 607 | }
 608 | 
 609 | function validTest( name ) {
 610 | 	var i = config.filters.length,
 611 | 		run = false;
 612 | 
 613 | 	if ( !i ) {
 614 | 		return true;
 615 | 	}
 616 | 	
 617 | 	while ( i-- ) {
 618 | 		var filter = config.filters[i],
 619 | 			not = filter.charAt(0) == '!';
 620 | 
 621 | 		if ( not ) {
 622 | 			filter = filter.slice(1);
 623 | 		}
 624 | 
 625 | 		if ( name.indexOf(filter) !== -1 ) {
 626 | 			return !not;
 627 | 		}
 628 | 
 629 | 		if ( not ) {
 630 | 			run = true;
 631 | 		}
 632 | 	}
 633 | 
 634 | 	return run;
 635 | }
 636 | 
 637 | function escapeHtml(s) {
 638 | 	s = s === null ? "" : s + "";
 639 | 	return s.replace(/[\&"<>\\]/g, function(s) {
 640 | 		switch(s) {
 641 | 			case "&": return "&amp;";
 642 | 			case "\\": return "\\\\";
 643 | 			case '"': return '\"';
 644 | 			case "<": return "&lt;";
 645 | 			case ">": return "&gt;";
 646 | 			default: return s;
 647 | 		}
 648 | 	});
 649 | }
 650 | 
 651 | function push(result, actual, expected, message) {
 652 | 	message = escapeHtml(message) || (result ? "okay" : "failed");
 653 | 	message = '<span class="test-message">' + message + "</span>";
 654 | 	expected = escapeHtml(QUnit.jsDump.parse(expected));
 655 | 	actual = escapeHtml(QUnit.jsDump.parse(actual));
 656 | 	var output = message + ', expected: <span class="test-expected">' + expected + '</span>';
 657 | 	if (actual != expected) {
 658 | 		output += ' result: <span class="test-actual">' + actual + '</span>, diff: ' + QUnit.diff(expected, actual);
 659 | 	}
 660 | 	
 661 | 	// can't use ok, as that would double-escape messages
 662 | 	QUnit.log(result, output);
 663 | 	config.assertions.push({
 664 | 		result: !!result,
 665 | 		message: output
 666 | 	});
 667 | }
 668 | 
 669 | function synchronize( callback ) {
 670 | 	config.queue.push( callback );
 671 | 
 672 | 	if ( config.autorun && !config.blocking ) {
 673 | 		process();
 674 | 	}
 675 | }
 676 | 
 677 | function process() {
 678 | 	var start = (new Date()).getTime();
 679 | 
 680 | 	while ( config.queue.length && !config.blocking ) {
 681 | 		if ( config.updateRate <= 0 || (((new Date()).getTime() - start) < config.updateRate) ) {
 682 | 			config.queue.shift()();
 683 | 
 684 | 		} else {
 685 | 			setTimeout( process, 13 );
 686 | 			break;
 687 | 		}
 688 | 	}
 689 | }
 690 | 
 691 | function saveGlobal() {
 692 | 	config.pollution = [];
 693 | 	
 694 | 	if ( config.noglobals ) {
 695 | 		for ( var key in window ) {
 696 | 			config.pollution.push( key );
 697 | 		}
 698 | 	}
 699 | }
 700 | 
 701 | function checkPollution( name ) {
 702 | 	var old = config.pollution;
 703 | 	saveGlobal();
 704 | 	
 705 | 	var newGlobals = diff( old, config.pollution );
 706 | 	if ( newGlobals.length > 0 ) {
 707 | 		ok( false, "Introduced global variable(s): " + newGlobals.join(", ") );
 708 | 		config.expected++;
 709 | 	}
 710 | 
 711 | 	var deletedGlobals = diff( config.pollution, old );
 712 | 	if ( deletedGlobals.length > 0 ) {
 713 | 		ok( false, "Deleted global variable(s): " + deletedGlobals.join(", ") );
 714 | 		config.expected++;
 715 | 	}
 716 | }
 717 | 
 718 | // returns a new Array with the elements that are in a but not in b
 719 | function diff( a, b ) {
 720 | 	var result = a.slice();
 721 | 	for ( var i = 0; i < result.length; i++ ) {
 722 | 		for ( var j = 0; j < b.length; j++ ) {
 723 | 			if ( result[i] === b[j] ) {
 724 | 				result.splice(i, 1);
 725 | 				i--;
 726 | 				break;
 727 | 			}
 728 | 		}
 729 | 	}
 730 | 	return result;
 731 | }
 732 | 
 733 | function fail(message, exception, callback) {
 734 | 	if ( typeof console !== "undefined" && console.error && console.warn ) {
 735 | 		console.error(message);
 736 | 		console.error(exception);
 737 | 		console.warn(callback.toString());
 738 | 
 739 | 	} else if ( window.opera && opera.postError ) {
 740 | 		opera.postError(message, exception, callback.toString);
 741 | 	}
 742 | }
 743 | 
 744 | function extend(a, b) {
 745 | 	for ( var prop in b ) {
 746 | 		a[prop] = b[prop];
 747 | 	}
 748 | 
 749 | 	return a;
 750 | }
 751 | 
 752 | function addEvent(elem, type, fn) {
 753 | 	if ( elem.addEventListener ) {
 754 | 		elem.addEventListener( type, fn, false );
 755 | 	} else if ( elem.attachEvent ) {
 756 | 		elem.attachEvent( "on" + type, fn );
 757 | 	} else {
 758 | 		fn();
 759 | 	}
 760 | }
 761 | 
 762 | function id(name) {
 763 | 	return !!(typeof document !== "undefined" && document && document.getElementById) &&
 764 | 		document.getElementById( name );
 765 | }
 766 | 
 767 | // Test for equality any JavaScript type.
 768 | // Discussions and reference: http://philrathe.com/articles/equiv
 769 | // Test suites: http://philrathe.com/tests/equiv
 770 | // Author: Philippe Rathé <prathe@gmail.com>
 771 | QUnit.equiv = function () {
 772 | 
 773 |     var innerEquiv; // the real equiv function
 774 |     var callers = []; // stack to decide between skip/abort functions
 775 |     var parents = []; // stack to avoiding loops from circular referencing
 776 | 
 777 |     // Call the o related callback with the given arguments.
 778 |     function bindCallbacks(o, callbacks, args) {
 779 |         var prop = QUnit.objectType(o);
 780 |         if (prop) {
 781 |             if (QUnit.objectType(callbacks[prop]) === "function") {
 782 |                 return callbacks[prop].apply(callbacks, args);
 783 |             } else {
 784 |                 return callbacks[prop]; // or undefined
 785 |             }
 786 |         }
 787 |     }
 788 |     
 789 |     var callbacks = function () {
 790 | 
 791 |         // for string, boolean, number and null
 792 |         function useStrictEquality(b, a) {
 793 |             if (b instanceof a.constructor || a instanceof b.constructor) {
 794 |                 // to catch short annotaion VS 'new' annotation of a declaration
 795 |                 // e.g. var i = 1;
 796 |                 //      var j = new Number(1);
 797 |                 return a == b;
 798 |             } else {
 799 |                 return a === b;
 800 |             }
 801 |         }
 802 | 
 803 |         return {
 804 |             "string": useStrictEquality,
 805 |             "boolean": useStrictEquality,
 806 |             "number": useStrictEquality,
 807 |             "null": useStrictEquality,
 808 |             "undefined": useStrictEquality,
 809 | 
 810 |             "nan": function (b) {
 811 |                 return isNaN(b);
 812 |             },
 813 | 
 814 |             "date": function (b, a) {
 815 |                 return QUnit.objectType(b) === "date" && a.valueOf() === b.valueOf();
 816 |             },
 817 | 
 818 |             "regexp": function (b, a) {
 819 |                 return QUnit.objectType(b) === "regexp" &&
 820 |                     a.source === b.source && // the regex itself
 821 |                     a.global === b.global && // and its modifers (gmi) ...
 822 |                     a.ignoreCase === b.ignoreCase &&
 823 |                     a.multiline === b.multiline;
 824 |             },
 825 | 
 826 |             // - skip when the property is a method of an instance (OOP)
 827 |             // - abort otherwise,
 828 |             //   initial === would have catch identical references anyway
 829 |             "function": function () {
 830 |                 var caller = callers[callers.length - 1];
 831 |                 return caller !== Object &&
 832 |                         typeof caller !== "undefined";
 833 |             },
 834 | 
 835 |             "array": function (b, a) {
 836 |                 var i, j, loop;
 837 |                 var len;
 838 | 
 839 |                 // b could be an object literal here
 840 |                 if ( ! (QUnit.objectType(b) === "array")) {
 841 |                     return false;
 842 |                 }   
 843 |                 
 844 |                 len = a.length;
 845 |                 if (len !== b.length) { // safe and faster
 846 |                     return false;
 847 |                 }
 848 |                 
 849 |                 //track reference to avoid circular references
 850 |                 parents.push(a);
 851 |                 for (i = 0; i < len; i++) {
 852 |                     loop = false;
 853 |                     for(j=0;j<parents.length;j++){
 854 |                         if(parents[j] === a[i]){
 855 |                             loop = true;//dont rewalk array
 856 |                         }
 857 |                     }
 858 |                     if (!loop && ! innerEquiv(a[i], b[i])) {
 859 |                         parents.pop();
 860 |                         return false;
 861 |                     }
 862 |                 }
 863 |                 parents.pop();
 864 |                 return true;
 865 |             },
 866 | 
 867 |             "object": function (b, a) {
 868 |                 var i, j, loop;
 869 |                 var eq = true; // unless we can proove it
 870 |                 var aProperties = [], bProperties = []; // collection of strings
 871 | 
 872 |                 // comparing constructors is more strict than using instanceof
 873 |                 if ( a.constructor !== b.constructor) {
 874 |                     return false;
 875 |                 }
 876 | 
 877 |                 // stack constructor before traversing properties
 878 |                 callers.push(a.constructor);
 879 |                 //track reference to avoid circular references
 880 |                 parents.push(a);
 881 |                 
 882 |                 for (i in a) { // be strict: don't ensures hasOwnProperty and go deep
 883 |                     loop = false;
 884 |                     for(j=0;j<parents.length;j++){
 885 |                         if(parents[j] === a[i])
 886 |                             loop = true; //don't go down the same path twice
 887 |                     }
 888 |                     aProperties.push(i); // collect a's properties
 889 | 
 890 |                     if (!loop && ! innerEquiv(a[i], b[i])) {
 891 |                         eq = false;
 892 |                         break;
 893 |                     }
 894 |                 }
 895 | 
 896 |                 callers.pop(); // unstack, we are done
 897 |                 parents.pop();
 898 | 
 899 |                 for (i in b) {
 900 |                     bProperties.push(i); // collect b's properties
 901 |                 }
 902 | 
 903 |                 // Ensures identical properties name
 904 |                 return eq && innerEquiv(aProperties.sort(), bProperties.sort());
 905 |             }
 906 |         };
 907 |     }();
 908 | 
 909 |     innerEquiv = function () { // can take multiple arguments
 910 |         var args = Array.prototype.slice.apply(arguments);
 911 |         if (args.length < 2) {
 912 |             return true; // end transition
 913 |         }
 914 | 
 915 |         return (function (a, b) {
 916 |             if (a === b) {
 917 |                 return true; // catch the most you can
 918 |             } else if (a === null || b === null || typeof a === "undefined" || typeof b === "undefined" || QUnit.objectType(a) !== QUnit.objectType(b)) {
 919 |                 return false; // don't lose time with error prone cases
 920 |             } else {
 921 |                 return bindCallbacks(a, callbacks, [b, a]);
 922 |             }
 923 | 
 924 |         // apply transition with (1..n) arguments
 925 |         })(args[0], args[1]) && arguments.callee.apply(this, args.splice(1, args.length -1));
 926 |     };
 927 | 
 928 |     return innerEquiv;
 929 | 
 930 | }();
 931 | 
 932 | /**
 933 |  * jsDump
 934 |  * Copyright (c) 2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
 935 |  * Licensed under BSD (http://www.opensource.org/licenses/bsd-license.php)
 936 |  * Date: 5/15/2008
 937 |  * @projectDescription Advanced and extensible data dumping for Javascript.
 938 |  * @version 1.0.0
 939 |  * @author Ariel Flesler
 940 |  * @link {http://flesler.blogspot.com/2008/05/jsdump-pretty-dump-of-any-javascript.html}
 941 |  */
 942 | QUnit.jsDump = (function() {
 943 | 	function quote( str ) {
 944 | 		return '"' + str.toString().replace(/"/g, '\\"') + '"';
 945 | 	};
 946 | 	function literal( o ) {
 947 | 		return o + '';	
 948 | 	};
 949 | 	function join( pre, arr, post ) {
 950 | 		var s = jsDump.separator(),
 951 | 			base = jsDump.indent(),
 952 | 			inner = jsDump.indent(1);
 953 | 		if ( arr.join )
 954 | 			arr = arr.join( ',' + s + inner );
 955 | 		if ( !arr )
 956 | 			return pre + post;
 957 | 		return [ pre, inner + arr, base + post ].join(s);
 958 | 	};
 959 | 	function array( arr ) {
 960 | 		var i = arr.length,	ret = Array(i);					
 961 | 		this.up();
 962 | 		while ( i-- )
 963 | 			ret[i] = this.parse( arr[i] );				
 964 | 		this.down();
 965 | 		return join( '[', ret, ']' );
 966 | 	};
 967 | 	
 968 | 	var reName = /^function (\w+)/;
 969 | 	
 970 | 	var jsDump = {
 971 | 		parse:function( obj, type ) { //type is used mostly internally, you can fix a (custom)type in advance
 972 | 			var	parser = this.parsers[ type || this.typeOf(obj) ];
 973 | 			type = typeof parser;			
 974 | 			
 975 | 			return type == 'function' ? parser.call( this, obj ) :
 976 | 				   type == 'string' ? parser :
 977 | 				   this.parsers.error;
 978 | 		},
 979 | 		typeOf:function( obj ) {
 980 | 			var type;
 981 | 			if ( obj === null ) {
 982 | 				type = "null";
 983 | 			} else if (typeof obj === "undefined") {
 984 | 				type = "undefined";
 985 | 			} else if (QUnit.is("RegExp", obj)) {
 986 | 				type = "regexp";
 987 | 			} else if (QUnit.is("Date", obj)) {
 988 | 				type = "date";
 989 | 			} else if (QUnit.is("Function", obj)) {
 990 | 				type = "function";
 991 | 			} else if (obj.setInterval && obj.document && !obj.nodeType) {
 992 | 				type = "window";
 993 | 			} else if (obj.nodeType === 9) {
 994 | 				type = "document";
 995 | 			} else if (obj.nodeType) {
 996 | 				type = "node";
 997 | 			} else if (typeof obj === "object" && typeof obj.length === "number" && obj.length >= 0) {
 998 | 				type = "array";
 999 | 			} else {
1000 | 				type = typeof obj;
1001 | 			}
1002 | 			return type;
1003 | 		},
1004 | 		separator:function() {
1005 | 			return this.multiline ?	this.HTML ? '<br />' : '\n' : this.HTML ? '&nbsp;' : ' ';
1006 | 		},
1007 | 		indent:function( extra ) {// extra can be a number, shortcut for increasing-calling-decreasing
1008 | 			if ( !this.multiline )
1009 | 				return '';
1010 | 			var chr = this.indentChar;
1011 | 			if ( this.HTML )
1012 | 				chr = chr.replace(/\t/g,'   ').replace(/ /g,'&nbsp;');
1013 | 			return Array( this._depth_ + (extra||0) ).join(chr);
1014 | 		},
1015 | 		up:function( a ) {
1016 | 			this._depth_ += a || 1;
1017 | 		},
1018 | 		down:function( a ) {
1019 | 			this._depth_ -= a || 1;
1020 | 		},
1021 | 		setParser:function( name, parser ) {
1022 | 			this.parsers[name] = parser;
1023 | 		},
1024 | 		// The next 3 are exposed so you can use them
1025 | 		quote:quote, 
1026 | 		literal:literal,
1027 | 		join:join,
1028 | 		//
1029 | 		_depth_: 1,
1030 | 		// This is the list of parsers, to modify them, use jsDump.setParser
1031 | 		parsers:{
1032 | 			window: '[Window]',
1033 | 			document: '[Document]',
1034 | 			error:'[ERROR]', //when no parser is found, shouldn't happen
1035 | 			unknown: '[Unknown]',
1036 | 			'null':'null',
1037 | 			undefined:'undefined',
1038 | 			'function':function( fn ) {
1039 | 				var ret = 'function',
1040 | 					name = 'name' in fn ? fn.name : (reName.exec(fn)||[])[1];//functions never have name in IE
1041 | 				if ( name )
1042 | 					ret += ' ' + name;
1043 | 				ret += '(';
1044 | 				
1045 | 				ret = [ ret, this.parse( fn, 'functionArgs' ), '){'].join('');
1046 | 				return join( ret, this.parse(fn,'functionCode'), '}' );
1047 | 			},
1048 | 			array: array,
1049 | 			nodelist: array,
1050 | 			arguments: array,
1051 | 			object:function( map ) {
1052 | 				var ret = [ ];
1053 | 				this.up();
1054 | 				for ( var key in map )
1055 | 					ret.push( this.parse(key,'key') + ': ' + this.parse(map[key]) );
1056 | 				this.down();
1057 | 				return join( '{', ret, '}' );
1058 | 			},
1059 | 			node:function( node ) {
1060 | 				var open = this.HTML ? '&lt;' : '<',
1061 | 					close = this.HTML ? '&gt;' : '>';
1062 | 					
1063 | 				var tag = node.nodeName.toLowerCase(),
1064 | 					ret = open + tag;
1065 | 					
1066 | 				for ( var a in this.DOMAttrs ) {
1067 | 					var val = node[this.DOMAttrs[a]];
1068 | 					if ( val )
1069 | 						ret += ' ' + a + '=' + this.parse( val, 'attribute' );
1070 | 				}
1071 | 				return ret + close + open + '/' + tag + close;
1072 | 			},
1073 | 			functionArgs:function( fn ) {//function calls it internally, it's the arguments part of the function
1074 | 				var l = fn.length;
1075 | 				if ( !l ) return '';				
1076 | 				
1077 | 				var args = Array(l);
1078 | 				while ( l-- )
1079 | 					args[l] = String.fromCharCode(97+l);//97 is 'a'
1080 | 				return ' ' + args.join(', ') + ' ';
1081 | 			},
1082 | 			key:quote, //object calls it internally, the key part of an item in a map
1083 | 			functionCode:'[code]', //function calls it internally, it's the content of the function
1084 | 			attribute:quote, //node calls it internally, it's an html attribute value
1085 | 			string:quote,
1086 | 			date:quote,
1087 | 			regexp:literal, //regex
1088 | 			number:literal,
1089 | 			'boolean':literal
1090 | 		},
1091 | 		DOMAttrs:{//attributes to dump from nodes, name=>realName
1092 | 			id:'id',
1093 | 			name:'name',
1094 | 			'class':'className'
1095 | 		},
1096 | 		HTML:false,//if true, entities are escaped ( <, >, \t, space and \n )
1097 | 		indentChar:'   ',//indentation unit
1098 | 		multiline:false //if true, items in a collection, are separated by a \n, else just a space.
1099 | 	};
1100 | 
1101 | 	return jsDump;
1102 | })();
1103 | 
1104 | // from Sizzle.js
1105 | function getText( elems ) {
1106 | 	var ret = "", elem;
1107 | 
1108 | 	for ( var i = 0; elems[i]; i++ ) {
1109 | 		elem = elems[i];
1110 | 
1111 | 		// Get the text from text nodes and CDATA nodes
1112 | 		if ( elem.nodeType === 3 || elem.nodeType === 4 ) {
1113 | 			ret += elem.nodeValue;
1114 | 
1115 | 		// Traverse everything else, except comment nodes
1116 | 		} else if ( elem.nodeType !== 8 ) {
1117 | 			ret += getText( elem.childNodes );
1118 | 		}
1119 | 	}
1120 | 
1121 | 	return ret;
1122 | };
1123 | 
1124 | /*
1125 |  * Javascript Diff Algorithm
1126 |  *  By John Resig (http://ejohn.org/)
1127 |  *  Modified by Chu Alan "sprite"
1128 |  *
1129 |  * Released under the MIT license.
1130 |  *
1131 |  * More Info:
1132 |  *  http://ejohn.org/projects/javascript-diff-algorithm/
1133 |  *  
1134 |  * Usage: QUnit.diff(expected, actual)
1135 |  * 
1136 |  * QUnit.diff("the quick brown fox jumped over", "the quick fox jumps over") == "the  quick <del>brown </del> fox <del>jumped </del><ins>jumps </ins> over"
1137 |  */
1138 | QUnit.diff = (function() {
1139 | 	function diff(o, n){
1140 | 		var ns = new Object();
1141 | 		var os = new Object();
1142 | 		
1143 | 		for (var i = 0; i < n.length; i++) {
1144 | 			if (ns[n[i]] == null) 
1145 | 				ns[n[i]] = {
1146 | 					rows: new Array(),
1147 | 					o: null
1148 | 				};
1149 | 			ns[n[i]].rows.push(i);
1150 | 		}
1151 | 		
1152 | 		for (var i = 0; i < o.length; i++) {
1153 | 			if (os[o[i]] == null) 
1154 | 				os[o[i]] = {
1155 | 					rows: new Array(),
1156 | 					n: null
1157 | 				};
1158 | 			os[o[i]].rows.push(i);
1159 | 		}
1160 | 		
1161 | 		for (var i in ns) {
1162 | 			if (ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1) {
1163 | 				n[ns[i].rows[0]] = {
1164 | 					text: n[ns[i].rows[0]],
1165 | 					row: os[i].rows[0]
1166 | 				};
1167 | 				o[os[i].rows[0]] = {
1168 | 					text: o[os[i].rows[0]],
1169 | 					row: ns[i].rows[0]
1170 | 				};
1171 | 			}
1172 | 		}
1173 | 		
1174 | 		for (var i = 0; i < n.length - 1; i++) {
1175 | 			if (n[i].text != null && n[i + 1].text == null && n[i].row + 1 < o.length && o[n[i].row + 1].text == null &&
1176 | 			n[i + 1] == o[n[i].row + 1]) {
1177 | 				n[i + 1] = {
1178 | 					text: n[i + 1],
1179 | 					row: n[i].row + 1
1180 | 				};
1181 | 				o[n[i].row + 1] = {
1182 | 					text: o[n[i].row + 1],
1183 | 					row: i + 1
1184 | 				};
1185 | 			}
1186 | 		}
1187 | 		
1188 | 		for (var i = n.length - 1; i > 0; i--) {
1189 | 			if (n[i].text != null && n[i - 1].text == null && n[i].row > 0 && o[n[i].row - 1].text == null &&
1190 | 			n[i - 1] == o[n[i].row - 1]) {
1191 | 				n[i - 1] = {
1192 | 					text: n[i - 1],
1193 | 					row: n[i].row - 1
1194 | 				};
1195 | 				o[n[i].row - 1] = {
1196 | 					text: o[n[i].row - 1],
1197 | 					row: i - 1
1198 | 				};
1199 | 			}
1200 | 		}
1201 | 		
1202 | 		return {
1203 | 			o: o,
1204 | 			n: n
1205 | 		};
1206 | 	}
1207 | 	
1208 | 	return function(o, n){
1209 | 		o = o.replace(/\s+$/, '');
1210 | 		n = n.replace(/\s+$/, '');
1211 | 		var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/));
1212 | 
1213 | 		var str = "";
1214 | 		
1215 | 		var oSpace = o.match(/\s+/g);
1216 | 		if (oSpace == null) {
1217 | 			oSpace = [" "];
1218 | 		}
1219 | 		else {
1220 | 			oSpace.push(" ");
1221 | 		}
1222 | 		var nSpace = n.match(/\s+/g);
1223 | 		if (nSpace == null) {
1224 | 			nSpace = [" "];
1225 | 		}
1226 | 		else {
1227 | 			nSpace.push(" ");
1228 | 		}
1229 | 		
1230 | 		if (out.n.length == 0) {
1231 | 			for (var i = 0; i < out.o.length; i++) {
1232 | 				str += '<del>' + out.o[i] + oSpace[i] + "</del>";
1233 | 			}
1234 | 		}
1235 | 		else {
1236 | 			if (out.n[0].text == null) {
1237 | 				for (n = 0; n < out.o.length && out.o[n].text == null; n++) {
1238 | 					str += '<del>' + out.o[n] + oSpace[n] + "</del>";
1239 | 				}
1240 | 			}
1241 | 			
1242 | 			for (var i = 0; i < out.n.length; i++) {
1243 | 				if (out.n[i].text == null) {
1244 | 					str += '<ins>' + out.n[i] + nSpace[i] + "</ins>";
1245 | 				}
1246 | 				else {
1247 | 					var pre = "";
1248 | 					
1249 | 					for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++) {
1250 | 						pre += '<del>' + out.o[n] + oSpace[n] + "</del>";
1251 | 					}
1252 | 					str += " " + out.n[i].text + nSpace[i] + pre;
1253 | 				}
1254 | 			}
1255 | 		}
1256 | 		
1257 | 		return str;
1258 | 	}
1259 | })();
1260 | 
1261 | })(this);
1262 | 


--------------------------------------------------------------------------------