Robo Extract Template

venobox.js 37KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811
  1. /*
  2. * VenoBox - jQuery Plugin
  3. * version: 1.9.1
  4. * @requires jQuery >= 1.7.0
  5. *
  6. * Examples at http://veno.es/venobox/
  7. * License: MIT License
  8. * License URI: https://github.com/nicolafranchini/VenoBox/blob/master/LICENSE
  9. * Copyright 2013-2020 Nicola Franchini - @nicolafranchini
  10. *
  11. */
  12. /* global jQuery */
  13. (function($){
  14. "use strict";
  15. var autoplay, bgcolor, blockleft, blocknum, blockshare, blocktitle, border, core, container, content, dest, extraCss,
  16. framewidth, frameheight, gallItems, infinigall, items, keyNavigationDisabled, margine, numeratio,
  17. overlayColor, overlay, title, thisgall, thenext, theprev, nextok, prevok, preloader, $preloader, navigation,
  18. obj, gallIndex, startouch, vbheader, images, startY, startX, endY, endX, diff, diffX, diffY, threshold,
  19. share, sharelinks, vbfooter, sharepos;
  20. var pinIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg>';
  21. var fbIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/></svg>';
  22. var twitterIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z"/></svg>';
  23. var linkedinIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg>';
  24. var downloadIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm2 9h-4v-1h4v1zm0-3v1h-4v-1h4zm-2 13l-6-6h4v-3h4v3h4l-6 6z"/></svg>';
  25. $.fn.extend({
  26. //plugin name - venobox
  27. venobox: function(options) {
  28. var plugin = this;
  29. // default options
  30. var defaults = {
  31. arrowsColor : '#B6B6B6',
  32. autoplay : false, // same as data-autoplay - thanks @codibit
  33. bgcolor: '#fff',
  34. border: '0',
  35. closeBackground : 'transparent',
  36. closeColor : "#d2d2d2",
  37. framewidth: '',
  38. frameheight: '',
  39. gallItems: false,
  40. infinigall: false,
  41. htmlClose : '&times;',
  42. htmlNext : '<span>Next</span>',
  43. htmlPrev : '<span>Prev</span>',
  44. numeratio: false,
  45. numerationBackground : '#161617',
  46. numerationColor : '#d2d2d2',
  47. numerationPosition : 'top', // 'top' || 'bottom'
  48. overlayClose: true, // disable overlay click-close - thanx @martybalandis
  49. overlayColor : 'rgba(23,23,23,0.85)',
  50. spinner : 'double-bounce', // available: 'rotating-plane' | 'double-bounce' | 'wave' | 'wandering-cubes' | 'spinner-pulse' | 'chasing-dots' | 'three-bounce' | 'circle' | 'cube-grid' | 'fading-circle' | 'folding-cube'
  51. spinColor : '#d2d2d2',
  52. titleattr: 'title', // specific attribute to get a title (e.g. [data-title]) - thanx @mendezcode
  53. titleBackground: '#161617',
  54. titleColor: '#d2d2d2',
  55. titlePosition : 'top', // 'top' || 'bottom'
  56. share: [], // ['facebook', 'twitter', 'linkedin', 'pinterest', 'download']
  57. cb_pre_open: function(){ return true; }, // Callbacks - thanx @garyee
  58. cb_post_open: function(){},
  59. cb_pre_close: function(){ return true; },
  60. cb_post_close: function(){},
  61. cb_post_resize: function(){},
  62. cb_after_nav: function(){},
  63. cb_content_loaded: function(){},
  64. cb_init: function(){}
  65. };
  66. var option = $.extend(defaults, options);
  67. // callback plugin initialization
  68. option.cb_init(plugin);
  69. return this.each(function() {
  70. obj = $(this);
  71. // Prevent double initialization - thanx @matthistuff
  72. if (obj.data('venobox')) {
  73. return true;
  74. }
  75. // method to be used outside the plugin
  76. plugin.VBclose = function() {
  77. closeVbox();
  78. };
  79. obj.addClass('vbox-item');
  80. obj.data('framewidth', option.framewidth);
  81. obj.data('frameheight', option.frameheight);
  82. obj.data('border', option.border);
  83. obj.data('bgcolor', option.bgcolor);
  84. obj.data('numeratio', option.numeratio);
  85. obj.data('gallItems', option.gallItems);
  86. obj.data('infinigall', option.infinigall);
  87. obj.data('overlaycolor', option.overlayColor);
  88. obj.data('titleattr', option.titleattr);
  89. obj.data('share', option.share);
  90. obj.data('venobox', true);
  91. obj.on('click', function(e){
  92. e.preventDefault();
  93. obj = $(this);
  94. // callback plugin initialization
  95. var cb_pre_open = option.cb_pre_open(obj);
  96. if (cb_pre_open === false) {
  97. return false;
  98. }
  99. // methods to be used outside the plugin
  100. plugin.VBnext = function() {
  101. navigateGall(thenext);
  102. };
  103. plugin.VBprev = function() {
  104. navigateGall(theprev);
  105. };
  106. overlayColor = obj.data('overlay') || obj.data('overlaycolor');
  107. framewidth = obj.data('framewidth');
  108. frameheight = obj.data('frameheight');
  109. // set data-autoplay="true" for vimeo and youtube videos - thanx @zehfernandes
  110. autoplay = obj.data('autoplay') || option.autoplay;
  111. border = obj.data('border');
  112. bgcolor = obj.data('bgcolor');
  113. nextok = false;
  114. prevok = false;
  115. keyNavigationDisabled = false;
  116. // set a different url to be loaded using data-href="" - thanx @pixeline
  117. dest = obj.data('href') || obj.attr('href');
  118. extraCss = obj.data( 'css' ) || '';
  119. title = obj.attr(obj.data('titleattr')) || '';
  120. share = obj.data('share');
  121. preloader = '<div class="vbox-preloader">';
  122. switch (option.spinner) {
  123. case 'rotating-plane':
  124. preloader += '<div class="sk-rotating-plane"></div>';
  125. break;
  126. case 'double-bounce':
  127. preloader += '<div class="sk-double-bounce">'+
  128. '<div class="sk-child sk-double-bounce1"></div>'+
  129. '<div class="sk-child sk-double-bounce2"></div>'+
  130. '</div>';
  131. break;
  132. case 'wave':
  133. preloader += '<div class="sk-wave">'+
  134. '<div class="sk-rect sk-rect1"></div>'+
  135. '<div class="sk-rect sk-rect2"></div>'+
  136. '<div class="sk-rect sk-rect3"></div>'+
  137. '<div class="sk-rect sk-rect4"></div>'+
  138. '<div class="sk-rect sk-rect5"></div>'+
  139. '</div>';
  140. break;
  141. case 'wandering-cubes':
  142. preloader += '<div class="sk-wandering-cubes">'+
  143. '<div class="sk-cube sk-cube1"></div>'+
  144. '<div class="sk-cube sk-cube2"></div>'+
  145. '</div>';
  146. break;
  147. case 'spinner-pulse':
  148. preloader += '<div class="sk-spinner sk-spinner-pulse"></div>';
  149. break;
  150. case 'chasing-dots':
  151. preloader += '<div class="sk-chasing-dots">'+
  152. '<div class="sk-child sk-dot1"></div>'+
  153. '<div class="sk-child sk-dot2"></div>'+
  154. '</div>';
  155. break;
  156. case 'three-bounce':
  157. preloader += '<div class="sk-three-bounce">'+
  158. '<div class="sk-child sk-bounce1"></div>'+
  159. '<div class="sk-child sk-bounce2"></div>'+
  160. '<div class="sk-child sk-bounce3"></div>'+
  161. '</div>';
  162. break;
  163. case 'circle':
  164. preloader += '<div class="sk-circle">'+
  165. '<div class="sk-circle1 sk-child"></div>'+
  166. '<div class="sk-circle2 sk-child"></div>'+
  167. '<div class="sk-circle3 sk-child"></div>'+
  168. '<div class="sk-circle4 sk-child"></div>'+
  169. '<div class="sk-circle5 sk-child"></div>'+
  170. '<div class="sk-circle6 sk-child"></div>'+
  171. '<div class="sk-circle7 sk-child"></div>'+
  172. '<div class="sk-circle8 sk-child"></div>'+
  173. '<div class="sk-circle9 sk-child"></div>'+
  174. '<div class="sk-circle10 sk-child"></div>'+
  175. '<div class="sk-circle11 sk-child"></div>'+
  176. '<div class="sk-circle12 sk-child"></div>'+
  177. '</div>';
  178. break;
  179. case 'cube-grid':
  180. preloader += '<div class="sk-cube-grid">'+
  181. '<div class="sk-cube sk-cube1"></div>'+
  182. '<div class="sk-cube sk-cube2"></div>'+
  183. '<div class="sk-cube sk-cube3"></div>'+
  184. '<div class="sk-cube sk-cube4"></div>'+
  185. '<div class="sk-cube sk-cube5"></div>'+
  186. '<div class="sk-cube sk-cube6"></div>'+
  187. '<div class="sk-cube sk-cube7"></div>'+
  188. '<div class="sk-cube sk-cube8"></div>'+
  189. '<div class="sk-cube sk-cube9"></div>'+
  190. '</div>';
  191. break;
  192. case 'fading-circle':
  193. preloader += '<div class="sk-fading-circle">'+
  194. '<div class="sk-circle1 sk-circle"></div>'+
  195. '<div class="sk-circle2 sk-circle"></div>'+
  196. '<div class="sk-circle3 sk-circle"></div>'+
  197. '<div class="sk-circle4 sk-circle"></div>'+
  198. '<div class="sk-circle5 sk-circle"></div>'+
  199. '<div class="sk-circle6 sk-circle"></div>'+
  200. '<div class="sk-circle7 sk-circle"></div>'+
  201. '<div class="sk-circle8 sk-circle"></div>'+
  202. '<div class="sk-circle9 sk-circle"></div>'+
  203. '<div class="sk-circle10 sk-circle"></div>'+
  204. '<div class="sk-circle11 sk-circle"></div>'+
  205. '<div class="sk-circle12 sk-circle"></div>'+
  206. '</div>';
  207. break;
  208. case 'folding-cube':
  209. preloader += '<div class="sk-folding-cube">'+
  210. '<div class="sk-cube1 sk-cube"></div>'+
  211. '<div class="sk-cube2 sk-cube"></div>'+
  212. '<div class="sk-cube4 sk-cube"></div>'+
  213. '<div class="sk-cube3 sk-cube"></div>'+
  214. '</div>';
  215. break;
  216. }
  217. preloader += '</div>';
  218. navigation = '<a class="vbox-next">' + option.htmlNext + '</a><a class="vbox-prev">' + option.htmlPrev + '</a>';
  219. vbheader = '<div class="vbox-title"></div><div class="vbox-left"><div class="vbox-num">0/0</div></div><div class="vbox-close">' + option.htmlClose + '</div>';
  220. vbfooter = '<div class="vbox-share"></div>';
  221. core = '<div class="vbox-overlay ' + extraCss + '" style="background:'+ overlayColor +'">'+
  222. preloader + '<div class="vbox-container"><div class="vbox-content"></div></div>' + vbheader + navigation + vbfooter + '</div>';
  223. $('body').append(core).addClass('vbox-open');
  224. $('.vbox-preloader div:not(.sk-circle) .sk-child, .vbox-preloader .sk-rotating-plane, .vbox-preloader .sk-rect, .vbox-preloader div:not(.sk-folding-cube) .sk-cube, .vbox-preloader .sk-spinner-pulse').css('background-color', option.spinColor);
  225. overlay = $('.vbox-overlay');
  226. container = $('.vbox-container');
  227. content = $('.vbox-content');
  228. blockleft = $('.vbox-left');
  229. blocknum = $('.vbox-num');
  230. blockshare = $('.vbox-share');
  231. blocktitle = $('.vbox-title');
  232. $preloader = $('.vbox-preloader');
  233. $preloader.show();
  234. if (option.titlePosition == 'top') {
  235. sharepos = 'bottom';
  236. } else {
  237. sharepos = 'top';
  238. }
  239. blockshare.css(sharepos, '-1px');
  240. blockshare.css({
  241. 'color' : option.titleColor,
  242. 'fill' : option.titleColor,
  243. 'background-color' : option.titleBackground
  244. });
  245. blocktitle.css(option.titlePosition, '-1px');
  246. blocktitle.css({
  247. 'color' : option.titleColor,
  248. 'background-color' : option.titleBackground
  249. });
  250. $('.vbox-close').css({
  251. 'color' : option.closeColor,
  252. 'background-color' : option.closeBackground
  253. });
  254. blockleft.css(option.numerationPosition, '-1px');
  255. blockleft.css({
  256. 'color' : option.numerationColor,
  257. 'background-color' : option.numerationBackground
  258. });
  259. $('.vbox-next span, .vbox-prev span').css({
  260. 'border-top-color' : option.arrowsColor,
  261. 'border-right-color' : option.arrowsColor
  262. });
  263. content.html('');
  264. content.css('opacity', '0');
  265. overlay.css('opacity', '0');
  266. checknav();
  267. // fade in overlay
  268. overlay.animate({opacity:1}, 250, function(){
  269. if (obj.data('vbtype') == 'iframe') {
  270. loadIframe();
  271. } else if (obj.data('vbtype') == 'inline') {
  272. loadInline();
  273. } else if (obj.data('vbtype') == 'ajax') {
  274. loadAjax();
  275. } else if (obj.data('vbtype') == 'video') {
  276. loadVid(autoplay);
  277. } else {
  278. content.html('<img src="'+dest+'">');
  279. preloadFirst();
  280. }
  281. option.cb_post_open(obj, gallIndex, thenext, theprev);
  282. });
  283. /* -------- KEYBOARD ACTIONS -------- */
  284. $('body').keydown(keyboardHandler);
  285. /* -------- PREVGALL -------- */
  286. $('.vbox-prev').on('click', function(){
  287. navigateGall(theprev);
  288. });
  289. /* -------- NEXTGALL -------- */
  290. $('.vbox-next').on('click', function(){
  291. navigateGall(thenext);
  292. });
  293. return false;
  294. }); // click
  295. /* -------- CHECK NEXT / PREV -------- */
  296. function checknav(){
  297. thisgall = obj.data('gall');
  298. numeratio = obj.data('numeratio');
  299. gallItems = obj.data('gallItems');
  300. infinigall = obj.data('infinigall');
  301. share = obj.data('share');
  302. blockshare.html('');
  303. if ( obj.data('vbtype') !== 'iframe' && obj.data('vbtype') !== 'inline' && obj.data('vbtype') !== 'ajax' ) {
  304. sharelinks = {
  305. pinterest : '<a target="_blank" href="https://pinterest.com/pin/create/button/?url='+obj.prop('href')+'&media='+obj.prop('href')+'&description='+title+'">'+pinIcon+'</a>',
  306. facebook : '<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u='+obj.prop('href')+'">'+fbIcon+'</a>',
  307. twitter : '<a target="_blank" href="https://twitter.com/intent/tweet?text='+title+'&url='+obj.prop('href')+'">'+twitterIcon+'</a>',
  308. linkedin : '<a target="_blank" href="https://www.linkedin.com/sharing/share-offsite/?url='+obj.prop('href')+'">'+linkedinIcon+'</a>',
  309. download : '<a target="_blank" href="'+obj.prop('href')+'">'+downloadIcon+'</a>'
  310. };
  311. $.each( share, function( key, value ) {
  312. blockshare.append(sharelinks[value]);
  313. });
  314. }
  315. if (gallItems) {
  316. items = gallItems;
  317. } else {
  318. items = $('.vbox-item[data-gall="' + thisgall + '"]');
  319. }
  320. if (items.length < 2) {
  321. infinigall = false;
  322. numeratio = false;
  323. }
  324. thenext = items.eq( items.index(obj) + 1 );
  325. theprev = items.eq( items.index(obj) - 1 );
  326. if (!thenext.length && infinigall === true) {
  327. thenext = items.eq(0);
  328. }
  329. // update gall numeration
  330. if (items.length >= 1) {
  331. gallIndex = items.index(obj)+1;
  332. blocknum.html(gallIndex + ' / ' + items.length);
  333. } else {
  334. gallIndex = 1;
  335. }
  336. if (numeratio === true) {
  337. blocknum.show();
  338. } else {
  339. blocknum.hide();
  340. }
  341. // update title
  342. if (title !== '') {
  343. blocktitle.show();
  344. } else {
  345. blocktitle.hide();
  346. }
  347. // update navigation arrows
  348. if (!thenext.length && infinigall !== true) {
  349. $('.vbox-next').css('display', 'none');
  350. nextok = false;
  351. } else {
  352. $('.vbox-next').css('display', 'block');
  353. nextok = true;
  354. }
  355. if (items.index(obj) > 0 || infinigall === true) {
  356. $('.vbox-prev').css('display', 'block');
  357. prevok = true;
  358. } else {
  359. $('.vbox-prev').css('display', 'none');
  360. prevok = false;
  361. }
  362. // activate swipe
  363. if (prevok === true || nextok === true) {
  364. content.on(TouchMouseEvent.DOWN, onDownEvent);
  365. content.on(TouchMouseEvent.MOVE, onMoveEvent);
  366. content.on(TouchMouseEvent.UP, onUpEvent);
  367. }
  368. }
  369. /* -------- gallery navigation -------- */
  370. function navigateGall(destination) {
  371. if (destination.length < 1) {
  372. return false;
  373. }
  374. if (keyNavigationDisabled) {
  375. return false;
  376. }
  377. keyNavigationDisabled = true;
  378. overlayColor = destination.data('overlay') || destination.data('overlaycolor');
  379. framewidth = destination.data('framewidth');
  380. frameheight = destination.data('frameheight');
  381. border = destination.data('border');
  382. bgcolor = destination.data('bgcolor');
  383. dest = destination.data('href') || destination.attr('href');
  384. autoplay = destination.data('autoplay');
  385. title = (destination.data('titleattr') && destination.attr(destination.data('titleattr'))) || '';
  386. // swipe out item
  387. if (destination === theprev) {
  388. content.addClass('vbox-animated').addClass('swipe-right');
  389. }
  390. if (destination === thenext) {
  391. content.addClass('vbox-animated').addClass('swipe-left');
  392. }
  393. $preloader.show();
  394. content.animate({
  395. opacity : 0,
  396. }, 500, function(){
  397. overlay.css('background',overlayColor);
  398. content
  399. .removeClass('vbox-animated')
  400. .removeClass('swipe-left')
  401. .removeClass('swipe-right')
  402. .css({'margin-left': 0,'margin-right': 0});
  403. if (destination.data('vbtype') == 'iframe') {
  404. loadIframe();
  405. } else if (destination.data('vbtype') == 'inline') {
  406. loadInline();
  407. } else if (destination.data('vbtype') == 'ajax') {
  408. loadAjax();
  409. } else if (destination.data('vbtype') == 'video') {
  410. loadVid(autoplay);
  411. } else {
  412. content.html('<img src="'+dest+'">');
  413. preloadFirst();
  414. }
  415. obj = destination;
  416. checknav();
  417. keyNavigationDisabled = false;
  418. option.cb_after_nav(obj, gallIndex, thenext, theprev);
  419. });
  420. }
  421. /* -------- KEYBOARD HANDLER -------- */
  422. function keyboardHandler(e) {
  423. if (e.keyCode === 27) { // esc
  424. closeVbox();
  425. }
  426. if (e.keyCode == 37 && prevok === true) { // left
  427. navigateGall(theprev);
  428. }
  429. if (e.keyCode == 39 && nextok === true) { // right
  430. navigateGall(thenext);
  431. }
  432. }
  433. /* -------- CLOSE VBOX -------- */
  434. function closeVbox(){
  435. var cb_pre_close = option.cb_pre_close(obj, gallIndex, thenext, theprev);
  436. if (cb_pre_close === false) {
  437. return false;
  438. }
  439. $('body').off('keydown', keyboardHandler).removeClass('vbox-open');
  440. obj.focus();
  441. overlay.animate({opacity:0}, 500, function(){
  442. overlay.remove();
  443. keyNavigationDisabled = false;
  444. option.cb_post_close();
  445. });
  446. }
  447. /* -------- CLOSE CLICK -------- */
  448. var closeclickclass = '.vbox-overlay';
  449. if(!option.overlayClose){
  450. closeclickclass = '.vbox-close'; // close only on X
  451. }
  452. $('body').on('click touchstart', closeclickclass, function(e){
  453. if ($(e.target).is('.vbox-overlay') ||
  454. $(e.target).is('.vbox-content') ||
  455. $(e.target).is('.vbox-close') ||
  456. $(e.target).is('.vbox-preloader') ||
  457. $(e.target).is('.vbox-container')
  458. ) {
  459. closeVbox();
  460. }
  461. });
  462. startX = 0;
  463. endX = 0;
  464. diff = 0;
  465. threshold = 50;
  466. startouch = false;
  467. function onDownEvent(e){
  468. content.addClass('vbox-animated');
  469. startY = endY = e.pageY;
  470. startX = endX = e.pageX;
  471. startouch = true;
  472. }
  473. function onMoveEvent(e){
  474. if (startouch === true) {
  475. endX = e.pageX;
  476. endY = e.pageY;
  477. diffX = endX - startX;
  478. diffY = endY - startY;
  479. var absdiffX = Math.abs(diffX);
  480. var absdiffY = Math.abs(diffY);
  481. if ((absdiffX > absdiffY) && (absdiffX <= 100)) {
  482. e.preventDefault();
  483. content.css('margin-left', diffX);
  484. }
  485. }
  486. }
  487. function onUpEvent(e){
  488. if (startouch === true) {
  489. startouch = false;
  490. var subject = obj;
  491. var change = false;
  492. diff = endX - startX;
  493. if (diff < 0 && nextok === true) {
  494. subject = thenext;
  495. change = true;
  496. }
  497. if (diff > 0 && prevok === true) {
  498. subject = theprev;
  499. change = true;
  500. }
  501. if (Math.abs(diff) >= threshold && change === true) {
  502. navigateGall(subject);
  503. } else {
  504. content.css({'margin-left': 0,'margin-right': 0});
  505. }
  506. }
  507. }
  508. /* == GLOBAL DECLERATIONS == */
  509. var TouchMouseEvent = {
  510. DOWN: "touchmousedown",
  511. UP: "touchmouseup",
  512. MOVE: "touchmousemove"
  513. };
  514. /* == EVENT LISTENERS == */
  515. var onMouseEvent = function(event) {
  516. var type;
  517. switch (event.type) {
  518. case "mousedown": type = TouchMouseEvent.DOWN; break;
  519. case "mouseup": type = TouchMouseEvent.UP; break;
  520. case "mouseout": type = TouchMouseEvent.UP; break;
  521. case "mousemove": type = TouchMouseEvent.MOVE; break;
  522. default:
  523. return;
  524. }
  525. var touchMouseEvent = normalizeEvent(type, event, event.pageX, event.pageY);
  526. $(event.target).trigger(touchMouseEvent);
  527. };
  528. var onTouchEvent = function(event) {
  529. var type;
  530. switch (event.type) {
  531. case "touchstart": type = TouchMouseEvent.DOWN; break;
  532. case "touchend": type = TouchMouseEvent.UP; break;
  533. case "touchmove": type = TouchMouseEvent.MOVE; break;
  534. default:
  535. return;
  536. }
  537. var touch = event.originalEvent.touches[0];
  538. var touchMouseEvent;
  539. if (type == TouchMouseEvent.UP) {
  540. touchMouseEvent = normalizeEvent(type, event, null, null);
  541. } else {
  542. touchMouseEvent = normalizeEvent(type, event, touch.pageX, touch.pageY);
  543. }
  544. $(event.target).trigger(touchMouseEvent);
  545. };
  546. /* == NORMALIZE == */
  547. var normalizeEvent = function(type, original, x, y) {
  548. return $.Event(type, {
  549. pageX: x,
  550. pageY: y,
  551. originalEvent: original
  552. });
  553. };
  554. /* == LISTEN TO ORIGINAL EVENT == */
  555. if ("ontouchstart" in window) {
  556. $(document).on("touchstart", onTouchEvent);
  557. $(document).on("touchmove", onTouchEvent);
  558. $(document).on("touchend", onTouchEvent);
  559. } else {
  560. $(document).on("mousedown", onMouseEvent);
  561. $(document).on("mouseup", onMouseEvent);
  562. $(document).on("mouseout", onMouseEvent);
  563. $(document).on("mousemove", onMouseEvent);
  564. }
  565. /* -------- LOAD AJAX -------- */
  566. function loadAjax(){
  567. $.ajax({
  568. url: dest,
  569. cache: false
  570. }).done(function( msg ) {
  571. content.html('<div class="vbox-inline">'+ msg +'</div>');
  572. preloadFirst();
  573. }).fail(function() {
  574. content.html('<div class="vbox-inline"><p>Error retrieving contents, please retry</div>');
  575. updateoverlay();
  576. });
  577. }
  578. /* -------- LOAD IFRAME -------- */
  579. function loadIframe(){
  580. content.html('<iframe class="venoframe" src="'+dest+'"></iframe>');
  581. // $('.venoframe').load(function(){ // valid only for iFrames in same domain
  582. updateoverlay();
  583. // });
  584. }
  585. /* -------- LOAD VIDEOs -------- */
  586. function loadVid(autoplay){
  587. var player;
  588. var videoObj = parseVideo(dest);
  589. // set rel=0 to hide related videos at the end of YT + optional autoplay
  590. var stringAutoplay = autoplay ? "?rel=0&autoplay=1" : "?rel=0";
  591. var queryvars = stringAutoplay + getUrlParameter(dest);
  592. if (videoObj.type == 'vimeo') {
  593. player = 'https://player.vimeo.com/video/';
  594. } else if (videoObj.type == 'youtube') {
  595. player = 'https://www.youtube.com/embed/';
  596. }
  597. content.html('<iframe class="venoframe vbvid" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay" frameborder="0" src="'+player+videoObj.id+queryvars+'"></iframe>');
  598. updateoverlay();
  599. }
  600. /**
  601. * Parse Youtube or Vimeo videos and get host & ID
  602. */
  603. function parseVideo (url) {
  604. url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);
  605. var type;
  606. if (RegExp.$3.indexOf('youtu') > -1) {
  607. type = 'youtube';
  608. } else if (RegExp.$3.indexOf('vimeo') > -1) {
  609. type = 'vimeo';
  610. }
  611. return {
  612. type: type,
  613. id: RegExp.$6
  614. };
  615. }
  616. /**
  617. * get additional video url parameters
  618. */
  619. function getUrlParameter(name) {
  620. var result = '';
  621. var sPageURL = decodeURIComponent(name);
  622. var firstsplit = sPageURL.split('?');
  623. if (firstsplit[1] !== undefined) {
  624. var sURLVariables = firstsplit[1].split('&');
  625. var sParameterName;
  626. var i;
  627. for (i = 0; i < sURLVariables.length; i++) {
  628. sParameterName = sURLVariables[i].split('=');
  629. result = result + '&'+ sParameterName[0]+'='+ sParameterName[1];
  630. }
  631. }
  632. return encodeURI(result);
  633. }
  634. /* -------- LOAD INLINE -------- */
  635. function loadInline(){
  636. content.html('<div class="vbox-inline">'+$(dest).html()+'</div>');
  637. updateoverlay();
  638. }
  639. /* -------- PRELOAD IMAGE -------- */
  640. function preloadFirst(){
  641. images = content.find('img');
  642. if (images.length) {
  643. images.each(function(){
  644. $(this).one('load', function() {
  645. updateoverlay();
  646. });
  647. });
  648. } else {
  649. updateoverlay();
  650. }
  651. }
  652. /* -------- FADE-IN THE NEW CONTENT -------- */
  653. function updateoverlay(){
  654. blocktitle.html(title);
  655. content.find(">:first-child").addClass('vbox-figlio').css({
  656. 'width': framewidth,
  657. 'height': frameheight,
  658. 'padding': border,
  659. 'background': bgcolor
  660. });
  661. $('img.vbox-figlio').on('dragstart', function(event) {
  662. event.preventDefault();
  663. });
  664. // reset content scroll
  665. container.scrollTop(0);
  666. updateOL();
  667. content.animate({
  668. 'opacity': '1'
  669. },'slow', function(){
  670. $preloader.hide();
  671. });
  672. option.cb_content_loaded(obj, gallIndex, thenext, theprev);
  673. }
  674. /* -------- CENTER FRAME -------- */
  675. function updateOL(){
  676. var sonH = content.outerHeight();
  677. var finH = $(window).height();
  678. if (sonH + 60 < finH) {
  679. margine = (finH - sonH)/2;
  680. } else {
  681. margine = '30px';
  682. }
  683. content.css('margin-top', margine);
  684. content.css('margin-bottom', margine);
  685. option.cb_post_resize();
  686. }
  687. $(window).resize(function(){
  688. if($('.vbox-content').length){
  689. setTimeout(updateOL(), 800);
  690. }
  691. });
  692. }); // each
  693. } // venobox
  694. }); // extend
  695. })(jQuery);