1/*! lg-thumbnail - v1.1.0 - 2017-08-08 2* http://sachinchoolur.github.io/lightGallery 3* Copyright (c) 2017 Sachin N; Licensed GPLv3 */ 4 5(function (root, factory) { 6 if (typeof define === 'function' && define.amd) { 7 // AMD. Register as an anonymous module unless amdModuleId is set 8 define(['jquery'], function (a0) { 9 return (factory(a0)); 10 }); 11 } else if (typeof exports === 'object') { 12 // Node. Does not work with strict CommonJS, but 13 // only CommonJS-like environments that support module.exports, 14 // like Node. 15 module.exports = factory(require('jquery')); 16 } else { 17 factory(jQuery); 18 } 19}(this, function ($) { 20 21(function() { 22 23 'use strict'; 24 25 var defaults = { 26 thumbnail: true, 27 28 animateThumb: true, 29 currentPagerPosition: 'middle', 30 31 thumbWidth: 100, 32 thumbHeight: '80px', 33 thumbContHeight: 100, 34 thumbMargin: 5, 35 36 exThumbImage: false, 37 showThumbByDefault: true, 38 toogleThumb: true, 39 pullCaptionUp: true, 40 41 enableThumbDrag: true, 42 enableThumbSwipe: true, 43 swipeThreshold: 50, 44 45 loadYoutubeThumbnail: true, 46 youtubeThumbSize: 1, 47 48 loadVimeoThumbnail: true, 49 vimeoThumbSize: 'thumbnail_small', 50 51 loadDailymotionThumbnail: true 52 }; 53 54 var Thumbnail = function(element) { 55 56 // get lightGallery core plugin data 57 this.core = $(element).data('lightGallery'); 58 59 // extend module default settings with lightGallery core settings 60 this.core.s = $.extend({}, defaults, this.core.s); 61 62 this.$el = $(element); 63 this.$thumbOuter = null; 64 this.thumbOuterWidth = 0; 65 this.thumbTotalWidth = (this.core.$items.length * (this.core.s.thumbWidth + this.core.s.thumbMargin)); 66 this.thumbIndex = this.core.index; 67 68 if (this.core.s.animateThumb) { 69 this.core.s.thumbHeight = '100%'; 70 } 71 72 // Thumbnail animation value 73 this.left = 0; 74 75 this.init(); 76 77 return this; 78 }; 79 80 Thumbnail.prototype.init = function() { 81 var _this = this; 82 if (this.core.s.thumbnail && this.core.$items.length > 1) { 83 if (this.core.s.showThumbByDefault) { 84 setTimeout(function(){ 85 _this.core.$outer.addClass('lg-thumb-open'); 86 }, 700); 87 } 88 89 if (this.core.s.pullCaptionUp) { 90 this.core.$outer.addClass('lg-pull-caption-up'); 91 } 92 93 this.build(); 94 if (this.core.s.animateThumb && this.core.doCss()) { 95 if (this.core.s.enableThumbDrag) { 96 this.enableThumbDrag(); 97 } 98 99 if (this.core.s.enableThumbSwipe) { 100 this.enableThumbSwipe(); 101 } 102 103 this.thumbClickable = false; 104 } else { 105 this.thumbClickable = true; 106 } 107 108 this.toogle(); 109 this.thumbkeyPress(); 110 } 111 }; 112 113 Thumbnail.prototype.build = function() { 114 var _this = this; 115 var thumbList = ''; 116 var vimeoErrorThumbSize = ''; 117 var $thumb; 118 var html = '<div class="lg-thumb-outer">' + 119 '<div class="lg-thumb lg-group">' + 120 '</div>' + 121 '</div>'; 122 123 switch (this.core.s.vimeoThumbSize) { 124 case 'thumbnail_large': 125 vimeoErrorThumbSize = '640'; 126 break; 127 case 'thumbnail_medium': 128 vimeoErrorThumbSize = '200x150'; 129 break; 130 case 'thumbnail_small': 131 vimeoErrorThumbSize = '100x75'; 132 } 133 134 _this.core.$outer.addClass('lg-has-thumb'); 135 136 _this.core.$outer.find('.lg-inner').after(html); 137 138 _this.$thumbOuter = _this.core.$outer.find('.lg-thumb-outer'); 139 _this.thumbOuterWidth = _this.$thumbOuter.width(); 140 141 if (_this.core.s.animateThumb) { 142 _this.core.$outer.find('.lg-thumb').css({ 143 width: _this.thumbTotalWidth + 'px', 144 position: 'relative' 145 }); 146 } 147 148 if (this.core.s.animateThumb) { 149 _this.$thumbOuter.css('height', _this.core.s.thumbContHeight + 'px'); 150 } 151 152 function getThumb(src, thumb, index) { 153 var isVideo = _this.core.isVideo(src, index) || {}; 154 var thumbImg; 155 var vimeoId = ''; 156 157 if (isVideo.youtube || isVideo.vimeo || isVideo.dailymotion) { 158 if (isVideo.youtube) {
159 if (_this.core.s.loadYoutubeThumbnail) { 160 thumbImg = '//img.youtube.com/vi/' + isVideo.youtube[1] + '/' + _this.core.s.youtubeThumbSize + '.jpg'; 161 } else { 162 thumbImg = thumb; 163 } 164 } else if (isVideo.vimeo) { 165 if (_this.core.s.loadVimeoThumbnail) { 166 thumbImg = '//i.vimeocdn.com/video/error_' + vimeoErrorThumbSize + '.jpg'; 167 vimeoId = isVideo.vimeo[1]; 168 } else { 169 thumbImg = thumb; 170 } 171 } else if (isVideo.dailymotion) { 172 if (_this.core.s.loadDailymotionThumbnail) { 173 thumbImg = '//www.dailymotion.com/thumbnail/video/' + isVideo.dailymotion[1]; 174 } else { 175 thumbImg = thumb; 176 } 177 } 178 } else { 179 thumbImg = thumb; 180 } 181 182 thumbList += '<div data-vimeo-id="' + vimeoId + '" class="lg-thumb-item" style="width:' + _this.core.s.thumbWidth + 'px; height: ' + _this.core.s.thumbHeight + '; margin-right: ' + _this.core.s.thumbMargin + 'px"><img src="' + thumbImg + '" /></div>'; 183 vimeoId = ''; 184 } 185 186 if (_this.core.s.dynamic) { 187 for (var i = 0; i < _this.core.s.dynamicEl.length; i++) { 188 getThumb(_this.core.s.dynamicEl[i].src, _this.core.s.dynamicEl[i].thumb, i); 189 } 190 } else { 191 _this.core.$items.each(function(i) { 192 193 if (!_this.core.s.exThumbImage) { 194 getThumb($(this).attr('href') || $(this).attr('data-src'), $(this).find('img').attr('src'), i); 195 } else { 196 getThumb($(this).attr('href') || $(this).attr('data-src'), $(this).attr(_this.core.s.exThumbImage), i); 197 } 198 199 }); 200 } 201 202 _this.core.$outer.find('.lg-thumb').html(thumbList); 203 204 $thumb = _this.core.$outer.find('.lg-thumb-item'); 205 206 // Load vimeo thumbnails 207 $thumb.each(function() { 208 var $this = $(this); 209 var vimeoVideoId = $this.attr('data-vimeo-id'); 210 211 if (vimeoVideoId) { 212 $.getJSON('//www.vimeo.com/api/v2/video/' + vimeoVideoId + '.json?callback=?', { 213 format: 'json' 214 }, function(data) { 215 $this.find('img').attr('src', data[0][_this.core.s.vimeoThumbSize]); 216 }); 217 } 218 }); 219 220 // manage active class for thumbnail 221 $thumb.eq(_this.core.index).addClass('active'); 222 _this.core.$el.on('onBeforeSlide.lg.tm', function() { 223 $thumb.removeClass('active'); 224 $thumb.eq(_this.core.index).addClass('active'); 225 }); 226 227 $thumb.on('click.lg touchend.lg', function() { 228 var _$this = $(this); 229 setTimeout(function() { 230 231 // In IE9 and bellow touch does not support 232 // Go to slide if browser does not support css transitions 233 if ((_this.thumbClickable && !_this.core.lgBusy) || !_this.core.doCss()) { 234 _this.core.index = _$this.index(); 235 _this.core.slide(_this.core.index, false, true, false); 236 } 237 }, 50); 238 }); 239 240 _this.core.$el.on('onBeforeSlide.lg.tm', function() { 241 _this.animateThumb(_this.core.index); 242 }); 243 244 $(window).on('resize.lg.thumb orientationchange.lg.thumb', function() { 245 setTimeout(function() { 246 _this.animateThumb(_this.core.index); 247 _this.thumbOuterWidth = _this.$thumbOuter.width(); 248 }, 200); 249 }); 250 251 }; 252 253 Thumbnail.prototype.setTranslate = function(value) { 254 // jQuery supports Automatic CSS prefixing since jQuery 1.8.0 255 this.core.$outer.find('.lg-thumb').css({ 256 transform: 'translate3d(-' + (value) + 'px, 0px, 0px)' 257 }); 258 }; 259 260 Thumbnail.prototype.animateThumb = function(index) { 261 var $thumb = this.core.$outer.find('.lg-thumb'); 262 if (this.core.s.animateThumb) { 263 var position; 264 switch (this.core.s.currentPagerPosition) { 265 case 'left': 266 position = 0; 267 break; 268 case 'middle': 269 position = (this.thumbOuterWidth / 2) - (this.core.s.thumbWidth / 2); 270 break; 271 case 'right': 272 position = this.thumbOuterWidth - this.core.s.thumbWidth; 273 } 274 this.left = ((this.core.s.thumbWidth + this.core.s.thumbMargin) * index - 1) - position; 275 if (this.left > (this.thumbTotalWidth - this.thumbOuterWidth)) { 276 this.left = this.thumbTotalWidth - this.thumbOuterWidth; 277 } 278 279 if (this.left < 0) { 280 this.left = 0; 281 } 282 283 if (this.core.lGalleryOn) { 284 if (!$thumb.hasClass('on')) { 285 this.core.$outer.find('.lg-thumb').css('transition-duration', this.core.s.speed + 'ms'); 286 } 287 288 if (!this.core.doCss()) { 289 $thumb.animate({ 290 left: -this.left + 'px' 291 }, this.core.s.speed); 292 } 293 } else { 294 if (!this.core.doCss()) { 295 $thumb.css('left', -this.left + 'px'); 296 } 297 } 298 299 this.setTranslate(this.left); 300 301 } 302 }; 303 304 // Enable thumbnail dragging and swiping 305 Thumbnail.prototype.enableThumbDrag = function() { 306 307 var _this = this; 308 var startCoords = 0; 309 var endCoords = 0; 310 var isDraging = false;
311 var isMoved = false; 312 var tempLeft = 0; 313 314 _this.$thumbOuter.addClass('lg-grab'); 315 316 _this.core.$outer.find('.lg-thumb').on('mousedown.lg.thumb', function(e) { 317 if (_this.thumbTotalWidth > _this.thumbOuterWidth) { 318 // execute only on .lg-object 319 e.preventDefault(); 320 startCoords = e.pageX; 321 isDraging = true; 322 323 // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723 324 _this.core.$outer.scrollLeft += 1; 325 _this.core.$outer.scrollLeft -= 1; 326 327 // * 328 _this.thumbClickable = false; 329 _this.$thumbOuter.removeClass('lg-grab').addClass('lg-grabbing'); 330 } 331 }); 332 333 $(window).on('mousemove.lg.thumb', function(e) { 334 if (isDraging) { 335 tempLeft = _this.left; 336 isMoved = true; 337 endCoords = e.pageX; 338 339 _this.$thumbOuter.addClass('lg-dragging'); 340 341 tempLeft = tempLeft - (endCoords - startCoords); 342 343 if (tempLeft > (_this.thumbTotalWidth - _this.thumbOuterWidth)) { 344 tempLeft = _this.thumbTotalWidth - _this.thumbOuterWidth; 345 } 346 347 if (tempLeft < 0) { 348 tempLeft = 0; 349 } 350 351 // move current slide 352 _this.setTranslate(tempLeft); 353 354 } 355 }); 356 357 $(window).on('mouseup.lg.thumb', function() { 358 if (isMoved) { 359 isMoved = false; 360 _this.$thumbOuter.removeClass('lg-dragging'); 361 362 _this.left = tempLeft; 363 364 if (Math.abs(endCoords - startCoords) < _this.core.s.swipeThreshold) { 365 _this.thumbClickable = true; 366 } 367 368 } else { 369 _this.thumbClickable = true; 370 } 371 372 if (isDraging) { 373 isDraging = false; 374 _this.$thumbOuter.removeClass('lg-grabbing').addClass('lg-grab'); 375 } 376 }); 377 378 }; 379 380 Thumbnail.prototype.enableThumbSwipe = function() { 381 var _this = this; 382 var startCoords = 0; 383 var endCoords = 0; 384 var isMoved = false; 385 var tempLeft = 0; 386 387 _this.core.$outer.find('.lg-thumb').on('touchstart.lg', function(e) { 388 if (_this.thumbTotalWidth > _this.thumbOuterWidth) { 389 e.preventDefault(); 390 startCoords = e.originalEvent.targetTouches[0].pageX; 391 _this.thumbClickable = false; 392 } 393 }); 394 395 _this.core.$outer.find('.lg-thumb').on('touchmove.lg', function(e) { 396 if (_this.thumbTotalWidth > _this.thumbOuterWidth) { 397 e.preventDefault(); 398 endCoords = e.originalEvent.targetTouches[0].pageX; 399 isMoved = true; 400 401 _this.$thumbOuter.addClass('lg-dragging'); 402 403 tempLeft = _this.left; 404 405 tempLeft = tempLeft - (endCoords - startCoords); 406 407 if (tempLeft > (_this.thumbTotalWidth - _this.thumbOuterWidth)) { 408 tempLeft = _this.thumbTotalWidth - _this.thumbOuterWidth; 409 } 410 411 if (tempLeft < 0) { 412 tempLeft = 0; 413 } 414 415 // move current slide 416 _this.setTranslate(tempLeft); 417 418 } 419 }); 420 421 _this.core.$outer.find('.lg-thumb').on('touchend.lg', function() { 422 if (_this.thumbTotalWidth > _this.thumbOuterWidth) { 423 424 if (isMoved) { 425 isMoved = false; 426 _this.$thumbOuter.removeClass('lg-dragging'); 427 if (Math.abs(endCoords - startCoords) < _this.core.s.swipeThreshold) { 428 _this.thumbClickable = true; 429 } 430 431 _this.left = tempLeft; 432 } else { 433 _this.thumbClickable = true; 434 } 435 } else { 436 _this.thumbClickable = true; 437 } 438 }); 439 440 }; 441 442 Thumbnail.prototype.toogle = function() { 443 var _this = this; 444 if (_this.core.s.toogleThumb) { 445 _this.core.$outer.addClass('lg-can-toggle'); 446 _this.$thumbOuter.append('<span class="lg-toogle-thumb lg-icon"></span>'); 447 _this.core.$outer.find('.lg-toogle-thumb').on('click.lg', function() { 448 _this.core.$outer.toggleClass('lg-thumb-open'); 449 }); 450 } 451 }; 452 453 Thumbnail.prototype.thumbkeyPress = function() { 454 var _this = this; 455 $(window).on('keydown.lg.thumb', function(e) { 456 if (e.keyCode === 38) { 457 e.preventDefault(); 458 _this.core.$outer.addClass('lg-thumb-open'); 459 } else if (e.keyCode === 40) { 460 e.preventDefault(); 461 _this.core.$outer.removeClass('lg-thumb-open'); 462 } 463 }); 464 }; 465 466 Thumbnail.prototype.destroy = function() { 467 if (this.core.s.thumbnail && this.core.$items.length > 1) { 468 $(window).off('resize.lg.thumb orientationchange.lg.thumb keydown.lg.thumb'); 469 this.$thumbOuter.remove(); 470 this.core.$outer.removeClass('lg-has-thumb'); 471 } 472 }; 473 474 $.fn.lightGallery.modules.Thumbnail = Thumbnail; 475 476})(); 477 478}));
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.