diff --git a/meta-lightbox.js b/meta-lightbox.js new file mode 100755 index 0000000..b370e1b --- /dev/null +++ b/meta-lightbox.js @@ -0,0 +1,586 @@ +/* + * MetaLightbox v0.5 + * http://twma.pro + * + */ + +//=require ../../bower_components/jquery-zoom/jquery.zoom.js + +(function($, window, document) { + + var pluginName = 'metaLightbox', + defaults = { + effect: 'fade', + theme: 'default', + keyboardNav: true, + clickOverlayToClose: true, + onInit: function() {}, + beforeShowLightbox: function() {}, + afterShowLightbox: function(lightbox) {}, + beforeHideLightbox: function() {}, + afterHideLightbox: function() {}, + onPrev: function(element) {}, + onNext: function(element) {}, + errorMessage: 'The requested content cannot be loaded. Please try again later.' + }; + + function MetaLightbox(element, options) { + /*this.el = element; + this.$el = $(this.el);*/ + + this.options = $.extend({}, defaults, options); + + this._defaults = defaults; + this._name = pluginName; + + this.init(); + } + + MetaLightbox.prototype = { + + init: function() { + var $this = this, + $html = $('html'); + + this.ajaxLoaded = false; + + // make object globally accessible + document.MetaLightbox = this; + + // Need this so we don't use CSS transitions in mobile + if (!$html.hasClass('meta-lightbox-notouch')) $html.addClass('meta-lightbox-notouch'); + if ('ontouchstart' in document) $html.removeClass('meta-lightbox-notouch'); + + // Setup the click + $(document).on('click', '[data-toggle="lightbox"]', function(e) { + e.preventDefault(); + e.stopPropagation(); + + $this.showLightbox(this); + return false; + }); + + // keyboardNav + if (this.options.keyboardNav) { + $('body').off('keyup').on('keyup', function(e) { + var code = (e.keyCode ? e.keyCode : e.which); + // Escape + if (code === 27) { + $this.destructLightbox(); + } + // Left + if (code === 37) { + $('.meta-lightbox-prev').trigger('click'); + } + // Right + if (code === 39) { + $('.meta-lightbox-next').trigger('click'); + } + }); + } + + this.options.onInit.call(this); + + }, + + showLightbox: function(element) { + this.el = element; + this.$el = $(this.el); + + var $this = this, + lightbox, content, currentLink, galleryItems; + + this.options.beforeShowLightbox.call(this); + + lightbox = this.constructLightbox(); + if (!lightbox) return; + content = lightbox.find('.meta-lightbox-content'); + if (!content) return; + currentLink = this.$el; + $('body').addClass('meta-lightbox-body-effect-' + this.options.effect); + + // Add content + this.processContent(content, currentLink); + + // Nav + if (this.$el.data('lightbox-gallery')) { + galleryItems = $('[data-lightbox-gallery="' + this.$el.data('lightbox-gallery') + '"]'); + + if (galleryItems.length === 1) { + $('.meta-lightbox-nav').hide(); + } else { + $('.meta-lightbox-nav').show(); + } + + // Prev + $('.meta-lightbox-prev').off('click').on('click', function(e) { + e.preventDefault(); + var index = galleryItems.index(currentLink); + currentLink = galleryItems.eq(index - 1); + if (!$(currentLink).length) currentLink = galleryItems.last(); + $this.processContent(content, currentLink); + $this.options.onPrev.call(this, [currentLink]); + }); + + // Next + $('.meta-lightbox-next').off('click').on('click', function(e) { + e.preventDefault(); + var index = galleryItems.index(currentLink); + currentLink = galleryItems.eq(index + 1); + if (!$(currentLink).length) currentLink = galleryItems.first(); + $this.processContent(content, currentLink); + $this.options.onNext.call(this, [currentLink]); + }); + } + + setTimeout(function() { + lightbox.addClass('meta-lightbox-open'); + $this.options.afterShowLightbox.call(this, [lightbox]); + }, 1); // For CSS transitions + }, + + processContent: function(content, link) { + var $this = this, + href = link.attr('href'), + img, video, src, classTerm, iframe, wrap; + + content.html('').addClass('meta-lightbox-loading'); + + // Is HiDPI? + if (this.isHidpi() && link.data('lightbox-hidpi')) { + href = link.data('lightbox-hidpi'); + } + + // Image + if (href.match(/\.(jpeg|jpg|gif|png)$/i) != null) { + /*if ($(window).width() < 768) { + window.open(href, '_blank'); + }*/ + img = $('', { + src: href + }); + img.on('load', function() { + var wrap = $('
'), + $content = $('.meta-lightbox-content'), + imgwrapper = $(''); + + imgwrapper.append(img); + wrap.append(imgwrapper); + + // Vertically center images + wrap.css({ + 'line-height': $content.height() + 'px', + 'height': $content.height() + 'px' // For Firefox + }); + $(window).resize(function() { + wrap.css({ + 'line-height': $content.height() + 'px', + 'height': $content.height() + 'px' // For Firefox + }); + }); + + if (typeof imgwrapper['zoom'] !== 'undefined') { + imgwrapper.zoom(); + } + + content.html(wrap).removeClass('meta-lightbox-loading'); + $this.contentLoaded(); + + }); + /*.each(function () { + if (this.complete) $(this).load(); + });*/ + + img.on('error', function() { + var wrap = $(' '); + content.html(wrap).removeClass('meta-lightbox-loading'); + $this.contentLoaded(); + }); + + // Set the title + if (link.data('title')) { + $this.setTitle(link.data('title')); + } else if (link.attr('title')) { + $this.setTitle(link.attr('title')); + } else { + $('.meta-lightbox-title-wrap').html(''); + } + + // google analytics + if (typeof ga === 'function') { + ga('send', 'event', 'meta', 'Image Click', href); + } + } + // Video (Youtube/Vimeo) + else if (video = href.match(/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/)) { + src = ''; + classTerm = 'meta-lightbox-video'; + + if (video[1] == 'youtube') { + src = '//www.youtube.com/embed/' + video[4]; + classTerm = 'meta-lightbox-youtube'; + } + if (video[1] == 'youtu') { + src = '//www.youtube.com/embed/' + video[3]; + classTerm = 'meta-lightbox-youtube'; + } + if (video[1] == 'youtube-nocookie') { + src = '//www.youtube-nocookie.com/embed/' + video[4]; + classTerm = 'nivo-lightbox-youtube'; + } + if (video[1] == 'vimeo') { + src = '//player.vimeo.com/video/' + video[3]; + classTerm = 'meta-lightbox-vimeo'; + } + + if (src) { + iframe = $('