如果點擊5張圖片中的3張，跳轉到網址

我有一排5張圖片。這些圖像可以點擊。如果用戶點擊圖片，視頻將使用fancybox jquery打開。我想要的是，用戶只能打開3個視頻（用戶決定哪個視頻）。第三個視頻播放後，我想讓jquery將用戶發送到另一個頁面。此外，我希望圖片的不透明度在點擊後發生變化，並刪除此點擊圖片的網址，因此用戶只能打開一次該視頻。如果點擊5張圖片中的3張，跳轉到網址

我到目前爲止有：

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

我希望有人能幫助我解決這個問題？

來源

2013-10-23 Jeffrey van Zwam

如果訪問者重新加載頁面，那麼所有（JavaScript）的計數器將被重置，然後他們可以繼續看盡可能多的視頻，因爲他們想要的。如果這對你的實現很重要，你可能需要用（php）會話和cookie來處理它。 – JFK

謝謝，但這就是爲什麼點擊3張圖片後跳轉到另一頁。它是爲孩子們製作的，以框架形式顯示，全屏顯示，因此不會成爲問題。謝謝 –

你是否啓動了你的變種？我可以看到你已經寫了'count = 5'not'var count = 5' – Defoncesko

我會添加一個特殊的類（例如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'; 
    } 
});

來源

2013-10-23 09:24:39 Andreas

如何在這段代碼中實現fancybox插件？ –

我已經添加了'.fancybox（）'調用 – Andreas

呃，好吧，我仍然不明白。我在圖像之前保留了href還是需要刪除它？因爲如果我保留它，它不會打開fancybox中的視頻，如果我刪除它，它根本不會打開任何東西... –

如果點擊5張圖片中的3張，跳轉到網址

回答

相關問題