【问题标题】:Forcing hover actions for touch-screen devices强制触摸屏设备的悬停动作
【发布时间】:2023-03-16 10:50:01
【问题描述】:

我正在为我的网站使用jquery-lightbox slider。我的网站针对移动设备进行了优化。问题是幻灯片上的“上一个”和“下一个”按钮仅在您将鼠标悬停在它们上方时才会显示......现在在触摸屏设备上,这是一个问题。如何通过悬停动作强制显示下一个和上一个按钮?

这是控制悬停动作的代码,但不知道这是否有必要。相信可以在启动前端代码中定义:

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

jquery-lightbox js文件悬停效果代码

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

【问题讨论】:

    标签: jquery mobile touch


    【解决方案1】:

    只需将选项 fixedNavigation:true 添加到您的初始化代码中,这将使 Next 和 Prev 按钮始终可用

    $('#gallery a').lightBox({fixedNavigation:true});
    

    【讨论】:

    • 没办法,那么容易...不敢相信...没有捡到。非常感谢!
    猜你喜欢
    • 2017-01-12
    • 2014-05-17
    • 2023-04-07
    • 2012-12-05
    • 1970-01-01
    • 2013-10-07
    • 1970-01-01
    • 2014-04-28
    相关资源
    最近更新 更多