lightbox.min.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. /**
  2. * Lightbox v2.7.1
  3. * by Lokesh Dhakar - http://lokeshdhakar.com/projects/lightbox2/
  4. *
  5. * @license http://creativecommons.org/licenses/by/2.5/
  6. * - Free for use in both personal and commercial projects
  7. * - Attribution requires leaving author name, author link, and the license info intact
  8. */
  9. (function() {
  10. var a = jQuery,
  11. b = function() {
  12. function a() {
  13. this.fadeDuration = 500,
  14. this.fitImagesInViewport = !0,
  15. this.resizeDuration = 700,
  16. this.positionFromTop = 50,
  17. this.showImageNumberLabel = !0,
  18. this.alwaysShowNavOnTouchDevices = !1,
  19. this.wrapAround = !1
  20. }
  21. return a.prototype.albumLabel = function(a, b) {
  22. return "Image " + a + " of " + b
  23. },
  24. a
  25. } (),
  26. c = function() {
  27. function b(a) {
  28. this.options = a,
  29. this.album = [],
  30. this.currentImageIndex = void 0,
  31. this.init()
  32. }
  33. return b.prototype.init = function() {
  34. this.enable(),
  35. this.build()
  36. },
  37. b.prototype.enable = function() {
  38. var b = this;
  39. a("body").on("click", "a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]",
  40. function(c) {
  41. return b.start(a(c.currentTarget)),
  42. !1
  43. })
  44. },
  45. b.prototype.build = function() {
  46. var b = this;
  47. a("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>").appendTo(a("body")),
  48. this.$lightbox = a("#lightbox"),
  49. this.$overlay = a("#lightboxOverlay"),
  50. this.$outerContainer = this.$lightbox.find(".lb-outerContainer"),
  51. this.$container = this.$lightbox.find(".lb-container"),
  52. this.containerTopPadding = parseInt(this.$container.css("padding-top"), 10),
  53. this.containerRightPadding = parseInt(this.$container.css("padding-right"), 10),
  54. this.containerBottomPadding = parseInt(this.$container.css("padding-bottom"), 10),
  55. this.containerLeftPadding = parseInt(this.$container.css("padding-left"), 10),
  56. this.$overlay.hide().on("click",
  57. function() {
  58. return b.end(),
  59. !1
  60. }),
  61. this.$lightbox.hide().on("click",
  62. function(c) {
  63. return "lightbox" === a(c.target).attr("id") && b.end(),
  64. !1
  65. }),
  66. this.$outerContainer.on("click",
  67. function(c) {
  68. return "lightbox" === a(c.target).attr("id") && b.end(),
  69. !1
  70. }),
  71. this.$lightbox.find(".lb-prev").on("click",
  72. function() {
  73. return b.changeImage(0 === b.currentImageIndex ? b.album.length - 1 : b.currentImageIndex - 1),
  74. !1
  75. }),
  76. this.$lightbox.find(".lb-next").on("click",
  77. function() {
  78. return b.changeImage(b.currentImageIndex === b.album.length - 1 ? 0 : b.currentImageIndex + 1),
  79. !1
  80. }),
  81. this.$lightbox.find(".lb-loader, .lb-close").on("click",
  82. function() {
  83. return b.end(),
  84. !1
  85. })
  86. },
  87. b.prototype.start = function(b) {
  88. function c(a) {
  89. d.album.push({
  90. link: a.attr("href"),
  91. title: a.attr("data-title") || a.attr("title")
  92. })
  93. }
  94. var d = this,
  95. e = a(window);
  96. e.on("resize", a.proxy(this.sizeOverlay, this)),
  97. a("select, object, embed").css({
  98. visibility: "hidden"
  99. }),
  100. this.sizeOverlay(),
  101. this.album = [];
  102. var f, g = 0,
  103. h = b.attr("data-lightbox");
  104. if (h) {
  105. f = a(b.prop("tagName") + '[data-lightbox="' + h + '"]');
  106. for (var i = 0; i < f.length; i = ++i) c(a(f[i])),
  107. f[i] === b[0] && (g = i)
  108. } else if ("lightbox" === b.attr("rel")) c(b);
  109. else {
  110. f = a(b.prop("tagName") + '[rel="' + b.attr("rel") + '"]');
  111. for (var j = 0; j < f.length; j = ++j) c(a(f[j])),
  112. f[j] === b[0] && (g = j)
  113. }
  114. var k = e.scrollTop() + this.options.positionFromTop,
  115. l = e.scrollLeft();
  116. this.$lightbox.css({
  117. top: k + "px",
  118. left: l + "px"
  119. }).fadeIn(this.options.fadeDuration),
  120. this.changeImage(g)
  121. },
  122. b.prototype.changeImage = function(b) {
  123. var c = this;
  124. this.disableKeyboardNav();
  125. var d = this.$lightbox.find(".lb-image");
  126. this.$overlay.fadeIn(this.options.fadeDuration),
  127. a(".lb-loader").fadeIn("slow"),
  128. this.$lightbox.find(".lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption").hide(),
  129. this.$outerContainer.addClass("animating");
  130. var e = new Image;
  131. e.onload = function() {
  132. var f, g, h, i, j, k, l;
  133. d.attr("src", c.album[b].link),
  134. f = a(e),
  135. d.width(e.width),
  136. d.height(e.height),
  137. c.options.fitImagesInViewport && (l = a(window).width(), k = a(window).height(), j = l - c.containerLeftPadding - c.containerRightPadding - 20, i = k - c.containerTopPadding - c.containerBottomPadding - 120, (e.width > j || e.height > i) && (e.width / j > e.height / i ? (h = j, g = parseInt(e.height / (e.width / h), 10), d.width(h), d.height(g)) : (g = i, h = parseInt(e.width / (e.height / g), 10), d.width(h), d.height(g)))),
  138. c.sizeContainer(d.width(), d.height())
  139. },
  140. e.src = this.album[b].link,
  141. this.currentImageIndex = b
  142. },
  143. b.prototype.sizeOverlay = function() {
  144. this.$overlay.width(a(window).width()).height(a(document).height())
  145. },
  146. b.prototype.sizeContainer = function(a, b) {
  147. function c() {
  148. d.$lightbox.find(".lb-dataContainer").width(g),
  149. d.$lightbox.find(".lb-prevLink").height(h),
  150. d.$lightbox.find(".lb-nextLink").height(h),
  151. d.showImage()
  152. }
  153. var d = this,
  154. e = this.$outerContainer.outerWidth(),
  155. f = this.$outerContainer.outerHeight(),
  156. g = a + this.containerLeftPadding + this.containerRightPadding,
  157. h = b + this.containerTopPadding + this.containerBottomPadding;
  158. e !== g || f !== h ? this.$outerContainer.animate({
  159. width: g,
  160. height: h
  161. },
  162. this.options.resizeDuration, "swing",
  163. function() {
  164. c()
  165. }) : c()
  166. },
  167. b.prototype.showImage = function() {
  168. this.$lightbox.find(".lb-loader").hide(),
  169. this.$lightbox.find(".lb-image").fadeIn("slow"),
  170. this.updateNav(),
  171. this.updateDetails(),
  172. this.preloadNeighboringImages(),
  173. this.enableKeyboardNav()
  174. },
  175. b.prototype.updateNav = function() {
  176. var a = !1;
  177. try {
  178. document.createEvent("TouchEvent"),
  179. a = this.options.alwaysShowNavOnTouchDevices ? !0 : !1
  180. } catch(b) {}
  181. this.$lightbox.find(".lb-nav").show(),
  182. this.album.length > 1 && (this.options.wrapAround ? (a && this.$lightbox.find(".lb-prev, .lb-next").css("opacity", "1"), this.$lightbox.find(".lb-prev, .lb-next").show()) : (this.currentImageIndex > 0 && (this.$lightbox.find(".lb-prev").show(), a && this.$lightbox.find(".lb-prev").css("opacity", "1")), this.currentImageIndex < this.album.length - 1 && (this.$lightbox.find(".lb-next").show(), a && this.$lightbox.find(".lb-next").css("opacity", "1"))))
  183. },
  184. b.prototype.updateDetails = function() {
  185. var b = this;
  186. "undefined" != typeof this.album[this.currentImageIndex].title && "" !== this.album[this.currentImageIndex].title && this.$lightbox.find(".lb-caption").html(this.album[this.currentImageIndex].title).fadeIn("fast").find("a").on("click",
  187. function() {
  188. location.href = a(this).attr("href")
  189. }),
  190. this.album.length > 1 && this.options.showImageNumberLabel ? this.$lightbox.find(".lb-number").text(this.options.albumLabel(this.currentImageIndex + 1, this.album.length)).fadeIn("fast") : this.$lightbox.find(".lb-number").hide(),
  191. this.$outerContainer.removeClass("animating"),
  192. this.$lightbox.find(".lb-dataContainer").fadeIn(this.options.resizeDuration,
  193. function() {
  194. return b.sizeOverlay()
  195. })
  196. },
  197. b.prototype.preloadNeighboringImages = function() {
  198. if (this.album.length > this.currentImageIndex + 1) {
  199. var a = new Image;
  200. a.src = this.album[this.currentImageIndex + 1].link
  201. }
  202. if (this.currentImageIndex > 0) {
  203. var b = new Image;
  204. b.src = this.album[this.currentImageIndex - 1].link
  205. }
  206. },
  207. b.prototype.enableKeyboardNav = function() {
  208. a(document).on("keyup.keyboard", a.proxy(this.keyboardAction, this))
  209. },
  210. b.prototype.disableKeyboardNav = function() {
  211. a(document).off(".keyboard")
  212. },
  213. b.prototype.keyboardAction = function(a) {
  214. var b = 27,
  215. c = 37,
  216. d = 39,
  217. e = a.keyCode,
  218. f = String.fromCharCode(e).toLowerCase();
  219. e === b || f.match(/x|o|c/) ? this.end() : "p" === f || e === c ? 0 !== this.currentImageIndex ? this.changeImage(this.currentImageIndex - 1) : this.options.wrapAround && this.album.length > 1 && this.changeImage(this.album.length - 1) : ("n" === f || e === d) && (this.currentImageIndex !== this.album.length - 1 ? this.changeImage(this.currentImageIndex + 1) : this.options.wrapAround && this.album.length > 1 && this.changeImage(0))
  220. },
  221. b.prototype.end = function() {
  222. this.disableKeyboardNav(),
  223. a(window).off("resize", this.sizeOverlay),
  224. this.$lightbox.fadeOut(this.options.fadeDuration),
  225. this.$overlay.fadeOut(this.options.fadeDuration),
  226. a("select, object, embed").css({
  227. visibility: "visible"
  228. })
  229. },
  230. b
  231. } ();
  232. a(function() {
  233. {
  234. var a = new b;
  235. new c(a)
  236. }
  237. })
  238. }).call(this);