如何在单击缩略图图像之前隐藏视频

如何使视频保持隐藏状态，直到点击了打开灯箱的缩略图为止？如何在单击缩略图图像之前隐藏视频

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

如何在单击缩略图图像之前隐藏视频

回答

相关问题