baguettebox.min.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. /*!
  2. * baguetteBox.js
  3. * @author feimosi
  4. * @version 1.1.1
  5. * @url https://github.com/feimosi/baguetteBox.js
  6. */
  7. var baguetteBox = function() {
  8. function t(t, n) {
  9. L.transforms = f(),
  10. L.svg = p(),
  11. e(),
  12. D = document.querySelectorAll(t),
  13. [].forEach.call(D,
  14. function(t) {
  15. var e = t.getElementsByTagName("a");
  16. e = [].filter.call(e,
  17. function(t) {
  18. return j.test(t.getAttribute("data-img"))
  19. });
  20. var o = S.length;
  21. S.push(e),
  22. S[o].options = n,
  23. [].forEach.call(S[o],
  24. function(t, e) {
  25. h(t, "click",
  26. function(t) {
  27. t.preventDefault ? t.preventDefault() : t.returnValue = !1,
  28. i(o),
  29. a(e)
  30. $(".garltex").show();
  31. })
  32. })
  33. })
  34. }
  35. function e() {
  36. return (b = v("baguetteBox-overlay")) ? (k = v("baguetteBox-slider"), w = v("previous-button"), C = v("next-button"), void(T = v("close-button"))) : (b = y("div"), b.id = "baguetteBox-overlay", document.getElementsByTagName("body")[0].appendChild(b), k = y("div"), k.id = "baguetteBox-slider", b.appendChild(k), w = y("button"), w.id = "previous-button", w.innerHTML = L.svg ? E: "<", b.appendChild(w), C = y("button"), C.id = "next-button", C.innerHTML = L.svg ? x: ">", b.appendChild(C), T = y("button"), T.id = "close-button", T.innerHTML = L.svg ? B: "X", b.appendChild(T), w.className = C.className = T.className = "baguetteBox-button", void n())
  37. }
  38. function n() {
  39. h(b, "click",
  40. function(t) {
  41. t.target && "IMG" !== t.target.nodeName && "FIGCAPTION" !== t.target.nodeName && s()
  42. }),
  43. h(w, "click",
  44. function(t) {
  45. t.stopPropagation ? t.stopPropagation() : t.cancelBubble = !0,
  46. c()
  47. }),
  48. h(C, "click",
  49. function(t) {
  50. t.stopPropagation ? t.stopPropagation() : t.cancelBubble = !0,
  51. u()
  52. }),
  53. h(T, "click",
  54. function(t) {
  55. t.stopPropagation ? t.stopPropagation() : t.cancelBubble = !0,
  56. s()
  57. }),
  58. h(b, "touchstart",
  59. function(t) {
  60. N = t.changedTouches[0].pageX
  61. }),
  62. h(b, "touchmove",
  63. function(t) {
  64. H || (t.preventDefault ? t.preventDefault() : t.returnValue = !1, touch = t.touches[0] || t.changedTouches[0], touch.pageX - N > 40 ? (H = !0, c()) : touch.pageX - N < -40 && (H = !0, u()))
  65. }),
  66. h(b, "touchend",
  67. function() {
  68. H = !1
  69. }),
  70. h(document, "keydown",
  71. function(t) {
  72. switch (t.keyCode) {
  73. case 37:
  74. c();
  75. break;
  76. case 39:
  77. u();
  78. break;
  79. case 27:
  80. s()
  81. }
  82. })
  83. }
  84. function i(t) {
  85. if (A !== t) {
  86. for (A = t, o(S[t].options); k.firstChild;) k.removeChild(k.firstChild);
  87. X.length = 0;
  88. for (var e, n = 0; n < S[t].length; n++) e = y("div"),
  89. e.className = "full-image",
  90. e.id = "baguette-img-" + n,
  91. X.push(e),
  92. k.appendChild(X[n])
  93. }
  94. }
  95. function o(t) {
  96. t || (t = {});
  97. for (var e in P) I[e] = P[e],
  98. "undefined" != typeof t[e] && (I[e] = t[e]);
  99. k.style.transition = k.style.webkitTransition = "fadeIn" === I.animation ? "opacity .4s ease": "slideIn" === I.animation ? "": "none",
  100. "auto" === I.buttons && ("ontouchstart" in window || 1 === S[A].length) && (I.buttons = !1),
  101. w.style.display = C.style.display = I.buttons ? "": "none"
  102. }
  103. function a(t) {
  104. "block" !== b.style.display && (M = t, r(M,
  105. function() {
  106. g(M),
  107. m(M)
  108. }), d(), b.style.display = "block", setTimeout(function() {
  109. b.className = "visible"
  110. },
  111. 50))
  112. }
  113. function s() {
  114. $(".garltex").hide();
  115. "none" !== b.style.display && (b.className = "", setTimeout(function() {
  116. b.style.display = "none"
  117. },
  118. 500))
  119. }
  120. function r(t, e) {
  121. var n = X[t];
  122. if ("undefined" != typeof n) {
  123. if (n.getElementsByTagName("img")[0]) return void(e && e());
  124. imageElement = S[A][t],
  125. imageCaption = imageElement.getAttribute("data-caption") || imageElement.title,
  126. imageSrc = l(imageElement);
  127. var i = y("figure"),
  128. o = y("img"),
  129. a = y("figcaption");
  130. n.appendChild(i),
  131. i.innerHTML = '<div class="spinner"><div class="double-bounce1"></div><div class="double-bounce2"></div></div>',
  132. o.onload = function() {
  133. var n = document.querySelector("#baguette-img-" + t + " .spinner");
  134. i.removeChild(n),
  135. !I.async && e && e()
  136. },
  137. o.setAttribute("src", imageSrc),
  138. i.appendChild(o),
  139. I.captions && imageCaption && (a.innerHTML = imageCaption, i.appendChild(a)),
  140. I.async && e && e()
  141. }
  142. }
  143. function l(t) {
  144. var e = imageElement.getAttribute("data-img");
  145. if (t.dataset) {
  146. var n = [];
  147. for (var i in t.dataset)"at-" !== i.substring(0, 3) || isNaN(i.substring(3)) || (n[i.replace("at-", "")] = t.dataset[i]);
  148. keys = Object.keys(n).sort(function(t, e) {
  149. return parseInt(t) < parseInt(e) ? -1 : 1
  150. });
  151. for (var o = window.innerWidth * window.devicePixelRatio,
  152. a = 0; a < keys.length - 1 && keys[a] < o;) a++;
  153. e = n[keys[a]] || e
  154. }
  155. return e
  156. }
  157. function u() {
  158. M <= X.length - 2 ? (M++, d(), g(M)) : I.animation && (k.className = "bounce-from-right", setTimeout(function() {
  159. k.className = ""
  160. },
  161. 400))
  162. }
  163. function c() {
  164. M >= 1 ? (M--, d(), m(M)) : I.animation && (k.className = "bounce-from-left", setTimeout(function() {
  165. k.className = ""
  166. },
  167. 400))
  168. }
  169. function d() {
  170. var t = 100 * -M + "%";
  171. "fadeIn" === I.animation ? (k.style.opacity = 0, setTimeout(function() {
  172. L.transforms ? k.style.transform = k.style.webkitTransform = "translate3d(" + t + ",0,0)": k.style.left = t,
  173. k.style.opacity = 1
  174. },
  175. 400)) : L.transforms ? k.style.transform = k.style.webkitTransform = "translate3d(" + t + ",0,0)": k.style.left = t
  176. }
  177. function f() {
  178. var t = y("div");
  179. return "undefined" != typeof t.style.perspective || "undefined" != typeof t.style.webkitPerspective
  180. }
  181. function p() {
  182. var t = y("div");
  183. return t.innerHTML = "<svg/>",
  184. "http://www.w3.org/2000/svg" == (t.firstChild && t.firstChild.namespaceURI)
  185. }
  186. function g(t) {
  187. t - M >= I.preload || r(t + 1,
  188. function() {
  189. g(t + 1)
  190. })
  191. }
  192. function m(t) {
  193. M - t >= I.preload || r(t - 1,
  194. function() {
  195. m(t - 1)
  196. })
  197. }
  198. function h(t, e, n) {
  199. t.addEventListener ? t.addEventListener(e, n, !1) : t.attachEvent("on" + e, n)
  200. }
  201. function v(t) {
  202. return document.getElementById(t)
  203. }
  204. function y(t) {
  205. return document.createElement(t)
  206. }
  207. var b, k, w, C, T, N, E = '<svg width="44" height="60"><polyline points="30 10 10 30 30 50" stroke="rgba(255,255,255,0.5)" stroke-width="4"stroke-linecap="butt" fill="none" stroke-linejoin="round"/></svg>',
  208. x = '<svg width="44" height="60"><polyline points="14 10 34 30 14 50" stroke="rgba(255,255,255,0.5)" stroke-width="4"stroke-linecap="butt" fill="none" stroke-linejoin="round"/></svg>',
  209. B = '<svg width="30" height="30"><g stroke="rgb(160, 160, 160)" stroke-width="4"><line x1="5" y1="5" x2="25" y2="25"/><line x1="5" y1="25" x2="25" y2="5"/></g></svg>',
  210. I = {},
  211. P = {
  212. captions: !0,
  213. buttons: "auto",
  214. async: !1,
  215. preload: 2,
  216. animation: "slideIn"
  217. },
  218. L = {},
  219. M = 0,
  220. A = -1,
  221. H = !1,
  222. j = /.+\.(gif|jpe?g|png|webp)/i,
  223. D = [],
  224. S = [],
  225. X = [];
  226. return [].forEach || (Array.prototype.forEach = function(t, e) {
  227. for (var n = 0; n < this.length; n++) t.call(e, this[n], n, this)
  228. }),
  229. [].filter || (Array.prototype.filter = function(t, e, n, i, o) {
  230. for (n = this, i = [], o = 0; o < n.length; o++) t.call(e, n[o], o, n) && i.push(n[o]);
  231. return i
  232. }),
  233. {
  234. run: t
  235. }
  236. } ();