CODEWITHSUNDEEP
javascriptjqueryhtmlcssthickbox
WhyAyala
WhyAyala

Reputation: 675

How do I use Thickbox to display videos?

I'm trying to use thickbox to display a video on a page. Followed the instructions on the site but when I click on the link it just takes me to the youtube page which is not what I want.

I have the call to jquery and thickbox in my header, as well as the css for thick box:

<script src="<?php bloginfo('template_url'); ?>/javascripts/thickbox.js"></script>
<script src="<?php bloginfo('template_url'); ?>/javascripts/jquery.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/stylesheets/thickbox.css">

and here is the code in the body:

<strong>
<a class="thickbox" href="//www.youtube.com/embed/########?rel=0?KeepThis=true&TB_iframe=true&height=400&width=600"  title="##### Hanson">
    <img src="http://www.#########.org/campaign/wp-content/uploads/sites/59/2013/09/#####.jpg"/>
</a> ##### Hanson*<br>(1960 B.S.M.E.)
</strong>

For the sake of privacy, I hashed some of the info in my code above. Any suggestions on what could be wrong?

Edit: Should probably mention I'm using this in word press

Upvotes: 1

Views: 1879

Answers (1)

Mike Barwick
Mike Barwick

Reputation: 5367

You need to load the ThickBox <script /> AFTER the jQuery file...like the code below.

EDIT: Also, replace the jQuery script you had with the CDN jQuery version, which I used in my example. Then clear your browser cache (important when working with WP).

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/javascripts/thickbox.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/stylesheets/thickbox.css">

As a rule of thumb, your jQuery <script /> should always be the first js file listed. It needs to load first before your other js scripts (assuming the rest of your scripts require jQuery). Otherwise they won't be initiated.

Upvotes: 2

Related Questions