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

Question

你能帮助我使用 tosRus 灯箱脚本将 "play" 按钮添加到灯箱吗？

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

tosRus js ligthbox 支持自动播放（link tosrus tosRus js 并且它是可能的配置选项。

我想做的是在灯箱出现时播放 button/link 并且点击它应该触发自动播放选项

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

$('.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/

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

Add "play" button to tosRus lightbox pop up

javascript

jquery

css

lightbox