javascript - 将 "play"按钮添加到 tosRus 灯箱弹出窗口

Question

您能帮我使用 tosRus 灯箱脚本向灯箱添加“播放”按钮吗？

我在这里做了一个jsbin作为概念jsbin lightbox

tosRus js ligthbox 支持自动播放(链接到 tosrus tosRus js 并且它是可能的配置选项。

我想做的是在灯箱出现时有一个播放按钮/链接，点击它应该会触发自动播放选项

所以我想为播放功能做这样的事情:

$('.play').on('click',function() {

    $('#xmpl3').tosrus({
        autoplay: {
            play: true
        }
    });

});

按钮代码如下:

<button class="play">Play</button>

它的工作原理与您在 jsbin 中看到的一样，但播放按钮应该只在灯箱弹出时显示。你怎么能那样做？

Answer 1

我将播放按钮放在了标题中。您可以通过替换以下选择器 $('.tos-caption') 将其放置在模式中您想要的位置。

var tos = $('#xmpl3 a').tosrus({
    buttons: false,
    caption: {
        add: true
    },
    pagination: {
        add: true,
        type: 'thumbnails'
    },
    slides: {
        scale: 'fill'
    }

});

tos.bind("opening.tos", function( event ) {
    console.log('open');
    $('.tos-caption').append("<button class='play'>Play</button>");
    $('.play').on('click',function() {
        $('#xmpl3').tosrus({
            autoplay: {
                play: true
            }
        });
    });
});

http://output.jsbin.com/wawuxo/3/