если щелкнуть 3 из 5 изображений, перейдите по ссылке

0

У меня есть строка из 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>

Надеюсь, кто-то может помочь мне с этим?!

  • 0
    Вы хорошо начали? Я вижу, вы написали count = 5 не var count = 5
  • 0
    да, я уже пробовал это, но затем он удаляет все изображение после нажатия.
Показать ещё 2 комментария
Теги:
if-statement
fancybox
unbind

1 ответ

0
Лучший ответ

Я бы добавил специальный класс (например, preview) к каждому из изображений, которые должны быть "clickable" и вместо этого использовать следующий скрипт. С помощью этого вы можете легко добавлять или удалять видео/изображения:

$(".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';
    }
});
Поделиться
  • 0
    И как мне реализовать плагин fancybox в этом коде?
  • 0
    Я добавил .fancybox()
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню