balupton的jQuery lightBox插件

时间:2009-11-29 14:05:28

标签: jquery lightbox

使用jQuery插件http://jquery.com/plugins/project/jquerylightbox_bal

有没有办法让标题和NEXt / PREVIOUS按钮始终显示。目前我们必须将鼠标悬停在这些上面,而我的用户大多都没有注意到这一点。

LightBox2和其他人允许这样但我需要基于jQuery,因为其他框架会干扰我的其他js。

适用于此网站:http://BiblePro.BibleOcean.com

2 个答案:

答案 0 :(得分:2)

考虑这种方法如果你没有得到任何答案,可以使用内置的jQuery来解决你的问题。

我已经成功编辑了jQuery插件的样式,以实现我想要的,如果它还没有提供它。 (除非它通过jQuery功能实现,而不仅仅通过使用样式)。

使用Firebug或IE工具栏查看在悬停时向这些元素呈现的样式,然后更改该样式以反映基本样式本身而不是onhover所需的样式。

由于

答案 1 :(得分:1)

目前无法作为选项,但您可以使用以下更改修改灯箱js文件:

        // Prev
        $('#lightbox-nav-btnPrev').unbind().hover(function() { // over
            $(this).css({ 'background' : 'url(' + $.Lightbox.files.images.prev + ') left 45% no-repeat' });
        },function() { // out
            $(this).css({ 'background' : 'transparent url(' + $.Lightbox.files.images.blank + ') no-repeat' });
        }).click(function() {
            $.Lightbox.showImage($.Lightbox.images.prev());
            return false;
        });

为:

        // Prev
        $('#lightbox-nav-btnPrev').css({ 'background' : 'url(' + $.Lightbox.files.images.prev + ') left 45% no-repeat' });

以及接下来几行的相同内容。

稍后你会发现:

                // If not first, show previous button
                if ( !this.images.first(image) ) {
                    // Not first, show button
                    $('#lightbox-nav-btnPrev').show();
                }

                // If not last, show next button
                if ( !this.images.last(image) ) {
                    // Not first, show button
                    $('#lightbox-nav-btnNext').show();
                }

将其更改为:

                // If not first, show previous button
                if ( !this.images.first(image) && !this.images.last(image) ) {
                    // Not first, show button
                    $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').show();
                }

那应该为你做。您可以在html中包含未经编辑的js文件,或者将该js文件缩小并保存(我使用YUI js压缩器)。

我会考虑将其作为未来版本的选项。