jQuery 灯箱仅在使用箭头导航时跳过图像答案

【问题标题】：jQuery lightbox skipping images only when using arrow navigationjQuery 灯箱仅在使用箭头导航时跳过图像
【发布时间】：2014-03-25 00:59:41
【问题描述】：

我和lightbox-0.5 jquery compatibility issue有同样的问题

基本上我使用的是 jQuery Lightbox，并且我有一个画廊。如果我第一次单击一张图片并按 -> 箭头键，它将转到下一张。但是如果我关闭它并重新打开，当我按下 -> 箭头键时它会跳过一个。如果我关闭它并重新打开它，它会跳过两个。等等。如果你们想看这里的代码：http://pastebin.com/pAigYDCj

【问题讨论】：

标签： jquery gallery lightbox

【解决方案1】：

我通过这种方式解决了问题：在方法_set_image_to_view() 中添加行_disable_keyboard_navigation(); 行之间 _resize_container_image_box(objImagePreloader.width,objImagePreloader.height);

和

objImagePreloader.onload=function(){};

因此整个方法如下：

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];
    };

【讨论】：

【解决方案2】：

我刚才一直在处理类似的问题。只有跳过的图像数量是随机的。但是我找到了一个对我有用的解决方案。

尝试像这样修改lightbox.js中的_keybord_action函数：

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();
            }
        }
    }

【讨论】：