0

I'm trying to apply arrow navigation to an image gallery using jQuery. My 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();

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

I.Swen
  • 61
  • 1
  • 8
  • What gallery library are you using? We don't know what showNext() and showPrevious() are supposed to do. – meepzh Jun 27 '16 at 21:08
  • I don't use library, only jquery. showNext() and showPrevious() shows the previous and next picture when I click on the arrow. I can't understand how to set an event to the button works only in the open preview. Java script has a similar method addeventlistener. I can not find similar jquery – I.Swen Jun 27 '16 at 21:14
  • Could you show us the contents of showNext() and showPrevious() and closePreview()? – meepzh Jun 27 '16 at 21:22
  • I edited the code in question – I.Swen Jun 27 '16 at 21:30
  • I'm really sorry, I can't find any errors in the code because I still don't know what your code actually does. For example, what does showImage() do exactly? What does display() do? There are a lot of black boxed functions that might have errors. I'd recommend looking through those functions to make sure that you don't accidentally call an enlarging function. This seems to be proprietary code that you don't want to share, so StackOverflow may be the wrong place to ask. – meepzh Jun 27 '16 at 21:35
  • I edited the code agane in question, really need advice – I.Swen Jun 27 '16 at 21:54

0 Answers0