对于我正在开发的其中一个网站,我使用了引导灯箱,以及下一个和后一个按钮。因此,当单击视频或图像时,从滑块中它将显示在灯箱中,然后下一个按钮将有助于导航。在导航箭头时,假设在中间突然移动到顶部。怎么能阻止它移动?
灯箱的java脚本代码
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 the 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;
}
},