if 3 of 5 images are clicked, jump to url

Question

I have a row of 5 images. These images can be clicked. If a user clicks on an image, a video will open using the fancybox jquery. What I want is that the user can only open 3 videos (the user decides which ones). After the third video is played, I want jquery to send the user to another page. Also I want the image's opacity to change after it is clicked and to delete the URL of this clicked image, so the user can open this video only once.

What I have so far:

<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>

the jquery code I'm using right now (I will copy the code for just one image, as I only need to change the image number to append it to the other four images):

<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>

I hope someone could help me out with this?!

Answer 1

I would add a special class (e.g. preview) to each of the images which should be "clickable" and use the following script instead. With this you can add or remove videos/images easily:

$(".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';
    }
});