5 이미지 중 3 이미지를 클릭하면 URL로 바로 이동합니다.

5 개의 이미지 행이 있습니다. 이러한 이미지를 클릭 할 수 있습니다. 사용자가 이미지를 클릭하면 fancybox jquery를 사용하여 비디오가 열립니다. 내가 원하는 것은 사용자가 3 개의 비디오 만 열 수 있다는 것입니다 (사용자가 어떤 것을 결정할 수 있습니다). 세 번째 비디오가 재생 된 후 jquery가 사용자를 다른 페이지로 보내길 원합니다. 또한 클릭 한 후 이미지의 불투명도를 변경하고 클릭 한 이미지의 URL을 삭제하여 사용자가이 비디오를 한 번만 열 수 있도록하고 싶습니다.5 이미지 중 3 이미지를 클릭하면 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와 코드 (I, 그냥 하나 개의 이미지에 대한 코드를 복사합니다 다른 네 개의 이미지) :

<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

방문자가 페이지를 다시로드하면 모든 (자바 스크립트) 카운터가 재설정되고 원하는만큼 많은 비디오를 볼 수 있습니다. 이것이 구현에 중요하다면 (php) 세션 및 쿠키로 처리해야 할 수도 있습니다. – JFK

감사합니다. 그렇기 때문에 3 개의 이미지를 클릭 한 후에 다른 페이지로 이동하는 것입니다. 이것은 전체 화면으로 표시되는 프레임에 표시된 애들을 위해 만들어 지므로 문제가되지 않습니다. 고마워요 –

당신은 잘 var var init? 나는 당신이'count = 5'가 아니라'var count = 5'를 쓰는 것을 볼 수 있습니다. – Defoncesko

'클릭 가능'해야하는 각 이미지에 특수 클래스 (예 : preview)를 추가하고 대신 다음 스크립트를 사용합니다. 이를 통해 비디오/이미지를 쉽게 추가하거나 제거 할 수 있습니다.

출처

2013-10-23 09:24:39 Andreas

그리고이 코드에서 fancybox 플러그인을 어떻게 구현합니까? –

'.fancybox()'호출을 추가했습니다 – Andreas

어, 그래도 여전히 이해가 안되네. 이미지 앞에 href를 두거나 삭제해야합니까? 계속 유지하면 비디오를 fancybox에서 열지 않기 때문에 삭제해도 아무 것도 열리지 않습니다 ... –

5 이미지 중 3 이미지를 클릭하면 URL로 바로 이동합니다.

답변

관련 문제