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>

感谢。

更新

好吧，我想我要做的事情。我需要一个在两个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中看到该切换。

谢谢！

Answer 1

你需要写一个简短的javascript来隐藏/取消隐藏div。

您使用的是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>

这样，当用户点击＃player-div时，＃myHiddenDiv（你需要一种引用精确div的方法）将会显示。

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

1 个答案: