Как скрыть видео перед нажатием миниатюрного изображения - PullRequest
Новая
       56

Как скрыть видео перед нажатием миниатюрного изображения

0 голосов
/ 12 декабря 2011

Как сделать так, чтобы видео оставалось скрытым до тех пор, пока не будет нажата миниатюра, открывающая лайтбокс?

Проверьте на эту страницу .(Не обращайте внимания на видео сверху.)

Вы можете увидеть изображение со ссылкой для открытия видеообъекта в лайтбоксе и упомянутое видео чуть ниже изображения.

Я хочу иметь возможность видетьтолько изображение.

Я попытался установить видимость видеоплеера на 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>

, но мне нужен скрипт, который будет работать так:

  1. Сначала страница выглядит так - явидеть только изображение (это ссылка), и вы не можете видеть плеер, потому что он обернут в div class = "hidden".

  2. Я нажимаю на изображение, и открывается лайтбокси отображает div, который имеет id = "player" и является class = "content", что означает, что сценарий, который мне нужен, должен был бы переключаться между "показом" (или, лучше сказать, не отображением) div с class = "hidden", когдалайтбокс не открыт и отображает div с class = "content", когда лайтбокс открыт.

Я уверен, что это то, что мне нужно, но не знаю, как написать этот скрипт,Вы можете видеть, что переключение реализовано в JWbox здесь .

Спасибо!

1 Ответ

1 голос
/ 10 февраля 2012

Вам нужно написать короткий 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>

Таким образом, #myHiddenDiv(Вам нужен способ ссылки на точный div) будет видно, когда пользователь нажимает # player-div.

...