Question

我有一排5张图片。可以单击这些图像。如果用户点击图片，则会使用fancybox jquery打开视频。我想要的是用户只能打开3个视频（用户决定哪些视频）。播放第三个视频后，我希望jquery将用户发送到另一个页面。此外，我希望图片的不透明度在单击后更改，并删除此单击图像的URL，这样用户只能打开一次此视频。

到目前为止我所拥有的：

<a class="fancyboxIMG1" href="linktovideo1.swf">
<img src="BTN1.jpg" style="width:19%" id="BTN1">
</a>

<a class="fancyboxIMG2" href="linktovideo2.swf">
<img src="BTN2.jpg" style="width:19%" id="BTN2">
</a>

<a class="fancyboxIMG3" href="linktovideo3.swf">
<img src="BTN3.jpg" style="width:19%" id="BTN3">
</a>

<a class="fancyboxIMG4" href="linktovideo4.swf">
<img src="BTN4.jpg" style="width:19%" id="BTN4">
</a>

<a class="fancyboxIMG5" href="linktovideo5.swf">
<img src="BTN5.jpg" style="width:19%" id="BTN5">
</a>

我正在使用的jquery代码（我将仅复制一个图像的代码，因为我只需要更改图像编号以将其附加到其他四个图像）：

<script type="text/javascript">
    count = 5;

    $('#BTN1').click(function(){
        if (count >= 3){
        $(BTN1).css('opacity', '0.2');
        $('#BTN1').unbind('click');
        count--;
        $(".fancyboxIMG1").fancybox();
        }

        else {
        location.href='http://www.thelinktogoto.com';
    };
    });
</script>

我希望有人可以帮我解决这个问题？！

Answer 1

我会为每个应该“可点击”的图像添加一个特殊的类（例如preview）并使用以下脚本代替。有了这个，您可以轻松添加或删除视频/图像：

$(".preview").on("click", function(ev) {
    var btn = $(this);

    // has this image already been clicked? Then it is "out of order"
    if (btn.data("clicked")) {
        ev.preventDefault();
        return false;
    }

    // mark as clicked
    btn.data("clicked", true);

    // show video in fancybox
    btn.closest("a").fancybox();

    // if 3 images have been clicked, redirect to url
    if ($('.preview[data-clicked="true"]').length == 3) {
        location.href='http://www.thelinktogoto.com';
    }
});

如果点击了5张图片中的3张，请跳转到网址

1 个答案: