;(function($) { 'use strict'; var instancenum = 0, $html = $('html'), $document = $(document), $window = $(window); function simplelightbox(options) { this.options = $.extend({}, simplelightbox.defaults, options); this.ens = '.slb' + (++instancenum); this.init(); } simplelightbox.defaults = { elementclass: '', htmlclass: 'slbactive', closebtnclass: '', nextbtnclass: '', prevbtnclass: '', loadingclass: '', closebtncaption: 'close', nextbtncaption: 'next', prevbtncaption: 'previous', loadingcaption: 'loading...', bindtoitems: true, closeonoverlayclick: true, nextonimageclick: true, showcaptions: true, captionattribute: 'title', urlattribute: 'href', startat: 0, loadingtimeout: 100, appendtarget: $('body'), beforesetcontent: null, beforeclose: null, beforedestroy: null, videoregex: new regexp(/youtube.com|vimeo.com/) }; $.extend(simplelightbox.prototype, { items: [], captions: [], init: function() { var self = this; if (this.options.$items) { this.$items = this.options.$items; this.$items.each(function() { var $item = $(this); self.items.push($item.attr(self.options.urlattribute)); self.captions.push($item.attr(self.options.captionattribute)); }); this.options.bindtoitems && this.$items.on('click' + this.ens, function(e) { e.preventdefault(); self.showposition(self.$items.index($(e.currenttarget))); }); } else if (this.options.items) { this.items = this.options.items; } if (this.options.captions) { this.captions = this.options.captions; } }, next: function() { return this.showposition(this.currentposition + 1); }, prev: function() { return this.showposition(this.currentposition - 1); }, normalizeposition: function(position) { if (position >= this.items.length) { position = 0; } else if (position < 0) { position = this.items.length - 1; } return position; }, showposition: function(position) { var self = this; this.currentposition = this.normalizeposition(position); return this.setuplightboxhtml().prepareitem(this.currentposition, this.setcontent).show(); }, prepareitem: function(position, callback) { var self = this, url = this.items[position]; this.loadingtimeout = settimeout(function() { self.setcontent('

' + self.options.loadingcaption + '

').show(); }, this.options.loadingtimeout); if (this.options.videoregex.test(url)) { callback.call(self, $('
')); } else { var $imagecont = $('
'); this.$currentimage = $imagecont.find('.slbimage'); if (this.options.showcaptions && this.captions[position]) { $imagecont.append('
' + this.captions[position] + '
'); } this.loadimage(url, function() { self.setimagedimensions(); callback.call(self, $imagecont); self.loadimage(self.items[self.normalizeposition(self.currentposition + 1)]); }); } return this; }, loadimage: function(url, callback) { if (!this.options.videoregex.test(url)) { var image = new image(); callback && (image.onload = callback); image.src = url; } }, setuplightboxhtml: function() { var o = this.options; if (!this.$el) { this.$el = $( '
' + '
' + '
' + '
' + '
' + '
' + '' + '
' + '
' + '
' + '
' ); if (this.items.length > 1) { $( '
' + '' + '' + '
' ).appendto(this.$el.find('.slbcontentouter')); } this.$content = this.$el.find('.slbcontent'); } return this; }, show: function() { if (!this.modalindom) { this.$el.appendto(this.options.appendtarget); $html.addclass(this.options.htmlclass); this.setuplightboxevents(); this.modalindom = true; } return this; }, setcontent: function(content) { var $content = $(content); cleartimeout(this.loadingtimeout); this.setuplightboxhtml(); this.options.beforesetcontent && this.options.beforesetcontent($content, this); this.$content.html($content); return this; }, setimagedimensions: function() { this.$currentimage && this.$currentimage.css('max-height', $window.height() + 'px'); }, setuplightboxevents: function() { var self = this; if (!this.lightboxeventssetuped) { this.$el.on('click' + this.ens, function(e) { var $target = $(e.target); if ($target.is('.slbclosebtn') || (self.options.closeonoverlayclick && $target.is('.slbwrap'))) { self.close(); } else if ($target.is('.slbarrow')) { $target.hasclass('next') ? self.next() : self.prev(); } else if (self.options.nextonimageclick && self.items.length > 1 && $target.is('.slbimage')) { self.next(); } }); $document.on('keyup' + this.ens, function(e) { if (e.keycode === 27) { self.close(); } if (self.items.length > 1) { (e.keycode === 39 || e.keycode === 68) && self.next(); (e.keycode === 37 || e.keycode === 65) && self.prev(); } }); $window.on('resize' + this.ens, function() { self.setimagedimensions(); }); this.lightboxeventssetuped = true; } }, close: function() { if (this.modalindom) { this.beforeclose && this.beforeclose(this); this.$el && this.$el.off(this.ens); $document.off(this.ens); $window.off(this.ens); this.lightboxeventssetuped = false; this.$el.detach(); $html.removeclass(this.options.htmlclass); this.modalindom = false; } }, destroy: function() { this.close(); this.beforedestroy && this.beforedestroy(this); this.$items && this.$items.off(this.ens); this.$el && this.$el.remove(); } }); simplelightbox.open = function(options) { var instance = new simplelightbox(options); return options.content ? instance.setcontent(options.content).show() : instance.showposition(instance.options.startat); }; $.fn.simplelightbox = function(options) { var lightboxinstance, $items = this; return this.each(function() { if (!$.data(this, 'simplelightbox')) { lightboxinstance = lightboxinstance || new simplelightbox($.extend({}, options, {$items: $items})); $.data(this, 'simplelightbox', lightboxinstance); } }); }; $.simplelightbox = simplelightbox; })(window.jquery || window.zepto || window.simplequery);