javascript - Bootstrap light box, with next arrows not aligned -
for 1 of web sites developing have used bootstrap light box, along next , buttons. slider when video or image clicked displayed in light box, , there next buttons navigates. while navigating arrow suppose in middle moves top. how can prevented moving?
the java script code light box
ekkolightbox.prototype = { modal_shown: function() { var video_id, _this = this; if (!this.options.remote) { return this.error('no remote target given'); } else { this.gallery = this.$element.data('gallery'); if (this.gallery) { if (this.options.gallery_parent_selector === 'document.body' || this.options.gallery_parent_selector === '') { this.gallery_items = $(document.body).find('*[data-toggle="lightbox"][data-gallery="' + this.gallery + '"]'); } else { this.gallery_items = this.$element.parents(this.options.gallery_parent_selector).first().find('*[data-toggle="lightbox"][data-gallery="' + this.gallery + '"]'); } this.gallery_index = this.gallery_items.index(this.$element); $(document).on('keydown.ekkolightbox', this.navigate.bind(this)); if (this.options.directional_arrows && this.gallery_items.length > 1) { 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>'); this.modal_arrows = this.lightbox_container.find('div.ekko-lightbox-nav-overlay').first(); this.lightbox_container.find('a' + this.strip_spaces(this.options.left_arrow_class)).on('click', function(event) { event.preventdefault(); return _this.navigate_left(); }); this.lightbox_container.find('a' + this.strip_spaces(this.options.right_arrow_class)).on('click', function(event) { event.preventdefault(); return _this.navigate_right(); }); } } if (this.options.type) { if (this.options.type === 'image') { return this.preloadimage(this.options.remote, true); } else if (this.options.type === 'youtube' && (video_id = this.getyoutubeid(this.options.remote))) { return this.showyoutubevideo(video_id); } else if (this.options.type === 'vimeo') { return this.showvimeovideo(this.options.remote); } else if (this.options.type === 'instagram') { return this.showinstagramvideo(this.options.remote); } else if (this.options.type === 'url') { return this.loadremotecontent(this.options.remote); } else if (this.options.type === 'video') { return this.showvideoiframe(this.options.remote); } else { return this.error("could not detect remote target type. force type using data-type=\"image|youtube|vimeo|instagram|url|video\""); } } else { return this.detectremotetype(this.options.remote); } } }, strip_stops: function(str) { return str.replace(/\./g, ''); }, strip_spaces: function(str) { return str.replace(/\s/g, ''); }, isimage: function(str) { return str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i); }, isswf: function(str) { return str.match(/\.(swf)((\?|#).*)?$/i); }, getyoutubeid: function(str) { var match; match = str.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/); if (match && match[2].length === 11) { return match[2]; } else { return false; } }, getvimeoid: function(str) { if (str.indexof('vimeo') > 0) { return str; } else { return false; } }, getinstagramid: function(str) { if (str.indexof('instagram') > 0) { return str; } else { return false; } },
Comments
Post a Comment