Question

我和lightbox-0.5 jquery compatibility issue

有同样的问题

基本上我正在使用jQuery Lightbox，而且我有一个画廊。如果我第一次点击图片并按下 - ＆gt;箭头键，它转到下一个。但如果我关闭它并重新打开，当我按下 - ＆gt;箭头键它跳过一个。如果我关闭它并重新打开它，它会跳过两个。等等。如果你们想看到它的代码：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()中，在行之间添加行_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];
    };

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

2 个答案: