如何在單擊縮略圖圖像之前隱藏視頻

如何使視頻保持隱藏狀態，直到點擊了打開燈箱的縮略圖爲止？如何在單擊縮略圖圖像之前隱藏視頻

檢查this page。（忽視最上面的視頻。）

您可以在Lightbox中看到一個帶有用於打開視頻對象的鏈接的圖像，以及該圖像正下方的所述視頻。

我想只能看到圖像。

我試着將視頻播放器的可見性設置爲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：

OK，我想我必須做的。我需要一個在兩個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>

，但我需要一個腳本，將工作是這樣的：

第一頁是這樣的 - 我只看到圖像（即一個鏈接），你不能看到播放器，因爲它是用div class =「hidden」包裝的。
我點擊圖片，一個燈箱打開並顯示一個ID爲「player」，class =「content」的div，這意味着我需要的腳本必須在「顯示」（或更好說不顯示）當燈箱未打開時顯示class =「hidden」的div，並在燈箱打開時顯示class =「content」的div。

我確定這就是我所需要的，但不知道如何編寫該腳本。您可以看到在JWbox here中實施的切換。

謝謝！

來源

2011-12-12 rlesko

你需要寫一個簡短的JavaScript來隱藏/取消隱藏divs。

你使用的是jQuery嗎？如果沒有，你應該。

確保jQuery是加載：

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

，然後使用腳本是這樣的：

<script type="text/javascript"> 

    $(document).ready(function(){ 

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

    }); 

</script>

這樣的#myHiddenDiv（您需要一種方法來引用確切的div）將當用戶點擊＃player-div時可見。

來源

2012-02-10 09:51:37

如何在單擊縮略圖圖像之前隱藏視頻

回答

相關問題