Question

How do I make a video remain hidden until a thumbnail that opens a lightbox is clicked?

Check at this page. (Disregard the video on top.)

You can see an image with a link for opening video object in lightbox and the said video just below the image.

I want to be able to see only the image.

I tried setting video player’s visibility to hidden but then it remains hidden even after I click the image link.

This is the code:

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

Thanks.

UPDATE:

OK, I figured what I have to do. I need a script that toggles between two divs.
Let me explain. I should have my code look something like this:

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

but I need a script that would work like this:

1. First a page looks like this – I see only the image (that is a link) and you can’t see the player because it is wrapped with div class=”hidden”.

2. I click the image and a lightbox opens and displays a div that has an id=”player” and is class=”content” which means that the script I need would have to toggle between “displaying” (or better say not displaying) the div with class=”hidden” when the lightbox is not open and displaying the div with class=”content” when the lightbox is open.

I’m sure that’s what I need but have no idea how to write that script. You can see that toggle implemented in JWbox here.

Thanks!

Answer 1

You need to write a short javascript to hide/unhide the divs.

Are you using jQuery? If not, you should.

Make sure jQuery is loaded:

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

and then use a script something like this:

<script type="text/javascript">

    $(document).ready(function(){

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

    });

</script>

This way the #myHiddenDiv (You need a way to reference the exact div) will be visible when the user clicks the #player-div.