jQuery的收藏夹跳过图像则使用箭头导航

Question

当我为lightbox-0.5 jquery compatibility issue

基本上我使用jQuery灯箱同样的问题，我有一个画廊。如果我第一次点击一张图片，然后按 - >箭头键，它会进入下一个图片。但如果我关闭并重新打开，当按下 - >箭头键时，它会跳过一个。如果我关闭并重新打开它，它会跳过两个。等等。 如果你们想看到它的代码在这里：http://pastebin.com/pAigYDCj

Answer 1

刚才我一直在处理类似的问题。只有一些跳过的图像是随机的。但是，我找到了适合我的解决方案。

尝试修改_keybord_action功能lightbox.js这样的：

function _keyboard_action(objEvent) { 
     // To ie 
     if (objEvent == null) { 
      keycode = event.keyCode; 
      escapeKey = 27; 
     // To Mozilla 
     } else { 
      keycode = objEvent.keyCode; 
      escapeKey = objEvent.DOM_VK_ESCAPE; 
     } 
     // Get the key in lower case form 
     key = String.fromCharCode(keycode).toLowerCase(); 
     // Verify the keys to close the ligthBox 
     if ((key == settings.keyToClose) || (key == 'x') || (keycode == escapeKey)) { 
      _finish(); 
     } 
     // Verify the key to show the previous image 
     if ((key == settings.keyToPrev) || (keycode == 37)) { 
      // If we´re not showing the first image, call the previous 
      if (settings.activeImage != 0) { 
       _disable_keyboard_navigation(); 
       settings.activeImage = settings.activeImage - 1; 
       _set_image_to_view(); 
      } 
     } 
     // Verify the key to show the next image 
     if ((key == settings.keyToNext) || (keycode == 39)) { 
      // If we´re not showing the last image, call the next 
      if (settings.activeImage != (settings.imageArray.length - 1)) { 
       _disable_keyboard_navigation(); 
       settings.activeImage = settings.activeImage + 1; 
       _set_image_to_view(); 
      } 
     } 
    } 

Answer 2

我解决了这个问题是这样的：在该方法中_set_image_to_view()添加线条 _resize_container_image_box(objImagePreloader.width,objImagePreloader.height);

和

objImagePreloader.onload=function(){};

之间的线 _disable_keyboard_navigation();

因此整个方法如下：

function _set_image_to_view() { // show the loading 
     // Show the loading 
     $('#lightbox-loading').show(); 
     if (settings.fixedNavigation) { 
      $('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide(); 
     } else { 
      // Hide some elements 
      $('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide(); 
     } 
     // Image preload process 
     var objImagePreloader = new Image(); 
     objImagePreloader.onload = function() { 
      $('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]); 
      // Perfomance an effect in the image container resizing it 
      _resize_container_image_box(objImagePreloader.width,objImagePreloader.height); 
      // for reducing problem with navigation using keyboard (switching some pic at one time) 
      _disable_keyboard_navigation(); 
      // clear onLoad, IE behaves irratically with animated gifs otherwise 
      objImagePreloader.onload=function(){}; 
     }; 
     objImagePreloader.src = settings.imageArray[settings.activeImage][0]; 
    };