1// ------------------------------------------------------------------------------------------- 2// Horizontal Gallery 3// 4// @since ??? 5// @since 5.0 extended "slideshow" navigation, added transform3d support 6// ------------------------------------------------------------------------------------------- 7 8(function($) 9{ 10 "use strict"; 11 12 $.fn.avia_hor_gallery = function(options) 13 { 14 var defaults = 15 { 16 slide_container : '.av-horizontal-gallery-inner', //element with max width 17 slide_element : '.av-horizontal-gallery-slider', //element that gets moved 18 slide_content : '.av-horizontal-gallery-wrap', 19 slide_arrows : '.avia-slideshow-arrows', 20 slide_dots : '.avia-slideshow-dots', 21 active : 'av-active-gal-item', // must be a class string without the . in front 22 slide_controls : '.avia-slideshow-controls', 23 prev : '.av-horizontal-gallery-prev', 24 next : '.av-horizontal-gallery-next' 25 }; 26 27 var options = $.extend(defaults, options); 28 29 var win = $(window), 30 browserPrefix = $.avia_utilities.supports('transition'), 31 cssActive = this.browserPrefix !== false ? true : false, 32 isMobile = $.avia_utilities.isMobile, 33 isTouchDevice = $.avia_utilities.isTouchDevice, 34 transform3d = document.documentElement.className.indexOf('avia_transform3d') !== -1 ? true : false, 35 transition = {}; 36 37 return this.each(function() 38 { 39 var container = $(this), 40 slide_container = container.find( options.slide_container ), 41 slide_element = container.find( options.slide_element ), 42 slide_content = container.find( options.slide_content ), 43 slide_controls = container.find( options.slide_controls ), 44 slide_arrows = container.find( options.slide_arrows ), // arrows to scroll images 45 slide_dots_wrap = container.find( options.slide_dots ), // dots to scroll images 46 slide_dots = slide_dots_wrap.find( 'a' ), 47 prev = container.find( options.prev ), 48 next = container.find( options.next ), 49 imgs = container.find( 'img' ), 50 51 52 all_elements_width = 0, 53 currentIndex = false, // 0 based 54 slideshowOptions = { 55 animation: 'av-tab-slide-transition', 56 autoplay: false, 57 loop_autoplay: 'once', // 'endless' | 'once' 58 interval: 5, 59 loop_manual: 'manual-endless', // 'manual-endless' | 'manual-once' 60 autoplay_stopper: false, 61 noNavigation: false, 62 initial: null, 63 enlarge: 1 64 }, 65 slideshowData = container.data( 'slideshow-data' ), // returns decoded json object 66 timeoutIDAutoplay = null; 67 68 if( 'undefined' != typeof slideshowData ) 69 { 70 slideshowOptions = $.extend( {}, slideshowOptions, slideshowData ); 71 } 72 73 var set_up = function() 74 { 75 var sl_height = ( slide_container.width() / 100 ) * slide_container.data('av-height'); 76 77 slide_container.css( {'padding':0} ).height( sl_height ); 78 79 //fixes img distortion when resizing browser: 80 imgs.css('display','inline-block'); 81 setTimeout( function(){ imgs.css( 'display', 'block' ); }, 10 ); 82 83 //calculate the slidelement width based on the elements inside 84 all_elements_width = 0; 85 86 slide_content.each( function() 87 { 88 all_elements_width += $(this).outerWidth( true ); 89 }); 90 91 slide_element.css( 'min-width' , all_elements_width ); 92 93 if( currentIndex !== false ) 94 { 95 change_active( currentIndex ); 96 } 97 }, 98 99 change_active = function( index ) 100 { 101 //scroll the tabs if there is not enough room to display them all 102 var current = slide_element.find( options.slide_content ).eq( index ), 103 viewport = slide_container.width(), 104 modifier = slideshowOptions.enlarge > 1 && currentIndex == index ? slideshowOptions.enlarge : 1, 105 outerWidth = current.outerWidth( true ) * modifier, 106 margin_right= parseInt( current.css('margin-right'), 10 ) / 2, 107 left_pos = viewport < all_elements_width ? ( current.position().left * - 1 ) - ( outerWidth / 2 ) + ( viewport / 2 ): 0; 108 109 //center properly 110 left_pos = left_pos + margin_right; 111 112 //out of bounce right side 113 if( left_pos + all_elements_width < viewport ) 114 { 115 left_pos = ( all_elements_width - viewport - parseInt( current.css('margin-right'), 10 ) ) * -1; 116 } 117 118 //out of bounce left side 119 if( left_pos > 0 ) 120 { 121 left_pos = 0; 122 } 123 124 if( cssActive ) 125 { 126 transition['transform'] = transform3d ? "translate3d( " + left_pos + "px, 0, 0 )" : "translate( " + left_pos + "px, 0 )"; //3d or 2d transform? 127 transition['left'] = "0px"; 128 slide_element.css( transition ); 129 } 130 else 131 { 132 slide_element.css( 'left', left_pos ); 133 } 134 135 slide_container.find( '.' + options.active ).removeClass( options.active );
136 current.addClass( options.active ); 137 currentIndex = index; 138 139 set_slide_arrows_visibility(); 140 set_slide_dots_visibility(); 141 }, 142 143 clearTimeoutAutoplay = function() 144 { 145 if( typeof timeoutIDAutoplay === 'number' ) 146 { 147 clearTimeout( timeoutIDAutoplay ); 148 } 149 150 timeoutIDAutoplay = null; 151 }, 152 153 init_autoplay = function() 154 { 155 if( true !== slideshowOptions.autoplay ) 156 { 157 container.removeClass( 'av-slideshow-autoplay' ).addClass( 'av-slideshow-manual' ); 158 } 159 160 if( 'undefined' == typeof slideshowOptions.loop_autoplay || 'endless' != slideshowOptions.loop_autoplay ) 161 { 162 slideshowOptions.loop_autoplay = 'once'; 163 } 164 165 if( 'undefined' == typeof slideshowOptions.interval ) 166 { 167 slideshowOptions.interval = 5; 168 } 169 170 if( 'undefined' == typeof slideshowOptions.autoplay || true !== slideshowOptions.autoplay ) 171 { 172 slideshowOptions.autoplay = false; 173 container.removeClass( 'av-slideshow-autoplay' ).addClass( 'av-slideshow-manual' ); 174 return; 175 } 176 177 clearTimeoutAutoplay(); 178 179 timeoutIDAutoplay = setTimeout( function() 180 { 181 rotate_next_image(); 182 }, slideshowOptions.interval * 1000 ); 183 }, 184 185 rotate_next_image = function() 186 { 187 timeoutIDAutoplay = null; 188 189 if( 'endless' != slideshowOptions.loop_autoplay ) 190 { 191 var stop = false; 192 193 if( currentIndex === false ) 194 { 195 if( slide_content.length == 0 ) 196 { 197 stop = true; 198 } 199 } 200 else 201 { 202 stop = currentIndex + 1 >= slide_content.length; 203 } 204 205 if( stop ) 206 { 207 slideshowOptions.autoplay = false; 208 slideshowOptions.loop_autoplay = 'manual'; 209 container.removeClass( 'av-slideshow-autoplay' ).addClass( 'av-slideshow-manual' ); 210 container.removeClass( 'av-loop-endless' ).addClass( 'av-loop-once' ); 211 return; 212 } 213 } 214 215 // activates autorotate again 216 next.trigger( 'click' ); 217 }, 218 219 set_slide_arrows_visibility = function() 220 { 221 if( 'endless' == slideshowOptions.loop_autoplay || 'manual-endless' == slideshowOptions.loop_manual || false === currentIndex ) 222 { 223 slide_arrows.addClass( 'av-visible-prev' ); 224 slide_arrows.addClass( 'av-visible-next' ); 225 } 226 else if( 0 == currentIndex ) 227 { 228 slide_arrows.removeClass( 'av-visible-prev' ); 229 slide_arrows.addClass( 'av-visible-next' ); 230 } 231 else if( currentIndex + 1 >= slide_content.length ) 232 { 233 slide_arrows.addClass( 'av-visible-prev' ); 234 slide_arrows.removeClass( 'av-visible-next' ); 235 } 236 else 237 { 238 slide_arrows.addClass( 'av-visible-prev' ); 239 slide_arrows.addClass( 'av-visible-next' ); 240 } 241 }, 242 243 set_slide_dots_visibility = function() 244 { 245 slide_dots_wrap.find( 'a' ).removeClass( 'active' ); 246 247 var tmpIndex = false !== currentIndex ? currentIndex : 0; 248 slide_dots_wrap.find( 'a' ).eq( tmpIndex ).addClass( 'active' ); 249 }; 250 251 //element click 252 slide_content.on( 'click', function(e) 253 { 254 var current = $(this); 255 var index = slide_content.index( current ); 256 257 if( currentIndex === index ) 258 { 259// if( av_enlarge > 1 && ! $( e.target ).is( 'a' ) ) 260// { 261// //slide_container.find("." +options.active).removeClass(options.active); 262// //currentIndex = false; 263// } 264 return; 265 } 266 267 clearTimeoutAutoplay(); 268 change_active( index ); 269 init_autoplay(); 270 }); 271 272 prev.on( 'click', function(e) 273 { 274 // select first image by default 275 var nextID = currentIndex !== false ? currentIndex - 1 : 0; 276 277 if( nextID < 0 ) 278 { 279 if( 'endless' != slideshowOptions.loop_autoplay && 'manual-endless' != slideshowOptions.loop_manual ) 280 { 281 return; 282 } 283 284 nextID = slide_content.length - 1; 285 } 286 287 clearTimeoutAutoplay(); 288 change_active( nextID ); 289 init_autoplay(); 290 }); 291 292 next.on( 'click', function(e) 293 { 294 // select first image by default to avoid zooming 295 var nextID = currentIndex !== false ? currentIndex + 1 : 0; 296 297 if( nextID >= slide_content.length ) 298 { 299 if( 'endless' != slideshowOptions.loop_autoplay && 'manual-endless' != slideshowOptions.loop_manual ) 300 { 301 return; 302 } 303 304 nextID = 0; 305 } 306 307 clearTimeoutAutoplay(); 308 change_active( nextID ); 309 init_autoplay(); 310 }); 311 312 slide_dots.on( 'click', function( e ) 313 { 314 var current = $( this ); 315 var index = slide_dots.index( current ); 316 317 clearTimeoutAutoplay(); 318 change_active( index ); 319 init_autoplay(); 320 }); 321 322 $.avia_utilities.preload({ 323 container: container, 324 global_callback: function() 325 { 326 // activate behavior 327 set_up(); 328 329 if( slideshowOptions.initial ) 330 { 331 var first = parseInt( slideshowOptions.initial, 10 ); 332 333 if( isNaN( first ) || first < 1 ) 334 { 335 first = 1; 336 } 337 else if( first > slide_content.length ) 338 { 339 first = slide_content.length; 340 } 341 342 change_active( first - 1 ); 343 } 344 345 set_slide_arrows_visibility(); 346 set_slide_dots_visibility(); 347 init_autoplay(); 348 349 setTimeout( function() 350 { 351 container.addClass( 'av-horizontal-gallery-animated' ); 352 }, 10 ); 353 354 win.on( 'debouncedresize', set_up ); 355 } 356 }); 357 358 if( ! container.hasClass( 'av-control-hidden' ) ) 359 { 360 //if its a desktop browser add arrow navigation, otherwise add touch nav (also for touch devices) 361 if( ! isMobile ) 362 { 363 container.avia_keyboard_controls( { 37: options.prev, 39: options.next } ); 364 } 365 366 if( isMobile || isTouchDevice ) 367 { 368 container.avia_swipe_trigger( { prev: options.prev, next: options.next } ); 369 } 370 } 371 }); 372 }; 373 374}(jQuery)); 375 376
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.