0

Webサイトにjquery-lightboxスライダーを使用しています。私のウェブサイトはモバイルデバイス用に最適化されています。問題は、スライドショーの「前へ」ボタンと「次へ」ボタンにカーソルを合わせた場合にのみ表示されることです...タッチスクリーンのデバイスでは、これが問題になります。ホバーアクションで次と前のボタンを強制的に表示するにはどうすればよいですか？

これがホバーアクションを管理するコードですが、これが必要かどうかはわかりません。私はそれが開始フロントエンドコードで定義できると信じています：

$(function() {
        $('#gallery a').lightBox();
}); /*the initiating code*/

jquery-lightboxjsファイルのホバー効果コード

function _set_navigation() {
            $('#lightbox-nav').show();

            // Instead to define this configuration in CSS file, we define here. And it´s need to IE. Just.
            $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });

            // Show the prev button, if not the first image in set
            if ( settings.activeImage != 0 ) {
                if ( settings.fixedNavigation ) {
                    $('#lightbox-nav-btnPrev').css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' })
                        .unbind()
                        .bind('click',function() {
                            settings.activeImage = settings.activeImage - 1;
                            _set_image_to_view();
                            return false;
                        });
                } else {
                    // Show the images button for Next buttons
                    $('#lightbox-nav-btnPrev').unbind().hover(function() {
                        $(this).css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' });
                    },function() {
                        $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
                    }).show().bind('click',function() {
                        settings.activeImage = settings.activeImage - 1;
                        _set_image_to_view();
                        return false;
                    });
                }
            }

            // Show the next button, if not the last image in set
            if ( settings.activeImage != ( settings.imageArray.length -1 ) ) {
                if ( settings.fixedNavigation ) {
                    $('#lightbox-nav-btnNext').css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' })
                        .unbind()
                        .bind('click',function() {
                            settings.activeImage = settings.activeImage + 1;
                            _set_image_to_view();
                            return false;
                        });
                } else {
                    // Show the images button for Next buttons
                    $('#lightbox-nav-btnNext').unbind().hover(function() {
                        $(this).css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' });
                    },function() {
                        $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
                    }).show().bind('click',function() {
                        settings.activeImage = settings.activeImage + 1;
                        _set_image_to_view();
                        return false;
                    });
                }
            }
            // Enable keyboard navigation
            _enable_keyboard_navigation();
        }
4

1 に答える 1

1

fixedNavigation:trueオプションを初期化コードに追加するだけで、[次へ] ボタンと [前へ] ボタンが常に使用可能になります。

$('#gallery a').lightBox({fixedNavigation:true});
于 2012-08-21T19:53:59.387 に答える