I am using mediaelement.js plugin for WordPress (v2.1.7) and want to display a video with this beautifull "Backlight" style which you can see
here in action:
http://mediaelementjs.com/examples/?name=backlight
On this page there are two setup instructions which I guess is only for the non-Wordpress version:
I. Add Plugin Script
<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<!-- here's the plugin -->
<script src="mejs-feature-backlight.js"></script>
Ok to achieve this I added this script:
<script type='text/javascript' src='<?php echo bloginfo('template_url'); ?>/js/mejs-feature-backlight.js></script>
in my header.php file of my theme & copied the file "mejs-feature-backlight.js" in the folder .../wp-content/themes/themename/js .
The second instruction says the following:
II. Include the plugin in the features list
jQuery(document).ready(function($) {
// create player
$('#player1').mediaelementplayer({
// add desired features in order
features: ['playpause','current','progress','duration','volume','fullscreen','backlight'],
// the time in milliseconds between re-drawing the light
backlightTimeout: 200
});
});
I am not really sure where to copy this code-snippet. So while just guessing I copied it in the file: "mediaelement-and-player.js" which seemed to be the best choice for me in this situation.
But now when I try to post a video
which shortcode I have to use? I have tried the following:
[video src="http://mysite.com/mymedia.mp4" width="640" height="360" backlight="true"] or
[video src="http://mysite.com/mymedia.mp4" width="640" height="360" id="player1"]
But sadly it do not work. The Video plays fine but I do not see any backlight...
Any help would be greatly appreciated.
First off,
<script type='text/javascript' src='<?php echo bloginfo('template_url'); ?>/js/mejs-feature-backlight.js></script>
is wrong. It should be:
<script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/js/mejs-feature-backlight.js></script>
or
<script type='text/javascript' src='<?php echo get_bloginfo('template_directory'); ?>/js/mejs-feature-backlight.js></script>
Secondly the id for the video player must match the ID in:
jQuery(document).ready(function($) {
// create player
$('#player1').mediaelementplayer({
// add desired features in order
features: ['playpause','current','progress','duration','volume','fullscreen','backlight'],
// the time in milliseconds between re-drawing the light
backlightTimeout: 200
});
});
that is "#player1". If you can dynamically generate the ID and put in the script then you are fine. Hence the location of the script should be in the same page (or php file if required) as the file that generates the video player not in an external JS file.
Hope that helps.
Related
I am facing issue that, contact form 7 load the page after submit.I have made separate header without WP_head include.
I am using like in separate template file:
<?php echo do_shortcode('[contact-form-7 id="6039" title="Hire us pop up form"]'); ?>
Please help.
I solved this by adding these scripts in my custom header file
<script>
jvcf7_loading_url= "#/wp-
content/plugins/contact-form-7/images/ajax-loader.gif";
jvcf7_invalid_field_design = "theme_1";
jvcf7_show_label_error = "errorMsgshow";
</script>
<script type='text/javascript' src='https:#/wp-
content/plugins/jquery-validation-for-contact-form-
7/js/jquery.validate.min.js'></script>
<script>
/* <![CDATA[ */
var wpcf7 = {"apiSettings":
{"root":"http:\/\/#\/wp-
json\/","namespace":"contact-form-7\/v1"},"recaptcha":{"messages":
{"empty":"Please verify that you are not a robot."}}};
/* ]]> */
</script>
<script type='text/javascript' src='#/wp-
content/plugins/jquery-validation-for-contact-form-
7/js/jquery.jvcf7_validation.js'></script>
I sometimes embed full websites in my wordpress site, with this code:
<object data="https://skiplagged.com/" width="100%" height="600px">
<embed src="https://skiplagged.com/" width="100%″" height="600px" />
</object>
It works fine, but I would like the website to open up in a lightbox - does anyone know if that is possible at all, and how to do it?
Thank you for your answers.
You can use Fancybox
add this in your theme functions.php and make sure to have correct fancybox js and script source
function load_fancybox_script() { ?>
<script type="text/javascript" src="yoursite.com/fancyboxdirectory/source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="yoursite.com/fancyboxdirectory/source/jquery.fancybox.css" media="screen" />
<script type="text/javascript">
( function($) {
$(document).ready( function() {
$("a.fancybox-iframe").fancybox();
});
})(jQuery);
</script>
<?php
}
add_action('wp_head','load_fancybox_script', 99);
Then to have a pop-up
<a class="fancybox-iframe" data-fancybox-type="iframe" href="https://skiplagged.com/">Iframe</a>
So if I copy and paste the google translate plugin code snippet:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
It changes all my site css [from headings, animations to even boostrap css].
I did some research and ofcourse I found class="notranslate" and yes I applied for headings and stuff.
I will try by myself, but an answer would be cool.
It was easy.
So for everyone who has this problem you just have to add class="notranslate" to the stylesheet's Link tag, for each one which actually does something on that specific page.
e.g:
<link rel="stylesheet" type="text/css" href="/Templates/CSS/bootstrap.min.css" title="standard" class="notranslate" />
I have solution width config javascript
<script>
$(".class-name").addClass("notranslate");
</script>
How can I integrate social content locker in blogger blogs? We see in numbers of WordPress blogs and websites,
But in blooger.com blogs you see no plugin option
does anybody has another way or something like this?
I Want visitor to like, tweet or g+ before reading my posts.
thanks
I found this working script for this what you need to do is first backup you template.
then edit HTML >search <head> tag and put this code after <head>
<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
After that search </head> tag and put below code before this tag
<link href='https://sites.google.com/site/menightfury/home/social-locker/public/sociallocker_v1.6.0.css' rel='stylesheet'/>
<script src='https://sites.google.com/site/menightfury/home/social-locker/public/sociallockermin_v1.6.0.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function ($) {
$('#default-usage .to-lock').sociallocker({
buttons: {order:["facebook-like","twitter-tweet","google-plus"]},
twitter: {url:"https://www.facebook.com/www.mostsharedposts"},
facebook: {url:"https://www.facebook.com/www.mostsharedposts"},
google: {url:"https://plus.google.com/u/0/b/110589424466302901501/110589424466302901501"},
text: {
header: "Like us To Unlock This Content",
message: "This content is locked. Like us on Twitter, Facebook or Google plus to unlock it."
},
locker: {close: false, timer: 0,},
theme: "secrets"
});
});
//]]>
</script>
this is how to hide your code in post editor
go to post edit HTML and add this code
<article id="default-usage">
<div class="to-lock" style="display:none;">
Hello i am the hidden content
</div>
</article>
I implemented this in my blog check demo
I am new to wordpress.. I have installed my theme named 'hare'. Now I want to add some javascripts files as well as css files into the index.php page. But I am not finding the desired output.
following is the code i have written..
<?php get_header(); ?>
// Some content
<?php get_footer(); ?>
<!-- JQuery libs
================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- js jQuery wait for images Plugin ====================== -->
<script src="<?php bloginfo(template_directory ); ?>/javascripts/jquery.waitforimages.js"></script>
<!-- js jQuery flexslider Plugin ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.flexslider-min.js"></script>
<!-- jQuery Cycle Plugin ====================================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.cycle.all.js"></script>
<!-- jQuery Cycle Plugin ====================================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.fullscreen-min.js"></script>
<!-- js jQuery jcarousellite Plugin ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jcarousellite_1.0.1.min.js"></script>
<!-- js Fancybox Plugin ================================= -->
<link rel="stylesheet" href="<?php bloginfo(template_directory); ?>/javascripts/fancyBox-2/jquery.fancybox.css">
<script src="<?php bloginfo(template_url); ?>/javascripts/fancyBox-2/jquery.fancybox.pack.js"></script>
<!--fancybox helpers-->
<link rel="stylesheet" href="<?php bloginfo(template_directory); ?>/javascripts/fancyBox-2/helpers/jquery.fancybox-buttons.css"/>
<script src="<?php bloginfo(template_url); ?>/javascripts/fancyBox-2/helpers/jquery.fancybox-buttons.js"></script>
<!-- js jQuery qtip plugin ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.qtip-1.0.0-rc3.min.js"></script>
<!-- toTop ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/goToTop.js"></script>
<!-- js jQuery my own functions ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/functions.js"></script>
<!-- <script src="javascripts/jquery.tweet.js"></script> -->
<!-- JS twitter scripts ================================== -->
<script src="http://twitter.com/javascripts/blogger.js"></script>
<script src="http://twitter.com/statuses/user_timeline/EnvatoWebDesign.json?callback=twitterCallback2&count=5"></script>
<!-- End Document
================================================== -->
</body>
</html>
Is my this way is correct??
If not then please correct me..
Thank you in advance
In your comments you may be referring to these guidelines from yahoo. There are, however a few caveats to this rule. Most importantly, Google Analytics prefers it's snippet be placed within the <head> section and won't allow you to use Analytics for Webmaster Tools authentication unless the snippet is in head.
More importantly, you don't want to include your JS and CSS files directly in your theme templates like this. It works, but it is very un-WordPress-y.
The "correct" way to include additional scripts and styles in a WordPress theme is to use the wp_enqueue_script() and wp_enqueue_style() functions within a hook in functions.php, like so:
function my_custom_styles_function() {
wp_enqueue_style( 'my-style', get_stylesheet_directory() . DS . 'javascript' . DS . 'my-plugin' . DS . 'my-plugin-style.css', array(), '1.0' );
...
}
add_action('wp_enqueue_scripts', 'my_custom_styles_function');
WordPress actually has jQuery included by default, although without the $ shortcut established. You can use WordPress's jQuery and start all of your custom scripts with jQuery(...); instead of $(...); but this can cause problems for some plugins. If you want to include your own version of jquery, you should first use wp_dequeue_style() to dequeue the "built-in" jQuery.
Finally, if you do want to include you scripts in the footer, the wp_enqueue_script() function has a flag, $in_footer to defer particular scripts to the footer.
The answer provide by #qccreative is the right one. You should include all the js/css files you need to your page using the functions.php file that you must have within your theme. if you dont have it just create one and make a function for import your files just like the answer above.
you can even manage in what page you want to load your scripts.
also this is the safest way WP provide for including scripts in an organized way.
this hook that wordpress provide WP_ENQUEQUE_SCRIPTS its a function that will add the scripts within your action to the site.
heres another example:
function load_javascript_files(){
wp_register_script( 'jquery-accordion', get_template_directory_uri() . '/js/jquery.accordion.js', array('jquery'),true );
wp_enqueue_script('jquery-accordion');
}
add_action('wp_enqueue_scripts', 'load_javascript_files');
Good luck buddy
From the code you have put you would create a header.php file in your themes folder and include the JS in there. An example would be like follows:
`<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo( 'name' ); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="<?php bloginfo( 'template_url' ); ?>/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="<?php bloginfo( 'template_url' ); ?>/jQuery-validate.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/style.css" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
/**
* Proper way to enqueue scripts and styles.
*/
function custom_links() {
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', 'custom_links' );
If you need to linked your CSS file than you can use wp_enqueue_style and if you need to linked JavaScript than you can use wp_enqueue_script.
wp_enqueue_scripts this is work on frontend side of wordpress.
admin_enqueue_scripts this is works on backend side of wordpress.
I hope it's help to all people.