I am pretty new in WordPress and I know just a litle about jQuery and Javascript and I have the following problem:
Into my functions.php file I load jQuery, the jQuery FlexSlider pluging (that create a slideshow) and another personal jQuery scripts file, in this way:
/* Function automatically executed by the hook 'load_java_scripts':
* 1) Load all my JavaScripts
*/
function load_java_scripts() {
// Load jQuery:
wp_enqueue_script('jquery');
// Load FlexSlider JavaScript
wp_enqueue_script('flexSlider-js', get_template_directory_uri() . '/assets/plugins/flexslider/jquery.flexslider.js', array('jquery'), 'v2.1', true);
// Load scripts.js:
wp_enqueue_script('myScripts-js', get_template_directory_uri() . '/assets/js/scripts.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'load_java_scripts');
Ok so the FlexSlider neeeds jQuery and in the last scripts-js file I have the following JavaScript:
/* Slider */
$(window).load(function() {
$('#main-slider').flexslider({
animation: "slide",
useCSS: false,
pauseOnHover: true
});
});
I don't know very well jQuery but I think that this script create my FlexSlider slideshow into the #main-slider div of my theme, this one (correct me if I am wrong):
<div id="main-slider" class="flexslider">
...........
...........
...........
</div>
The problem is that if I execute the previous scripts into a simple pure HTML website all work well but if I put these scripts into a WP theme the slide show is not shown
After a few hours of panic I found this documentation about the jQuery no conflict mode in WP: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers
So I have change the previous script that create my slideshow in this way (replacing the $ with the explicit jQuery function):
jQuery(window).load(function() {
jQuery('#main-slider').flexslider({
animation: "slide",
useCSS: false,
pauseOnHover: true
});
});
and now all work fine and the slideshow is shown.
Reading the jQuery documentation related to how avoid conflict(http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/) it seems to me that exist some other JavaScript framework different from jQuery that also use the $ character and that the safe mode disable the use of $ to avoid interpretation conflicts between Jquery code and other library code. And if I can't use $ in my code I have to replace it using the explicit namespace*jQuery*.
Ok, in this WP documentations: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers
show how continue to use $ even if jQuery is set in safe mode, and it do the following example:
ORIGINAL JQUERY FUNCTION THAT USE $:
$(document).ready(function(){
$(#somefunction) ...
});
This function can't work if jQuery is setted in safe mode
So if I want to use $ and I don't want replace all $ with jQuery in my code I can do:
jQuery(document).ready(function($) {
// Inside of this function, $() will work as an alias for jQuery()
// and other libraries also using $ will not be accessible under this shortcut
});
So it means that I have to replace the first $ (before my ready() function) and the pass the $ symbol as parameter on my definied function, so in this function I can still use $ without replace it? Is this one the correct meaning?
