미리보기 이미지를 클릭하기 전에 비디오를 숨기는 방법

Question

라이트 박스가 열리는 미리보기 이미지를 클릭 할 때까지 비디오를 숨겨진 상태로 유지하려면 어떻게합니까?

확인시 this page에 확인하십시오. (위에 비디오를 무시하십시오.)

라이트 박스에서 비디오 오브젝트를 여는 링크와 이미지 바로 아래에있는 비디오를 볼 수 있습니다.

이미지 만 볼 수 있기를 원합니다.

동영상 플레이어의 공개 설정을 hidden (으)로 설정했지만 이미지 링크를 클릭해도 숨김 상태로 유지됩니다.

<a href="?lightbox[width]=320&lightbox[height]=240#mediaspace" class="lightbox"><img width="160" height="120" alt="Video" title="Video" src="http://i.ytimg.com/vi/8UVNT5wvIGY/0.jpg"/></a> 

<script type='text/javascript' src='jwplayer.js'></script> 

<div id='mediaspace'>This text will be replaced</div> 

<script type='text/javascript'> 
jwplayer('mediaspace').setup({ 
'flashplayer': 'http://player.longtailvideo.com/player.swf', 
'file': 'http://www.youtube.com/watch?v=YE7VzlLtp-4', 
'controlbar': 'bottom', 
'width': '470', 
'height': '320' 
}); 
</script> 

감사 :

이

는 코드입니다.

UPDATE :

확인, 내가 무엇을해야 생각. 두 div 사이를 전환하는 스크립트가 필요합니다. 설명해 드리겠습니다. 이 같은 내 코드 모양의 무언가가 있어야합니다

<a href="#player" class="lightbox"><img src="/images/image.jpg" alt=""></a> 

<div class="hidden" style="display: none;"> 
    <div id="player" class="content"> 
     VIDEO EMBED CODE 
    </div> 
</div> 

을하지만이 같은 일 것입니다 스크립트가 필요합니다

1. 첫 페이지는 다음과 같습니다 - 나는 즉 (이미지 만 참조 링크), div 클래스 = "숨김"으로 감싸서 플레이어를 볼 수 없습니다.

2. 이미지를 클릭하면 라이트 박스가 열리 며 id = "player"이고 class = "content"인 div가 표시됩니다. 이는 필요한 스크립트가 "표시 중"(또는 그 이상)을 토글해야 함을 의미합니다. Lightbox가 열려 있지 않을 때 class = "hidden"인 div를 표시하고 Lightbox가 열려있을 때 class = "content"가있는 div를 표시합니다.

필자는이 스크립트를 어떻게 작성해야할지 모르겠다. JWbox here에 구현 된 토글을 볼 수 있습니다.

감사합니다.

Answer 1

div를 숨기거나 숨기기 해제하려면 짧은 javascript를 작성해야합니다.

jQuery를 사용하고 있습니까? 그렇지 않다면,해야합니다. 것

<script type="text/javascript"> 

    $(document).ready(function(){ 

     $("#player").click(function(event){ 
      $("#myHiddenDiv").removeClass("hidden"); 
      // OR THIS: $("#myHiddenDiv").css("display", "inline"); 
     }); 

    }); 

</script> 

이 식으로 #myHiddenDiv (당신은 정확한 사업부를 참조하는 방법이 필요) :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

를 다음과 같은 스크립트 뭔가를 사용

확인 jQuery를 확인이로드됩니다 사용자가 # player-div를 클릭하면 표시됩니다.