API tools faq
paste
dotphp

lightbox

dotphp
Jul 12th, 2015
370
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 16.98 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. Lightbox for Bootstrap 3 by @ashleydw
  3. https://github.com/ashleydw/lightbox
  4.  
  5. License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
  6. */
  7.  
  8. (function() {
  9.   "use strict";
  10.   var $, EkkoLightbox;
  11.  
  12.   $ = jQuery;
  13.  
  14.   EkkoLightbox = function(element, options) {
  15.     var content, footer, header,
  16.       _this = this;
  17.       var get_title = "[Name Company]";
  18.     this.options = $.extend({
  19.       title: get_title,
  20.       footer: "ini adalah keterangan gambar",
  21.       remote: null
  22.     }, $.fn.ekkoLightbox.defaults, options || {});
  23.     this.$element = $(element);
  24.     content = '';
  25.     this.modal_id = this.options.modal_id ? this.options.modal_id : 'ekkoLightbox-' + Math.floor((Math.random() * 1000) + 1);
  26.     header =
  27.     '<div class="galery-username">Picture <br />Company</div><div class="modal-header btn-primary"' + (this.options.title || this.options.always_show_close ? '' : ' style="display:none"') + '><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title">' + (this.options.title || "&nbsp;") + '</h4><h7>November 01, 2015 15:33:57</h7></div>';
  28.     footer =
  29.     '<div class="modal-footer"' + (this.options.footer ? '' : ' style="display:none"') + '>' + this.options.footer + '</div>';
  30.     $(document.body).append('<div id="' + this.modal_id + '" class="ekko-lightbox modal fade" tabindex="-1"><div class="modal-dialog"><div class="modal-content">' + header + '<div class="modal-body"><div class="ekko-lightbox-container"><div></div></div></div>' + footer + '</div></div></div>');
  31.     this.modal = $('#' + this.modal_id);
  32.     this.modal_dialog = this.modal.find('.modal-dialog').first();
  33.     this.modal_content = this.modal.find('.modal-content').first();
  34.     this.modal_body = this.modal.find('.modal-body').first();
  35.     this.lightbox_container = this.modal_body.find('.ekko-lightbox-container').first();
  36.     this.lightbox_body = this.lightbox_container.find('> div:first-child').first();
  37.     this.showLoading();
  38.     this.modal_arrows = null;
  39.     this.border = {
  40.       top: parseFloat(this.modal_dialog.css('border-top-width')) + parseFloat(this.modal_content.css('border-top-width')) + parseFloat(this.modal_body.css('border-top-width')),
  41.       right: parseFloat(this.modal_dialog.css('border-right-width')) + parseFloat(this.modal_content.css('border-right-width')) + parseFloat(this.modal_body.css('border-right-width')),
  42.       bottom: parseFloat(this.modal_dialog.css('border-bottom-width')) + parseFloat(this.modal_content.css('border-bottom-width')) + parseFloat(this.modal_body.css('border-bottom-width')),
  43.       left: parseFloat(this.modal_dialog.css('border-left-width')) + parseFloat(this.modal_content.css('border-left-width')) + parseFloat(this.modal_body.css('border-left-width'))
  44.     };
  45.     this.padding = {
  46.       top: parseFloat(this.modal_dialog.css('padding-top')) + parseFloat(this.modal_content.css('padding-top')) + parseFloat(this.modal_body.css('padding-top')),
  47.       right: parseFloat(this.modal_dialog.css('padding-right')) + parseFloat(this.modal_content.css('padding-right')) + parseFloat(this.modal_body.css('padding-right')),
  48.       bottom: parseFloat(this.modal_dialog.css('padding-bottom')) + parseFloat(this.modal_content.css('padding-bottom')) + parseFloat(this.modal_body.css('padding-bottom')),
  49.       left: parseFloat(this.modal_dialog.css('padding-left')) + parseFloat(this.modal_content.css('padding-left')) + parseFloat(this.modal_body.css('padding-left'))
  50.     };
  51.     this.modal.on('show.bs.modal', this.options.onShow.bind(this)).on('shown.bs.modal', function() {
  52.       _this.modal_shown();
  53.       return _this.options.onShown.call(_this);
  54.     }).on('hide.bs.modal', this.options.onHide.bind(this)).on('hidden.bs.modal', function() {
  55.       if (_this.gallery) {
  56.         $(document).off('keydown.ekkoLightbox');
  57.       }
  58.       _this.modal.remove();
  59.       return _this.options.onHidden.call(_this);
  60.     }).modal('show', options);
  61.     return this.modal;
  62.   };
  63.  
  64.   EkkoLightbox.prototype = {
  65.     modal_shown: function() {
  66.       var video_id,
  67.         _this = this;
  68.       if (!this.options.remote) {
  69.         return this.error('No remote target given');
  70.       } else {
  71.         this.gallery = this.$element.data('gallery');
  72.         if (this.gallery) {
  73.           if (this.options.gallery_parent_selector === 'document.body' || this.options.gallery_parent_selector === '') {
  74.             this.gallery_items = $(document.body).find('*[data-toggle="lightbox"][data-gallery="' + this.gallery + '"]');
  75.           } else {
  76.             this.gallery_items = this.$element.parents(this.options.gallery_parent_selector).first().find('*[data-toggle="lightbox"][data-gallery="' + this.gallery + '"]');
  77.           }
  78.           this.gallery_index = this.gallery_items.index(this.$element);
  79.           $(document).on('keydown.ekkoLightbox', this.navigate.bind(this));
  80.           if (this.options.directional_arrows && this.gallery_items.length > 1) {
  81.             this.lightbox_container.append('<div class="ekko-lightbox-nav-overlay"><a href="#" class="' + this.strip_stops(this.options.left_arrow_class) + '"></a><a href="#" class="' + this.strip_stops(this.options.right_arrow_class) + '"></a></div>');
  82.             this.modal_arrows = this.lightbox_container.find('div.ekko-lightbox-nav-overlay').first();
  83.             this.lightbox_container.find('a' + this.strip_spaces(this.options.left_arrow_class)).on('click', function(event) {
  84.               event.preventDefault();
  85.               return _this.navigate_left();
  86.             });
  87.             this.lightbox_container.find('a' + this.strip_spaces(this.options.right_arrow_class)).on('click', function(event) {
  88.               event.preventDefault();
  89.               return _this.navigate_right();
  90.             });
  91.           }
  92.         }
  93.         if (this.options.type) {
  94.           if (this.options.type === 'image') {
  95.             return this.preloadImage(this.options.remote, true);
  96.           } else if (this.options.type === 'youtube' && (video_id = this.getYoutubeId(this.options.remote))) {
  97.             return this.showYoutubeVideo(video_id);
  98.           } else if (this.options.type === 'vimeo') {
  99.             return this.showVimeoVideo(this.options.remote);
  100.           } else if (this.options.type === 'instagram') {
  101.             return this.showInstagramVideo(this.options.remote);
  102.           } else if (this.options.type === 'url') {
  103.             return this.loadRemoteContent(this.options.remote);
  104.           } else if (this.options.type === 'video') {
  105.             return this.showVideoIframe(this.options.remote);
  106.           } else {
  107.             return this.error("Could not detect remote target type. Force the type using data-type=\"image|youtube|vimeo|instagram|url|video\"");
  108.           }
  109.         } else {
  110.           return this.detectRemoteType(this.options.remote);
  111.         }
  112.       }
  113.     },
  114.     strip_stops: function(str) {
  115.       return str.replace(/\./g, '');
  116.     },
  117.     strip_spaces: function(str) {
  118.       return str.replace(/\s/g, '');
  119.     },
  120.     isImage: function(str) {
  121.       return str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
  122.     },
  123.     isSwf: function(str) {
  124.       return str.match(/\.(swf)((\?|#).*)?$/i);
  125.     },
  126.     getYoutubeId: function(str) {
  127.       var match;
  128.       match = str.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
  129.       if (match && match[2].length === 11) {
  130.         return match[2];
  131.       } else {
  132.         return false;
  133.       }
  134.     },
  135.     getVimeoId: function(str) {
  136.       if (str.indexOf('vimeo') > 0) {
  137.         return str;
  138.       } else {
  139.         return false;
  140.       }
  141.     },
  142.     getInstagramId: function(str) {
  143.       if (str.indexOf('instagram') > 0) {
  144.         return str;
  145.       } else {
  146.         return false;
  147.       }
  148.     },
  149.     navigate: function(event) {
  150.       event = event || window.event;
  151.       if (event.keyCode === 39 || event.keyCode === 37) {
  152.         if (event.keyCode === 39) {
  153.           return this.navigate_right();
  154.         } else if (event.keyCode === 37) {
  155.           return this.navigate_left();
  156.         }
  157.       }
  158.     },
  159.     navigateTo: function(index) {
  160.       var next, src;
  161.       if (index < 0 || index > this.gallery_items.length - 1) {
  162.         return this;
  163.       }
  164.       this.showLoading();
  165.       this.gallery_index = index;
  166.       this.$element = $(this.gallery_items.get(this.gallery_index));
  167.       this.updateTitleAndFooter();
  168.       src = this.$element.attr('data-remote') || this.$element.attr('href');
  169.       this.detectRemoteType(src, this.$element.attr('data-type') || false);
  170.       if (this.gallery_index + 1 < this.gallery_items.length) {
  171.         next = $(this.gallery_items.get(this.gallery_index + 1), false);
  172.         src = next.attr('data-remote') || next.attr('href');
  173.         if (next.attr('data-type') === 'image' || this.isImage(src)) {
  174.           return this.preloadImage(src, false);
  175.         }
  176.       }
  177.     },
  178.     navigate_left: function() {
  179.       if (this.gallery_items.length === 1) {
  180.         return;
  181.       }
  182.       if (this.gallery_index === 0) {
  183.         this.gallery_index = this.gallery_items.length - 1;
  184.       } else {
  185.         this.gallery_index--;
  186.       }
  187.       this.options.onNavigate.call(this, 'left', this.gallery_index);
  188.       return this.navigateTo(this.gallery_index);
  189.     },
  190.     navigate_right: function() {
  191.       if (this.gallery_items.length === 1) {
  192.         return;
  193.       }
  194.       if (this.gallery_index === this.gallery_items.length - 1) {
  195.         this.gallery_index = 0;
  196.       } else {
  197.         this.gallery_index++;
  198.       }
  199.       this.options.onNavigate.call(this, 'right', this.gallery_index);
  200.       return this.navigateTo(this.gallery_index);
  201.     },
  202.     detectRemoteType: function(src, type) {
  203.       var video_id;
  204.       type = type || false;
  205.       if (type === 'image' || this.isImage(src)) {
  206.         this.options.type = 'image';
  207.         return this.preloadImage(src, true);
  208.       } else if (type === 'youtube' || (video_id = this.getYoutubeId(src))) {
  209.         this.options.type = 'youtube';
  210.         return this.showYoutubeVideo(video_id);
  211.       } else if (type === 'vimeo' || (video_id = this.getVimeoId(src))) {
  212.         this.options.type = 'vimeo';
  213.         return this.showVimeoVideo(video_id);
  214.       } else if (type === 'instagram' || (video_id = this.getInstagramId(src))) {
  215.         this.options.type = 'instagram';
  216.         return this.showInstagramVideo(video_id);
  217.       } else if (type === 'video') {
  218.         this.options.type = 'video';
  219.         return this.showVideoIframe(video_id);
  220.       } else {
  221.         this.options.type = 'url';
  222.         return this.loadRemoteContent(src);
  223.       }
  224.     },
  225.     updateTitleAndFooter: function() {
  226.       var caption, footer, header, title;
  227.       header = this.modal_content.find('.modal-header');
  228.       footer = this.modal_content.find('.modal-footer');
  229.       title = this.$element.data('title') || "";
  230.       caption = this.$element.data('footer') || "";
  231.       if (title || this.options.always_show_close) {
  232.         header.css('display', '').find('.modal-title').html(title || "[Name Company]");
  233.       } else {
  234.         header.css('display', 'none');
  235.       }
  236.       if (caption) {
  237.         footer.css('display', '').html(caption);
  238.       } else {
  239.         footer.css('display', '');
  240.       }
  241.       return this;
  242.     },
  243.     showLoading: function() {
  244.       this.lightbox_body.html('<div class="modal-loading">' + this.options.loadingMessage + '</div>');
  245.       return this;
  246.     },
  247.     showYoutubeVideo: function(id) {
  248.       var height, width;
  249.       width = this.checkDimensions(this.$element.data('width') || 560);
  250.       height = width / (560 / 315);
  251.       return this.showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1', width, height);
  252.     },
  253.     showVimeoVideo: function(id) {
  254.       var height, width;
  255.       width = this.checkDimensions(this.$element.data('width') || 560);
  256.       height = width / (500 / 281);
  257.       return this.showVideoIframe(id + '?autoplay=1', width, height);
  258.     },
  259.     showInstagramVideo: function(id) {
  260.       var height, width;
  261.       width = this.checkDimensions(this.$element.data('width') || 612);
  262.       this.resize(width);
  263.       height = width + 80;
  264.       this.lightbox_body.html('<iframe width="' + width + '" height="' + height + '" src="' + this.addTrailingSlash(id) + 'embed/" frameborder="0" allowfullscreen></iframe>');
  265.       this.options.onContentLoaded.call(this);
  266.       if (this.modal_arrows) {
  267.         return this.modal_arrows.css('display', 'none');
  268.       }
  269.     },
  270.     showVideoIframe: function(url, width, height) {
  271.       height = height || width;
  272.       this.resize(width);
  273.       this.lightbox_body.html('<div class="embed-responsive embed-responsive-16by9"><iframe width="' + width + '" height="' + height + '" src="' + url + '" frameborder="0" allowfullscreenclass="embed-responsive-item"></iframe></div>');
  274.       this.options.onContentLoaded.call(this);
  275.       if (this.modal_arrows) {
  276.         this.modal_arrows.css('display', 'none');
  277.       }
  278.       return this;
  279.     },
  280.     loadRemoteContent: function(url) {
  281.       var disableExternalCheck, width,
  282.         _this = this;
  283.       width = this.$element.data('width') || 560;
  284.       this.resize(width);
  285.       disableExternalCheck = this.$element.data('disableExternalCheck') || false;
  286.       if (!disableExternalCheck && !this.isExternal(url)) {
  287.         this.lightbox_body.load(url, $.proxy(function() {
  288.           return _this.$element.trigger('loaded.bs.modal');
  289.         }));
  290.       } else {
  291.         this.lightbox_body.html('<iframe width="' + width + '" height="' + width + '" src="' + url + '" frameborder="0" allowfullscreen></iframe>');
  292.         this.options.onContentLoaded.call(this);
  293.       }
  294.       if (this.modal_arrows) {
  295.         this.modal_arrows.css('display', 'none');
  296.       }
  297.       return this;
  298.     },
  299.     isExternal: function(url) {
  300.       var match;
  301.       match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
  302.       if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) {
  303.         return true;
  304.       }
  305.       if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(":(" + {
  306.         "http:": 80,
  307.         "https:": 443
  308.       }[location.protocol] + ")?$"), "") !== location.host) {
  309.         return true;
  310.       }
  311.       return false;
  312.     },
  313.     error: function(message) {
  314.       this.lightbox_body.html(message);
  315.       return this;
  316.     },
  317.     preloadImage: function(src, onLoadShowImage) {
  318.       var img,
  319.         _this = this;
  320.       img = new Image();
  321.       if ((onLoadShowImage == null) || onLoadShowImage === true) {
  322.         img.onload = function() {
  323.           var image;
  324.           image = $('<img />');
  325.           image.attr('src', img.src);
  326.           image.addClass('img-responsive');
  327.           _this.lightbox_body.html(image);
  328.           if (_this.modal_arrows) {
  329.             _this.modal_arrows.css('display', 'block');
  330.           }
  331.           _this.resize(img.width);
  332.           return _this.options.onContentLoaded.call(_this);
  333.         };
  334.         img.onerror = function() {
  335.           return _this.error('Failed to load image: ' + src);
  336.         };
  337.       }
  338.       img.src = src;
  339.       return img;
  340.     },
  341.     resize: function(width) {
  342.       var width_total;
  343.       width_total = width + this.border.left + this.padding.left + this.padding.right + this.border.right;
  344.       this.modal_dialog.css('width', 'auto').css('max-width', width_total);
  345.       this.lightbox_container.find('a').css('line-height', function() {
  346.         return $(this).parent().height() + 'px';
  347.       });
  348.       return this;
  349.     },
  350.     checkDimensions: function(width) {
  351.       var body_width, width_total;
  352.       width_total = width + this.border.left + this.padding.left + this.padding.right + this.border.right;
  353.       body_width = document.body.clientWidth;
  354.       if (width_total > body_width) {
  355.         width = this.modal_body.width();
  356.       }
  357.       return width;
  358.     },
  359.     close: function() {
  360.       return this.modal.modal('hide');
  361.     },
  362.     addTrailingSlash: function(url) {
  363.       if (url.substr(-1) !== '/') {
  364.         url += '/';
  365.       }
  366.       return url;
  367.     }
  368.   };
  369.  
  370.   $.fn.ekkoLightbox = function(options) {
  371.     return this.each(function() {
  372.       var $this;
  373.       $this = $(this);
  374.       options = $.extend({
  375.         remote: $this.attr('data-remote') || $this.attr('href'),
  376.         gallery_parent_selector: $this.attr('data-parent'),
  377.         type: $this.attr('data-type')
  378.       }, options, $this.data());
  379.       new EkkoLightbox(this, options);
  380.       return this;
  381.     });
  382.   };
  383.  
  384.   $.fn.ekkoLightbox.defaults = {
  385.     gallery_parent_selector: 'document.body',
  386.     left_arrow_class: '.glyphicon .glyphicon-chevron-left',
  387.     right_arrow_class: '.glyphicon .glyphicon-chevron-right',
  388.     directional_arrows: true,
  389.     type: null,
  390.     always_show_close: true,
  391.     loadingMessage: 'Loading Photos...',
  392.     onShow: function() {},
  393.     onShown: function() {},
  394.     onHide: function() {},
  395.     onHidden: function() {},
  396.     onNavigate: function() {},
  397.     onContentLoaded: function() {}
  398.   };
  399.  
  400. }).call(this);
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!