├── images ├── bg.jpg ├── nav.png ├── large │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 16.jpg │ ├── 17.jpg │ ├── 18.jpg │ ├── 19.jpg │ ├── 2.jpg │ ├── 20.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── loading.gif ├── small │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 16.jpg │ ├── 17.jpg │ ├── 18.jpg │ ├── 19.jpg │ ├── 2.jpg │ ├── 20.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── black_denim.png └── loading_dark.gif ├── ReadMe.txt ├── README.md ├── css ├── elastislide.css ├── custom.css ├── demo.css └── demo-rtl.css ├── index.html ├── index3.html ├── index2.html ├── index4.html ├── index4-rtl.html └── js ├── modernizr.custom.17475.js ├── jquerypp.custom.js ├── jquery.elastislide-rtl.js └── jquery.elastislide.js /images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/bg.jpg -------------------------------------------------------------------------------- /images/nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/nav.png -------------------------------------------------------------------------------- /images/large/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/1.jpg -------------------------------------------------------------------------------- /images/large/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/10.jpg -------------------------------------------------------------------------------- /images/large/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/11.jpg -------------------------------------------------------------------------------- /images/large/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/12.jpg -------------------------------------------------------------------------------- /images/large/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/13.jpg -------------------------------------------------------------------------------- /images/large/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/14.jpg -------------------------------------------------------------------------------- /images/large/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/15.jpg -------------------------------------------------------------------------------- /images/large/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/16.jpg -------------------------------------------------------------------------------- /images/large/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/17.jpg -------------------------------------------------------------------------------- /images/large/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/18.jpg -------------------------------------------------------------------------------- /images/large/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/19.jpg -------------------------------------------------------------------------------- /images/large/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/2.jpg -------------------------------------------------------------------------------- /images/large/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/20.jpg -------------------------------------------------------------------------------- /images/large/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/3.jpg -------------------------------------------------------------------------------- /images/large/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/4.jpg -------------------------------------------------------------------------------- /images/large/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/5.jpg -------------------------------------------------------------------------------- /images/large/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/6.jpg -------------------------------------------------------------------------------- /images/large/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/7.jpg -------------------------------------------------------------------------------- /images/large/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/8.jpg -------------------------------------------------------------------------------- /images/large/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/large/9.jpg -------------------------------------------------------------------------------- /images/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/loading.gif -------------------------------------------------------------------------------- /images/small/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/1.jpg -------------------------------------------------------------------------------- /images/small/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/10.jpg -------------------------------------------------------------------------------- /images/small/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/11.jpg -------------------------------------------------------------------------------- /images/small/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/12.jpg -------------------------------------------------------------------------------- /images/small/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/13.jpg -------------------------------------------------------------------------------- /images/small/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/14.jpg -------------------------------------------------------------------------------- /images/small/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/15.jpg -------------------------------------------------------------------------------- /images/small/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/16.jpg -------------------------------------------------------------------------------- /images/small/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/17.jpg -------------------------------------------------------------------------------- /images/small/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/18.jpg -------------------------------------------------------------------------------- /images/small/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/19.jpg -------------------------------------------------------------------------------- /images/small/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/2.jpg -------------------------------------------------------------------------------- /images/small/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/20.jpg -------------------------------------------------------------------------------- /images/small/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/3.jpg -------------------------------------------------------------------------------- /images/small/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/4.jpg -------------------------------------------------------------------------------- /images/small/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/5.jpg -------------------------------------------------------------------------------- /images/small/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/6.jpg -------------------------------------------------------------------------------- /images/small/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/7.jpg -------------------------------------------------------------------------------- /images/small/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/8.jpg -------------------------------------------------------------------------------- /images/small/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/small/9.jpg -------------------------------------------------------------------------------- /images/black_denim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/black_denim.png -------------------------------------------------------------------------------- /images/loading_dark.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Elastislide/HEAD/images/loading_dark.gif -------------------------------------------------------------------------------- /ReadMe.txt: -------------------------------------------------------------------------------- 1 | Created by Codrops 2 | License: http://tympanus.net/codrops/licensing/ 3 | 4 | Background Pattern(s) from http://subtlepatterns.com/ 5 | http://creativecommons.org/licenses/by-sa/3.0/deed.en_US 6 | 7 | Images by Sherman Geronimo-Tan: http://www.flickr.com/people/smanography/ 8 | http://creativecommons.org/licenses/by/2.0/deed.en 9 | 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | Elastislide 3 | ========= 4 | 5 | Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images 6 | 7 | [article on Codrops](http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/) 8 | 9 | [demo](http://tympanus.net/Development/Elastislide/) 10 | 11 | Licensed under the MIT License -------------------------------------------------------------------------------- /css/elastislide.css: -------------------------------------------------------------------------------- 1 | /* Elastislide Style */ 2 | 3 | .elastislide-list { 4 | list-style-type: none; 5 | display: none; 6 | } 7 | 8 | .no-js .elastislide-list { 9 | display: block; 10 | } 11 | 12 | .elastislide-carousel ul li { 13 | min-width: 20px; /* minimum width of the image (min width + border) */ 14 | } 15 | 16 | .elastislide-wrapper { 17 | position: relative; 18 | background-color: #fff; 19 | margin: 0 auto; 20 | min-height: 60px; 21 | box-shadow: 1px 1px 3px rgba(0,0,0,0.2); 22 | } 23 | 24 | .elastislide-wrapper.elastislide-loading { 25 | background-image: url(../images/loading.gif); 26 | background-repeat: no-repeat; 27 | background-position: center center; 28 | } 29 | 30 | .elastislide-horizontal { 31 | padding: 10px 40px; 32 | } 33 | 34 | .elastislide-vertical { 35 | padding: 40px 10px; 36 | } 37 | 38 | .elastislide-carousel { 39 | overflow: hidden; 40 | position: relative; 41 | } 42 | 43 | .elastislide-carousel ul { 44 | position: relative; 45 | display: block; 46 | list-style-type: none; 47 | padding: 0; 48 | margin: 0; 49 | -webkit-backface-visibility: hidden; 50 | -webkit-transform: translateX(0px); 51 | -moz-transform: translateX(0px); 52 | -ms-transform: translateX(0px); 53 | -o-transform: translateX(0px); 54 | transform: translateX(0px); 55 | transition-property: -webkit-transform; 56 | transition-property: -moz-transform; 57 | transition-property: -o-transform; 58 | transition-property: -ms-transform; 59 | transition-property: transform; 60 | transition-duration: 200ms; 61 | } 62 | 63 | .elastislide-horizontal ul { 64 | white-space: nowrap; 65 | } 66 | 67 | .elastislide-carousel ul li { 68 | margin: 0; 69 | -webkit-backface-visibility: hidden; 70 | } 71 | 72 | .elastislide-horizontal ul li { 73 | height: 100%; 74 | display: inline-block; 75 | } 76 | 77 | .elastislide-vertical ul li { 78 | display: block; 79 | } 80 | 81 | .elastislide-carousel ul li a { 82 | display: inline-block; 83 | width: 100%; 84 | } 85 | 86 | .elastislide-carousel ul li a img { 87 | display: block; 88 | border: 2px solid white; 89 | max-width: 100%; 90 | } 91 | 92 | /* Navigation Arrows */ 93 | 94 | .elastislide-wrapper nav span { 95 | position: absolute; 96 | background: #ddd url(../images/nav.png) no-repeat 4px 3px; 97 | width: 23px; 98 | height: 23px; 99 | border-radius: 50%; 100 | text-indent: -9000px; 101 | cursor: pointer; 102 | opacity: 0.8; 103 | } 104 | 105 | .elastislide-wrapper nav span:hover { 106 | opacity: 1.0 107 | } 108 | 109 | .elastislide-horizontal nav span { 110 | top: 50%; 111 | left: 10px; 112 | margin-top: -11px; 113 | } 114 | 115 | .elastislide-vertical nav span { 116 | top: 10px; 117 | left: 50%; 118 | margin-left: -11px; 119 | background-position: -17px 5px; 120 | } 121 | 122 | .elastislide-horizontal nav span.elastislide-next { 123 | right: 10px; 124 | left: auto; 125 | background-position: 4px -17px; 126 | } 127 | 128 | .elastislide-vertical nav span.elastislide-next { 129 | bottom: 10px; 130 | top: auto; 131 | background-position: -17px -18px; 132 | } -------------------------------------------------------------------------------- /css/custom.css: -------------------------------------------------------------------------------- 1 | /* Custom Elastislide Styling */ 2 | 3 | .demo-1 .elastislide-horizontal { 4 | padding: 10px 37px; 5 | border-radius: 10px/90px; 6 | box-shadow: 7 | 0 1px 3px rgba(0, 0, 0, 0.1), 8 | inset -2px 0 3px 2px rgba(255, 255, 255, 0.6), 9 | inset 2px 0 3px 2px rgba(255, 255, 255, 0.6), 10 | inset -10px 0 10px 1px rgba(155, 155, 155, 0.1), 11 | inset 10px 0 10px 1px rgba(155, 155, 155, 0.1); 12 | } 13 | 14 | .demo-1 .elastislide-wrapper:before, 15 | .demo-1 .elastislide-wrapper:after{ 16 | content: ''; 17 | position: absolute; 18 | z-index: -2; 19 | bottom: 15px; 20 | left: 20px; 21 | width: 50%; 22 | height: 20%; 23 | border-radius: 10px/90px; 24 | box-shadow: 0 15px 10px rgba(0,0,0,0.7); 25 | -webkit-transform: rotate(-3deg); 26 | -moz-transform: rotate(-3deg); 27 | -ms-transform: rotate(-3deg); 28 | -o-transform: rotate(-3deg); 29 | transform: rotate(-3deg); 30 | } 31 | 32 | .demo-1 .elastislide-wrapper:after { 33 | right: 20px; 34 | left: auto; 35 | -webkit-transform: rotate(3deg); 36 | -moz-transform: rotate(3deg); 37 | -ms-transform: rotate(3deg); 38 | -o-transform: rotate(3deg); 39 | transform: rotate(3deg); 40 | } 41 | 42 | .demo-2 .elastislide-vertical { 43 | max-width: 170px; 44 | padding: 37px 10px; 45 | border-radius: 90px/10px; 46 | box-shadow: 47 | 0 1px 3px rgba(0, 0, 0, 0.1), 48 | inset -2px 0 3px 2px rgba(255, 255, 255, 0.6), 49 | inset 2px 0 3px 2px rgba(255, 255, 255, 0.6), 50 | inset 0 -10px 10px 1px rgba(155, 155, 155, 0.1), 51 | inset 0 10px 10px 1px rgba(155, 155, 155, 0.1); 52 | } 53 | 54 | .demo-2 .elastislide-vertical:before { 55 | top: 30px; 56 | bottom: 30px; 57 | left: 0; 58 | right: 0; 59 | content: " "; 60 | position: absolute; 61 | z-index: -2; 62 | box-shadow: 0 0 15px rgba(0,0,0,0.6); 63 | border-radius: 20px/160px; 64 | } 65 | 66 | .demo-2 .elastislide-vertical:after { 67 | content: " "; 68 | position: absolute; 69 | z-index: -2; 70 | } 71 | 72 | .demo-3 .elastislide-horizontal { 73 | background-color: #000; 74 | padding: 30px 60px; 75 | } 76 | 77 | .no-touch .demo-3 .elastislide-horizontal { 78 | opacity: 0.8; 79 | -webkit-transition: opacity 0.3s ease-in-out; 80 | -moz-transition: opacity 0.3s ease-in-out; 81 | -ms-transition: opacity 0.3s ease-in-out; 82 | -o-transition: opacity 0.3s ease-in-out; 83 | transition: opacity 0.3s ease-in-out; 84 | } 85 | 86 | .no-touch .demo-3 .elastislide-horizontal:hover { 87 | opacity: 1; 88 | } 89 | 90 | .demo-3 .elastislide-wrapper nav span { 91 | background-color: #000; 92 | } 93 | 94 | .demo-3 .elastislide-carousel ul li a{ 95 | padding: 0 10px; 96 | } 97 | 98 | .demo-3 .elastislide-carousel ul li a img { 99 | border-radius: 10px; 100 | border: none; 101 | } 102 | 103 | .demo-4 .elastislide-horizontal { 104 | background-color: transparent; 105 | border-radius: 20px 20px 0 0; 106 | } 107 | 108 | .demo-3 .elastislide-horizontal.elastislide-loading, 109 | .demo-4 .elastislide-horizontal.elastislide-loading { 110 | background-image: url(../images/loading_dark.gif); 111 | } 112 | 113 | .demo-4 .elastislide-carousel ul li a{ 114 | padding: 2px; 115 | } 116 | 117 | .demo-4 .elastislide-carousel ul li a img { 118 | border-radius: 10px; 119 | border: none; 120 | box-shadow: 0 1px 2px #000; 121 | } 122 | 123 | .demo-4 .elastislide-wrapper nav span { 124 | background-color: #666; 125 | box-shadow: inset 0 1px 1px rgba(0,0,0,0.2); 126 | } 127 | 128 | .demo-4 .image-preview img { 129 | border-radius: 0 0 20px 20px; 130 | max-width: 100%; 131 | display: block; 132 | } 133 | 134 | .demo-4 .elastislide-carousel ul li.current-img a img { 135 | box-shadow: 0 0 3px 2px rgba(62,235,255,0.8); 136 | } 137 | 138 | @media screen and (max-width: 460px) { 139 | .demo-3 .elastislide-horizontal { 140 | padding: 10px 40px; 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 3 | 4 | html { height: 100%; } 5 | 6 | *, 7 | *:after, 8 | *:before { 9 | -webkit-box-sizing: border-box; 10 | -moz-box-sizing: border-box; 11 | box-sizing: border-box; 12 | padding: 0; 13 | margin: 0; 14 | } 15 | 16 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 17 | .clearfix:before, 18 | .clearfix:after { 19 | content: " "; /* 1 */ 20 | display: table; /* 2 */ 21 | } 22 | 23 | .clearfix:after { 24 | clear: both; 25 | } 26 | 27 | .clearfix { 28 | *zoom: 1; 29 | } 30 | 31 | body { 32 | font-family: 'Lato', Calibri, Arial, sans-serif; 33 | background: #ddd url(../images/bg.jpg) repeat top left; 34 | font-weight: 300; 35 | font-size: 15px; 36 | color: #333; 37 | -webkit-font-smoothing: antialiased; 38 | overflow-y: scroll; 39 | overflow-x: hidden; 40 | text-shadow: 0 1px 0 rgba(255,255,255,0.8); 41 | } 42 | 43 | a { 44 | color: #555; 45 | text-decoration: none; 46 | } 47 | 48 | .container { 49 | width: 100%; 50 | position: relative; 51 | } 52 | 53 | .clr { 54 | clear: both; 55 | float: none; 56 | } 57 | 58 | .main { 59 | width: 95%; 60 | max-width: 960px; 61 | padding: 0 10px; 62 | margin: 0 auto; 63 | position: relative; 64 | } 65 | 66 | .main > header { 67 | padding: 40px 0; 68 | } 69 | 70 | .main > header h1 { 71 | font-size: 34px; 72 | line-height: 38px; 73 | margin: 0; 74 | font-weight: 700; 75 | color: #333; 76 | float: left; 77 | } 78 | 79 | .main > header h1 span { 80 | display: block; 81 | font-size: 20px; 82 | font-weight: 300; 83 | } 84 | 85 | .main p { 86 | padding: 30px 0 0; 87 | text-align: center; 88 | font-weight: 400; 89 | line-height: 22px; 90 | } 91 | 92 | /* Header Style */ 93 | .codrops-top { 94 | line-height: 24px; 95 | font-size: 11px; 96 | background: #fff; 97 | background: rgba(255, 255, 255, 0.5); 98 | text-transform: uppercase; 99 | z-index: 9999; 100 | position: relative; 101 | font-family: Cambria, Georgia, serif; 102 | box-shadow: 1px 0px 2px rgba(0,0,0,0.2); 103 | } 104 | 105 | .codrops-top a { 106 | padding: 0px 10px; 107 | letter-spacing: 1px; 108 | color: #333; 109 | text-shadow: 0 -1px 0 #fff; 110 | display: inline-block; 111 | } 112 | 113 | .codrops-top a:hover { 114 | background: rgba(255,255,255,0.8); 115 | color: #000; 116 | } 117 | 118 | .codrops-top span.right { 119 | float: right; 120 | } 121 | 122 | .codrops-top span.right a { 123 | float: left; 124 | display: block; 125 | } 126 | 127 | /* Demo Buttons Style */ 128 | .codrops-demos { 129 | float: right; 130 | clear: none; 131 | padding-top: 10px; 132 | } 133 | 134 | .codrops-demos a { 135 | display: inline-block; 136 | margin: 10px 10px 10px 0; 137 | color: #666; 138 | font-weight: 700; 139 | line-height: 30px; 140 | border-bottom: 4px solid transparent; 141 | } 142 | 143 | .codrops-demos a:hover { 144 | color: #000; 145 | border-color: #000; 146 | } 147 | 148 | .codrops-demos a.current-demo, 149 | .codrops-demos a.current-demo:hover { 150 | color: #aaa; 151 | border-color: #aaa; 152 | } 153 | 154 | .column { 155 | width: 50%; 156 | float: left; 157 | padding: 20px; 158 | min-height: 300px; 159 | } 160 | 161 | .column p { 162 | text-align: left; 163 | } 164 | 165 | .column-20 { 166 | width: 20%; 167 | } 168 | 169 | .column-80 { 170 | width: 80%; 171 | } 172 | 173 | .js .fixed-bar { 174 | position: fixed; 175 | width: 100%; 176 | left: 0; 177 | bottom: 0; 178 | } 179 | 180 | .js .gallery { 181 | width: 100%; 182 | max-width: 450px; 183 | margin: 0 auto; 184 | border-radius: 20px; 185 | position: relative; 186 | background: #000 url(../images/black_denim.png); 187 | box-shadow: 0 2px 1px rgba(255,255,255,0.9), 0 -2px 1px rgba(255,255,255,0.9); 188 | } 189 | 190 | .lt-ie8 .elastislide-list { 191 | display: none; 192 | } 193 | 194 | @media screen and (max-width: 690px) { 195 | .codrops-demos { 196 | float: left; 197 | clear: both; 198 | } 199 | } 200 | 201 | -------------------------------------------------------------------------------- /css/demo-rtl.css: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 3 | 4 | html { 5 | height: 100%; 6 | direction: rtl; 7 | } 8 | 9 | *, 10 | *:after, 11 | *:before { 12 | -webkit-box-sizing: border-box; 13 | -moz-box-sizing: border-box; 14 | box-sizing: border-box; 15 | padding: 0; 16 | margin: 0; 17 | } 18 | 19 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 20 | .clearfix:before, 21 | .clearfix:after { 22 | content: " "; /* 1 */ 23 | display: table; /* 2 */ 24 | } 25 | 26 | .clearfix:after { 27 | clear: both; 28 | } 29 | 30 | .clearfix { 31 | *zoom: 1; 32 | } 33 | 34 | body { 35 | font-family: 'Lato', Calibri, Arial, sans-serif; 36 | background: #ddd url(../images/bg.jpg) repeat top left; 37 | font-weight: 300; 38 | font-size: 15px; 39 | color: #333; 40 | -webkit-font-smoothing: antialiased; 41 | overflow-y: scroll; 42 | overflow-x: hidden; 43 | text-shadow: 0 1px 0 rgba(255,255,255,0.8); 44 | } 45 | 46 | a { 47 | color: #555; 48 | text-decoration: none; 49 | } 50 | 51 | .container { 52 | width: 100%; 53 | position: relative; 54 | } 55 | 56 | .clr { 57 | clear: both; 58 | float: none; 59 | } 60 | 61 | .main { 62 | width: 95%; 63 | max-width: 960px; 64 | padding: 0 10px; 65 | margin: 0 auto; 66 | position: relative; 67 | } 68 | 69 | .main > header { 70 | padding: 40px 0; 71 | } 72 | 73 | .main > header h1 { 74 | font-size: 34px; 75 | line-height: 38px; 76 | margin: 0; 77 | font-weight: 700; 78 | color: #333; 79 | float: right; 80 | } 81 | 82 | .main > header h1 span { 83 | display: block; 84 | font-size: 20px; 85 | font-weight: 300; 86 | } 87 | 88 | .main p { 89 | padding: 30px 0 0; 90 | text-align: center; 91 | font-weight: 400; 92 | line-height: 22px; 93 | } 94 | 95 | /* Header Style */ 96 | .codrops-top { 97 | line-height: 24px; 98 | font-size: 11px; 99 | background: #fff; 100 | background: rgba(255, 255, 255, 0.5); 101 | text-transform: uppercase; 102 | z-index: 9999; 103 | position: relative; 104 | font-family: Cambria, Georgia, serif; 105 | box-shadow: 1px 0px 2px rgba(0,0,0,0.2); 106 | } 107 | 108 | .codrops-top a { 109 | padding: 0px 10px; 110 | letter-spacing: 1px; 111 | color: #333; 112 | text-shadow: 0 -1px 0 #fff; 113 | display: inline-block; 114 | } 115 | 116 | .codrops-top a:hover { 117 | background: rgba(255,255,255,0.8); 118 | color: #000; 119 | } 120 | 121 | .codrops-top span.right { 122 | float: left; 123 | } 124 | 125 | .codrops-top span.right a { 126 | float: right; 127 | display: block; 128 | } 129 | 130 | /* Demo Buttons Style */ 131 | .codrops-demos { 132 | float: left; 133 | clear: none; 134 | padding-top: 10px; 135 | } 136 | 137 | .codrops-demos a { 138 | display: inline-block; 139 | margin: 10px 10px 10px 0; 140 | color: #666; 141 | font-weight: 700; 142 | line-height: 30px; 143 | border-bottom: 4px solid transparent; 144 | } 145 | 146 | .codrops-demos a:hover { 147 | color: #000; 148 | border-color: #000; 149 | } 150 | 151 | .codrops-demos a.current-demo, 152 | .codrops-demos a.current-demo:hover { 153 | color: #aaa; 154 | border-color: #aaa; 155 | } 156 | 157 | .column { 158 | width: 50%; 159 | float: right; 160 | padding: 20px; 161 | min-height: 300px; 162 | } 163 | 164 | .column p { 165 | text-align: left; 166 | } 167 | 168 | .column-20 { 169 | width: 20%; 170 | } 171 | 172 | .column-80 { 173 | width: 80%; 174 | } 175 | 176 | .js .fixed-bar { 177 | position: fixed; 178 | width: 100%; 179 | left: 0; 180 | bottom: 0; 181 | } 182 | 183 | .js .gallery { 184 | width: 100%; 185 | max-width: 450px; 186 | margin: 0 auto; 187 | border-radius: 20px; 188 | position: relative; 189 | background: #000 url(../images/black_denim.png); 190 | box-shadow: 0 2px 1px rgba(255,255,255,0.9), 0 -2px 1px rgba(255,255,255,0.9); 191 | } 192 | 193 | .lt-ie8 .elastislide-list { 194 | display: none; 195 | } 196 | 197 | @media screen and (max-width: 690px) { 198 | .codrops-demos { 199 | float: right; 200 | clear: both; 201 | } 202 | } 203 | 204 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Elastislide - A Responsive Image Carousel 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | « Previous Demo: Slicebox 24 | 25 | Images by Sherman Geronimo-Tan 26 | back to the Codrops post 27 | 28 |
29 | 30 |
31 |
32 |

Elastislide A Responsive Image Carousel

33 | 40 |
41 | 42 | 43 | 65 | 66 | 67 |

Resize the browser to see how the carousel adapts

68 | 69 |

Example 1: A minimum of 3 (default) images are always visible.

70 |
71 |
72 | 73 | 74 | 75 | 80 | 81 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Elastislide - A Responsive Image Carousel 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | « Previous Demo: Slicebox 24 | 25 | Images by Sherman Geronimo-Tan 26 | back to the Codrops post 27 | 28 |
29 | 30 |
31 |
32 |

Elastislide A Responsive Image Carousel

33 | 40 |
41 | 42 | 43 |
44 | 45 | 67 | 68 |
69 | 70 |

Resize the browser to see how the carousel adapts

71 | 72 |

Example 3: Fixed wrapper with a minimum of 2 images is always visible.

73 |
74 |
75 | 76 | 77 | 78 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Elastislide - A Responsive Image Carousel 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | « Previous Demo: Slicebox 24 | 25 | Images by Sherman Geronimo-Tan 26 | back to the Codrops post 27 | 28 |
29 | 30 |
31 |
32 |

Elastislide A Responsive Image Carousel

33 | 40 |
41 |
42 | 43 | 65 | 66 |
67 | 68 |
69 |

Resize the browser to see how the carousel adapts

70 |

Example 2: Vertical with a minimum of 3 items visible (automatic height).

71 |
72 | 73 |
74 |
75 | 76 | 77 | 78 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Elastislide - A Responsive Image Carousel 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |
24 | « Previous Demo: Slicebox 25 | 26 | Images by Sherman Geronimo-Tan 27 | back to the Codrops post 28 | 29 |
30 | 31 |
32 |
33 |

Elastislide A Responsive Image Carousel

34 | 41 |
42 | 43 |
44 | 45 | 67 | 68 | 69 |
70 | 71 |
72 |
73 | 74 |

Resize the browser to see how the carousel adapts

75 |

Example 4: Usage in an image gallery; a minimum of 4 images are visible.

76 | 77 |
78 |
79 | 80 | 81 | 82 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /index4-rtl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Elastislide - A Responsive Image Carousel 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |
24 | « Previous Demo: Slicebox 25 | 26 | Images by Sherman Geronimo-Tan 27 | back to the Codrops post 28 | 29 |
30 | 31 |
32 |
33 |

Elastislide A Responsive Image Carousel

34 | 41 |
42 | 43 |
44 | 45 | 67 | 68 | 69 |
70 | 71 |
72 |
73 | 74 |

Resize the browser to see how the carousel adapts

75 |

Example 4 RTL: Usage in an image gallery; a minimum of 4 images are visible with RTL template

76 | 77 |
78 |
79 | 80 | 81 | 82 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /js/modernizr.custom.17475.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-csstransforms-csstransitions-touch-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:w(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},q.csstransforms=function(){return!!F("transform")},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f 0; 108 | } 109 | }; 110 | $.fn.triggerHandled = function( event, data ) { 111 | event = (typeof event == "string" ? $.Event(event) : event); 112 | this.trigger(event, data); 113 | return event.handled; 114 | }; 115 | /** 116 | * Only attaches one event handler for all types ... 117 | * @param {Array} types llist of types that will delegate here 118 | * @param {Object} startingEvent the first event to start listening to 119 | * @param {Object} onFirst a function to call 120 | */ 121 | event.setupHelper = function( types, startingEvent, onFirst ) { 122 | if (!onFirst ) { 123 | onFirst = startingEvent; 124 | startingEvent = null; 125 | } 126 | var add = function( handleObj ) { 127 | 128 | var bySelector, selector = handleObj.selector || ""; 129 | if ( selector ) { 130 | bySelector = event.find(this, types, selector); 131 | if (!bySelector.length ) { 132 | $(this).delegate(selector, startingEvent, onFirst); 133 | } 134 | } 135 | else { 136 | //var bySelector = event.find(this, types, selector); 137 | if (!event.find(this, types, selector).length ) { 138 | event.add(this, startingEvent, onFirst, { 139 | selector: selector, 140 | delegate: this 141 | }); 142 | } 143 | 144 | } 145 | 146 | }, 147 | remove = function( handleObj ) { 148 | var bySelector, selector = handleObj.selector || ""; 149 | if ( selector ) { 150 | bySelector = event.find(this, types, selector); 151 | if (!bySelector.length ) { 152 | $(this).undelegate(selector, startingEvent, onFirst); 153 | } 154 | } 155 | else { 156 | if (!event.find(this, types, selector).length ) { 157 | event.remove(this, startingEvent, onFirst, { 158 | selector: selector, 159 | delegate: this 160 | }); 161 | } 162 | } 163 | }; 164 | $.each(types, function() { 165 | event.special[this] = { 166 | add: add, 167 | remove: remove, 168 | setup: function() {}, 169 | teardown: function() {} 170 | }; 171 | }); 172 | }; 173 | })(jQuery); 174 | (function($){ 175 | var isPhantom = /Phantom/.test(navigator.userAgent), 176 | supportTouch = !isPhantom && "ontouchend" in document, 177 | scrollEvent = "touchmove scroll", 178 | // Use touch events or map it to mouse events 179 | touchStartEvent = supportTouch ? "touchstart" : "mousedown", 180 | touchStopEvent = supportTouch ? "touchend" : "mouseup", 181 | touchMoveEvent = supportTouch ? "touchmove" : "mousemove", 182 | data = function(event){ 183 | var d = event.originalEvent.touches ? 184 | event.originalEvent.touches[ 0 ] : 185 | event; 186 | return { 187 | time: (new Date).getTime(), 188 | coords: [ d.pageX, d.pageY ], 189 | origin: $( event.target ) 190 | }; 191 | }; 192 | 193 | /** 194 | * @add jQuery.event.swipe 195 | */ 196 | var swipe = $.event.swipe = { 197 | /** 198 | * @attribute delay 199 | * Delay is the upper limit of time the swipe motion can take in milliseconds. This defaults to 500. 200 | * 201 | * A user must perform the swipe motion in this much time. 202 | */ 203 | delay : 500, 204 | /** 205 | * @attribute max 206 | * The maximum distance the pointer must travel in pixels. The default is 75 pixels. 207 | */ 208 | max : 75, 209 | /** 210 | * @attribute min 211 | * The minimum distance the pointer must travel in pixels. The default is 30 pixels. 212 | */ 213 | min : 30 214 | }; 215 | 216 | $.event.setupHelper( [ 217 | 218 | /** 219 | * @hide 220 | * @attribute swipe 221 | */ 222 | "swipe", 223 | /** 224 | * @hide 225 | * @attribute swipeleft 226 | */ 227 | 'swipeleft', 228 | /** 229 | * @hide 230 | * @attribute swiperight 231 | */ 232 | 'swiperight', 233 | /** 234 | * @hide 235 | * @attribute swipeup 236 | */ 237 | 'swipeup', 238 | /** 239 | * @hide 240 | * @attribute swipedown 241 | */ 242 | 'swipedown'], touchStartEvent, function(ev){ 243 | var 244 | // update with data when the event was started 245 | start = data(ev), 246 | stop, 247 | delegate = ev.delegateTarget || ev.currentTarget, 248 | selector = ev.handleObj.selector, 249 | entered = this; 250 | 251 | function moveHandler(event){ 252 | if ( !start ) { 253 | return; 254 | } 255 | // update stop with the data from the current event 256 | stop = data(event); 257 | 258 | // prevent scrolling 259 | if ( Math.abs( start.coords[0] - stop.coords[0] ) > 10 ) { 260 | event.preventDefault(); 261 | } 262 | }; 263 | 264 | // Attach to the touch move events 265 | $(document.documentElement).bind(touchMoveEvent, moveHandler) 266 | .one(touchStopEvent, function(event){ 267 | $(this).unbind( touchMoveEvent, moveHandler); 268 | // if start and stop contain data figure out if we have a swipe event 269 | if ( start && stop ) { 270 | // calculate the distance between start and stop data 271 | var deltaX = Math.abs(start.coords[0] - stop.coords[0]), 272 | deltaY = Math.abs(start.coords[1] - stop.coords[1]), 273 | distance = Math.sqrt(deltaX*deltaX+deltaY*deltaY); 274 | 275 | // check if the delay and distance are matched 276 | if ( stop.time - start.time < swipe.delay && distance >= swipe.min ) { 277 | var events = ['swipe']; 278 | // check if we moved horizontally 279 | if( deltaX >= swipe.min && deltaY < swipe.min) { 280 | // based on the x coordinate check if we moved left or right 281 | events.push( start.coords[0] > stop.coords[0] ? "swipeleft" : "swiperight" ); 282 | } else 283 | // check if we moved vertically 284 | if(deltaY >= swipe.min && deltaX < swipe.min){ 285 | // based on the y coordinate check if we moved up or down 286 | events.push( start.coords[1] < stop.coords[1] ? "swipedown" : "swipeup" ); 287 | } 288 | 289 | // trigger swipe events on this guy 290 | $.each($.event.find(delegate, events, selector), function(){ 291 | this.call(entered, ev, {start : start, end: stop}) 292 | }) 293 | 294 | } 295 | } 296 | // reset start and stop 297 | start = stop = undefined; 298 | }) 299 | }); 300 | 301 | })(jQuery) -------------------------------------------------------------------------------- /js/jquery.elastislide-rtl.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jquery.elastislide.js v1.1.0 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2012, Codrops 9 | * http://www.codrops.com 10 | */ 11 | 12 | ;( function( $, window, undefined ) { 13 | 14 | 'use strict'; 15 | 16 | /* 17 | * debouncedresize: special jQuery event that happens once after a window resize 18 | * 19 | * latest version and complete README available on Github: 20 | * https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js 21 | * 22 | * Copyright 2011 @louis_remi 23 | * Licensed under the MIT license. 24 | */ 25 | 26 | var autoSlide = false; //set this to enable autoslide. 27 | var delayTime = 3000; //ms — autoslide delay. 28 | 29 | var $event = $.event, 30 | $special, 31 | resizeTimeout; 32 | 33 | $special = $event.special.debouncedresize = { 34 | setup: function() { 35 | $( this ).on( "resize", $special.handler ); 36 | }, 37 | teardown: function() { 38 | $( this ).off( "resize", $special.handler ); 39 | }, 40 | handler: function( event, execAsap ) { 41 | // Save the context 42 | var context = this, 43 | args = arguments, 44 | dispatch = function() { 45 | // set correct event type 46 | event.type = "debouncedresize"; 47 | $event.dispatch.apply( context, args ); 48 | }; 49 | 50 | if ( resizeTimeout ) { 51 | clearTimeout( resizeTimeout ); 52 | } 53 | 54 | execAsap ? 55 | dispatch() : 56 | resizeTimeout = setTimeout( dispatch, $special.threshold ); 57 | }, 58 | threshold: 150 59 | }; 60 | 61 | // ======================= imagesLoaded Plugin =============================== 62 | // https://github.com/desandro/imagesloaded 63 | 64 | // $('#my-container').imagesLoaded(myFunction) 65 | // execute a callback when all images have loaded. 66 | // needed because .load() doesn't work on cached images 67 | 68 | // callback function gets image collection as argument 69 | // this is the container 70 | 71 | // original: mit license. paul irish. 2010. 72 | // contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou 73 | 74 | // blank image data-uri bypasses webkit log warning (thx doug jones) 75 | var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='; 76 | 77 | $.fn.imagesLoaded = function( callback ) { 78 | var $this = this, 79 | deferred = $.isFunction($.Deferred) ? $.Deferred() : 0, 80 | hasNotify = $.isFunction(deferred.notify), 81 | $images = $this.find('img').add( $this.filter('img') ), 82 | loaded = [], 83 | proper = [], 84 | broken = []; 85 | 86 | // Register deferred callbacks 87 | if ($.isPlainObject(callback)) { 88 | $.each(callback, function (key, value) { 89 | if (key === 'callback') { 90 | callback = value; 91 | } else if (deferred) { 92 | deferred[key](value); 93 | } 94 | }); 95 | } 96 | 97 | function doneLoading() { 98 | var $proper = $(proper), 99 | $broken = $(broken); 100 | 101 | if ( deferred ) { 102 | if ( broken.length ) { 103 | deferred.reject( $images, $proper, $broken ); 104 | } else { 105 | deferred.resolve( $images ); 106 | } 107 | } 108 | 109 | if ( $.isFunction( callback ) ) { 110 | callback.call( $this, $images, $proper, $broken ); 111 | } 112 | } 113 | 114 | function imgLoaded( img, isBroken ) { 115 | // don't proceed if BLANK image, or image is already loaded 116 | if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) { 117 | return; 118 | } 119 | 120 | // store element in loaded images array 121 | loaded.push( img ); 122 | 123 | // keep track of broken and properly loaded images 124 | if ( isBroken ) { 125 | broken.push( img ); 126 | } else { 127 | proper.push( img ); 128 | } 129 | 130 | // cache image and its state for future calls 131 | $.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } ); 132 | 133 | // trigger deferred progress method if present 134 | if ( hasNotify ) { 135 | deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] ); 136 | } 137 | 138 | // call doneLoading and clean listeners if all images are loaded 139 | if ( $images.length === loaded.length ){ 140 | setTimeout( doneLoading ); 141 | $images.unbind( '.imagesLoaded' ); 142 | } 143 | } 144 | 145 | // if no images, trigger immediately 146 | if ( !$images.length ) { 147 | doneLoading(); 148 | } else { 149 | $images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){ 150 | // trigger imgLoaded 151 | imgLoaded( event.target, event.type === 'error' ); 152 | }).each( function( i, el ) { 153 | var src = el.src; 154 | 155 | // find out if this image has been already checked for status 156 | // if it was, and src has not changed, call imgLoaded on it 157 | var cached = $.data( el, 'imagesLoaded' ); 158 | if ( cached && cached.src === src ) { 159 | imgLoaded( el, cached.isBroken ); 160 | return; 161 | } 162 | 163 | // if complete is true and browser supports natural sizes, try 164 | // to check for image status manually 165 | if ( el.complete && el.naturalWidth !== undefined ) { 166 | imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 ); 167 | return; 168 | } 169 | 170 | // cached images don't fire load sometimes, so we reset src, but only when 171 | // dealing with IE, or image is complete (loaded) and failed manual check 172 | // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f 173 | if ( el.readyState || el.complete ) { 174 | el.src = BLANK; 175 | el.src = src; 176 | } 177 | }); 178 | } 179 | 180 | return deferred ? deferred.promise( $this ) : $this; 181 | }; 182 | 183 | // global 184 | var $window = $( window ), 185 | Modernizr = window.Modernizr; 186 | 187 | $.Elastislide = function( options, element ) { 188 | 189 | this.$el = $( element ); 190 | this._init( options ); 191 | 192 | }; 193 | 194 | $.Elastislide.defaults = { 195 | // orientation 'horizontal' || 'vertical' 196 | orientation : 'horizontal', 197 | // sliding speed 198 | speed : 500, 199 | // sliding easing 200 | easing : 'ease-in-out', 201 | // the minimum number of items to show. 202 | // when we resize the window, this will make sure minItems are always shown 203 | // (unless of course minItems is higher than the total number of elements) 204 | minItems : 3, 205 | // optionally specify a selector rather than using the img element to read the image sizes 206 | // (we only use the first matching element within our items) 207 | imgSizeItemSelector : 'img', 208 | // index of the current item (left most item of the carousel) 209 | start : 0, 210 | // click item callback 211 | onClick : function( el, position, evt ) { return false; }, 212 | onReady : function() { return false; }, 213 | onBeforeSlide : function() { return false; }, 214 | onAfterSlide : function() { return false; } 215 | }; 216 | 217 | $.Elastislide.prototype = { 218 | 219 | _init : function( options ) { 220 | 221 | // options 222 | this.options = $.extend( true, {}, $.Elastislide.defaults, options ); 223 | 224 | // https://github.com/twitter/bootstrap/issues/2870 225 | var self = this, 226 | transEndEventNames = { 227 | 'WebkitTransition' : 'webkitTransitionEnd', 228 | 'MozTransition' : 'transitionend', 229 | 'OTransition' : 'oTransitionEnd', 230 | 'msTransition' : 'MSTransitionEnd', 231 | 'transition' : 'transitionend' 232 | }; 233 | 234 | this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ]; 235 | 236 | // suport for css transforms and css transitions 237 | this.support = Modernizr.csstransitions && Modernizr.csstransforms; 238 | 239 | // current item's index 240 | this.current = this.options.start; 241 | 242 | // control if it's sliding 243 | this.isSliding = false; 244 | 245 | this.$items = this.$el.children( 'li' ); 246 | // total number of items 247 | this.itemsCount = this.$items.length; 248 | if( this.itemsCount === 0 ) { 249 | 250 | return false; 251 | 252 | } 253 | this._validate(); 254 | // remove white space 255 | this.$items.detach(); 256 | this.$el.empty(); 257 | this.$el.append( this.$items ); 258 | 259 | // main wrapper 260 | this.$el.wrap( '
' ); 261 | 262 | // check if we applied a transition to the