Jquery箭头键画廊导航

时间:2016-06-27 21:02:46

标签: jquery gallery arrow-keys

我正在尝试使用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) - 工作,但是当我按下箭头键而没有再点击照片放大时,它会显示一个窗口视图图片。我只需要在预览打开时翻转照片。 请帮忙。感谢

0 个答案:

没有答案