我正在尝试使用jQuery将箭头导航应用到图库。我的代码:
function Gallery(sSelector){
var g = this;
g.init(sSelector);
g.pictures = g.find(".picture");
g.preview = g.find(".preview");
g.arrowPrev = g.find(".preview__arrow_prev");
g.arrowNext = g.find(".preview__arrow_next");
g.previewImage = g.find(".preview__image");
g.current = 0;
g.showPreview = function(event){//show enlarged photos after clicking on the small
var picture = $(this);
g.current = g.pictures.index(picture);
g.display(picture);
}
g.closePreview = function(event){
if(!event||$(event.target).hasClass("preview")){
g.preview.removeClass("preview_shown");
}
}
g.keystroke = function(event){
if(event.which == 39){// arrow right
g.showNext();
}
else if(event.which == 37){//arrow left
g.showPrevious();
}
if(event.which == 27){//escclose preview
g.closePreview();
}
}
g.showImage = function(iShift){
g.current+=iShift;
g.display(g.find(".picture:eq(" + g.current + ")"));//show big photo
}
g.display = function(oPicture){
var smallImage = oPicture.find(".picture__image")
,bigImageSrc = smallImage.attr("src").replace("small_", "");
g.previewImage.attr("src", bigImageSrc);
g.preview.addClass("preview_shown"); //show preview
}
g.showPrevious = function(){//show previous photo
g.showImage(-1);
}
g.showNext = function(){//show next photo
g.showImage(1);
}
g.pictures.click(g.showPreview);//show big photo
g.preview.click(g.closePreview);//close big photo
g.preview.on('keyup', g.keystroke); // arrow keyup + escclose preview
g.arrowPrev.click(g.showPrevious);//show previous photo
g.arrowNext.click(g.showNext);//show next photo
}
Gallery.prototype = new Component();
画廊以小照片的形式。它打开一个块进行预览放大。全屏预览。我想翻看照片预览。这个选项调用事件:$ body.keyup(g.keystroke) - 工作,但是当我按下箭头键而没有再点击照片放大时,它会显示一个窗口视图图片。我只需要在预览打开时翻转照片。 请帮忙。感谢