How do I use Thickbox to display videos? - javascript

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

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.

Related

Javascript: Certain class is defined twice with same name in 2 javascripts/ccs

I have downloaded 2 packages from the internet. One is used for making the items of a list, show in pages, and the other one is a jPlayer for .mp3 files.
The next page/previous page buttons for the pages of the list, have the same name with the next song/previous song buttons of the mp3 player. They are both called jp-next and jp-previous.
These are the files the List-Paging:
<link rel="stylesheet" href="http://shiro-desu.com/scr/itemsperpage/style.css">
<script type="text/javascript" src="http://shiro-desu.com/scr/itemsperpage/jquery-1.8.2.min.js"></script>
<script src="http://shiro-desu.com/scr/itemsperpage/jPages.js"></script>
These are the files the jPlayer:
<script type="text/javascript" src="http://shiro-desu.com/scr/jquery/jquery.min.js"></script>
<script type="text/javascript" src="http://shiro-desu.com/scr/jquery/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="http://shiro-desu.com/scr/jquery/jplayer.playlist.min.js"></script>
<link href="http://shiro-desu.com/scr/jquery/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
The way i see it, changing some names in the List-Paging files will do the trick.
Problem is that i have absolutely no experience with javascipt,jQuery, i kindly request for help on this matter.
The only problem is that next page/previous page background, is affected by the background of the next song/previous song.
I have uploaded a sample on jsfiddle to show you the problem.
--> http://jsfiddle.net/5svd5mnh/
One way of avoiding this problem is to use :
<?php echo'<link href="http://shiro-desu.com/scr/jquery/jplayer.blue.monday.css"
rel="stylesheet" type="text/css" />'; ?>
in your page, in the <body> part only when you actually use the jPlayer.
So that the 2 .css files will never be imported at the same time.
This however means that you won't be able to use a jPlayer and a List-Paging in the same .html page.

How to replace stylesheets and javascripts only for one page template in wordpress

I'm about an four hours browsing an internet in order to find an answer.
I have an javascript/php/html application with rich functionality.
It includes 3 css files and 5 javascript files.
I want to build it in wordpress page.
I have already made custom page template: checkout.php
Now i need to replace all the stylesheets and javascripts with my own.
I know how to check the template:
<?php if(is_page_template('checkout.php')) :?>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/stylesheets/main.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/stylesheets/jquery.Jcrop.css" />
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/stylesheets/styles.css" />
<script src="<?php echo get_template_directory_uri(); ?>/javascripts/js_checkout/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/javascripts/js_checkout/jquery-ui.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/javascripts/js_checkout/jquery.Jcrop.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/javascripts/js_checkout/script.js"></script>
I also guess that this functions will add all stylesheets and javascripts to my new template:
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
But do wp_enqueue_style and wp_enqueue_script replaces the default styles and scripts or just add another????
Can some one just tell me how to do this and what file to edit??
header.php or general-template.php??
Thanks in advance alot
Its really going to depend on the theme you are using.
Are you using a child theme?
Where are the existing stylesheets located?
How are those stylesheets and javascript files inserted / injected into the page?
In looking at your existing code, you are correct in assuming that all you are doing at this point, is adding to what already exists on the page.
Do you want to remove all other stylesheets?
What about the existing javascript?
From what you're adding -- it appears to me - you are looking to only add to... as jquery-ui requires jquery
ps don't forget your
<?php endif; ?>
For one time use --- as a programmer I opt for the "simpler the better" method.
The code above would best be added to functions.php within your child theme.
Unless you could benefit from adding additional .js and .css files to other pages... in that case, it would be better to construct a partial. But thats discussion for another time.
Let me know if you need further assistance with this
If you are editing the templates directly, then use your
if(is_page_template///////
to insert the stylesheets, and close it with
}else{ // place default stylesheets here}
If you want to remove ALL the .js files you could use wp_dequeue_script
http://codex.wordpress.org/Function_Reference/wp_dequeue_script
or you could wrap the .js and css inside the same if statement.
Although there are certainly better practices.....
ONE would be the stylesheet --
Why not utilize your if is_template statement to add a new body class and change only the necessary items.
EX: body.cart p{background: red;} would make paragraphs have a red background BUT ONLY on the cart page.

Fancybox won't work

Can't seem to get Fancybox to work - it just links to the 1st pic. I get the error: uncaught typeerror object # an object has no method 'fancybox'.
HTML
<a class="fancybox" data-thumbnail="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/imagecache/timeout_slideshow_player_thumbnail/P1010923.JPG" href="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/imagecache/timeout_492x330/P1010923.JPG"><img alt="" src="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/toclogo.jpg"></a>
<br />
<a class="fancybox" data-thumbnail="http://fancyapps.com/fancybox/demo/2_s.jpg" href="http://fancyapps.com/fancybox/demo/2_b.jpg"></a>​
Javascript
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").attr('rel', 'gallery').fancybox({
helpers: {
thumbs: {
width: 40,
height: 40,
source: function(current) {
return $(current.element).data('thumbnail');
}
}
}
});
});
</script>
Header
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.3"></script>
It does seem to be pulling in the external files according to the Source in Chrome's Developer Tools.
Thx
Hmmm. It looks like jquery is loaded twice. Once with
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
and the other (harder to find)
http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/advagg_js/js_13ec2e29dba08b369ccfdde54d836ec0_8.js
It looks like you're using drupal and with a bit of googling, it sounds like it injects a version of jquery for you (jQuery JavaScript Library v1.3.2)
The reason that error is occuring is the conflict between the two libraries. Try following this update
http://drupal.org/project/jquery_update
You're pulling in the two versions of jQuery.
When you execute jQuery(".fancybox").jquery from the console, you get 1.3.2. Undoubtedly, this is not compatible with fancybox.
jQuery 1.8.2 is loaded via the Google CDN with your explicit script tag request.
jQuery 1.3.2 is loaded as part of http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/advagg_js/js_13ec2e29dba08b369ccfdde54d836ec0_8.js, which comes from Drupal injecting this library for its own purposes.
For future reference, I was able to locate this file by using the Chrome Developer Tools, sorting by file size (largest first) and then looking at the JS files... found it pretty quickly after that.
I was having this same problem and I resolved it by changing the double quotes in the line:
$(".fancybox").fancybox();
To single quotes:
$('.fancybox').fancybox();
Sort of a 'gotcha' since the fancyBox site has double quotes.
if anything does not work:
parent.window.document.getElementById("fancybox-wrap").style.display = 'none';
This hiding fancybox.

Regular FancyBox 1.3.4 w/ Wordpress - Link

when I search for this on google I just get a lot of wordpress plugin responses, so I'm asking here.
I have a wordpress.org blog. There's a link that, onclick, I would like to open up a fancybox w/ some content inside of it, actually a spotify embeded playlist w/ a header.
I've included all of the fancybox files and initialize, and no luck. Here is my code:
Initialization:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri();?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#playlist_pop").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
And here is my html:
<div class="spotify_header" style="padding-bottom: 10px;padding-top: 10PX;text-align: center">CHECK US OUT ON <a id="playlist_pop" href="#playlist_data"><span>SPOTIFY</span></a>
<div style="display:none">
<div id="playlist_data">
<div id="Spotiplay">
<h3>Artists We Love</h3><br/>
<div id="playlist_pop_con"><iframe src="https://embed.spotify.com/?uri=spotify:user:yalefox:playlist:3NCBHSkbl0jLZtUnNWkdPh" width="312" height="392" frameborder="0" allowtransparency="true"></iframe></div>
</div>
</div>
</div></div>
Can anyone help me with this? Incredible how something so easy can be made such a pain in wordpress..
I get this error message in the console: Uncaught TypeError: Object [object Object] has no method 'fancybox'
Does this mean it's not reading the fancybox js files?
Thanks so much for the help. Not sure if it has anything to do with my client's blog configuration or just a lack of support for regular Fancybox 1.3.2 and wordpress.org, but I had to resort to the Lytebox wordpress plugin - http://wordpress.org/extend/plugins/lytebox/ -where you just include a rel="lyteframe" in the a tag..I restyled it to look just like a fancybox, so while not optimal or as robust as fancybox, it's not a bad alternative

Jquery Mobile Button Issue

I've included Jquery & Jquery mobiles latest versions.
I'm basically trying to use a mobile button to call a JavaScript function but having issues.
This works fine in chrome but not in webworks on the playbook (this is where i get the errors)
<script type="text/javascript" src="js/personSearch.js" ></script>
Including my custom JavaScript code
Within that file i have the folllowing code
function testme()
{
alert("tet");
}
I've tried all the following ways:
<input type="button" onclick="testme();" value="Button" />
<a id="psClear" href="javascript:testme();" data-role="button" data-inline="true">Clear</a>
For them all I get the error:
mainMenu.html:1ReferenceError: Can't find variable: testme
I think its something to do with the way J query Mobile renders buttons but not sure...
UPDATE
If i add rel="external" to the page before it loads in the javascript and works fine, but reloads all the scripts again, and doesnt work without rel="exnteral"
<link rel="stylesheet" type="text/css" href="css/jqueryMobileCSS.css">
<link rel="stylesheet" type="text/css" href="css/customStyle.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jqueryMobile.js"></script>
<script src="js/eBar.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/ain.js"></script>
<script src="js/tleBar.js"></script>
<script type="text/javascript" src="js/ps.js" ></script>
So without rel="external" js/ps.js doesnt seem to load...
The scripts located on both pages are the exact same but the new page has js/ps,js loaded in aswell..
Thanks
Don't use inline Javascript (read why here) to call functions. It looks like the error you're having is related to the fact that your personSearch.js file hasn't loaded and therefore the function may not exist exist. Use the Chrome/Firebug JS console to check whether the function is definitely defined and then create another script with something resembling the following inside:
$(document).bind('pageinit',function () {
$("#psClear").on('click',function(){
testme();
});
});
This will make sure that the DOM is loaded and ready before binding the click event to your button. Make sure this script is loaded after your personSearch.js script.

Categories