Jquery arrow keys gallery navigation
<p>I'm trying to apply arrow navigation to an image gallery using jQuery. My code: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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();</code></pre>
</div>
</div>
</p>

<p>Gallery in the form of small photos. It opens in a block for preview to enlarge. A preview of the full screen. And I want to flipping in the photo preview. This option call events: $body.keyup(g.keystroke) - works, but it brings up a window view picture when I press the arrow keys without another click on the photo to enlarge. I need to flipping photos only when preview open.
Please help. Thanks</p>