Using PHP Options in a Jquery Slider - php

Question

So I'm not sure if I'm missing something obvious on this. (I think it may have something to do with the incompatibility of the two languages, since as far as I'm aware PHP is interpreted on the server?)… I'm pretty new to PHP though.
I'm using the great Jquery Plugin ResponsiveSlides on the front page of my custom WordPress-based site. That works great, with this code:
$(".home-slides").responsiveSlides({
auto: true,
speed: 500,
pause: true,
timeout: 7000,
pager: true,
nav: true,
maxwidth: 1280,
namespace: "home-slides",
prevText: "",
nextText: "",
navContainer:".home-slides",
manualControls: "#home-tabs"
});
However, I want to be able to allow the client to have some control over the plugin, using custom fields on the home page in the wordpress backend. These custom fields can easily be called and correctly display in an alert:
var speed = <?php echo the_field( "speed" ); ?>;
var timeout = <?php echo the_field( "timeout" ); ?>;
However, if I try and insert them as variables or directly with the above PHP, I have no luck. The closest I've got is:
$(".home-slides").responsiveSlides({
auto: true,
speed: <?php echo the_field( "speed" ); ?>,
pause: true,
timeout: <?php echo the_field( "timeout" ); ?>,
pager: true,
nav: true,
maxwidth: 1280,
namespace: "home-slides",
prevText: "",
nextText: "",
navContainer:".home-slides",
manualControls: "#home-tabs"
});
Which displays correctly in the live page source (i.e. timeout: 7000 etc), but breaks the slider. Is there anyway to make this work? Am I missing something?
Thank you all!
EDIT:
Thanks to Tom Kriek's suggestion, I can echo the script correctly. This produces the correct script in the live page source, but the slider still doesn't work. However, if I copy that same script from the page source to the actual file and test this, it works perfectly. It appears for some reason the browser is ignoring the script when PHP echoed.

Answer 1

echo '<script type="text/javascript">
$(".home-slides").responsiveSlides({
auto: true,
speed: '. the_field("speed") .',
pause: true,
timeout: '. the_field("timeout") .',
pager: true,
nav: true,
maxwidth: 1280,
namespace: "home-slides",
prevText: "",
nextText: "",
navContainer:".home-slides",
manualControls: "#home-tabs"
});
</script>';

Answer 2

To incorporate jQuery plugins into WordPress it's a matter of enqueuing the scripts in the correct order (with wp_enqueue_scripts) and to pass our custom meta data to the JavaScript file (with wp_localize_script).
A simple example, note that JS files are inside the plugin sub-folder /my-plugin/js/. The MAIN-PLUGIN-FILE.js corresponds to the jQuery plugin files (slider, player, gallery), add more wp_register_script as needed. And the CUSTOM-CONFIG.js file contains the plugin's initialization.
plugin.php
<?php
/**
* Plugin Name: (SO) Simple jQuery plugin enqueue
* Plugin URI: http://stackoverflow.com/a/25531753/1287812
* Author: brasofilo
*/
class SO_25527828
{
private $plugin_url;
public function __construct()
{
$this->plugin_url = plugins_url( '/', __FILE__ );
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) );
}
public function enqueue()
{
# Enqueue only on specific places
# http://codex.wordpress.org/Conditional_Tags
if( !is_home() && !is_front_page() )
return;
# Can be anything from unheap.com
wp_register_script(
'main_plugin',
$this->plugin_url . 'js/MAIN-PLUGIN-FILE.js'
);
# You'll have to play with dependencies, on_footer and do separately wp_enqueue_script's
# to achieve the exact HTML that the jQ plugin requires
wp_enqueue_script(
'config_plugin',
$this->plugin_url . 'js/CUSTOM-CONFIG.js',
array( 'jquery', 'main_plugin' ), // dependencies
false, // version
true // on footer
);
# Pass PHP values to JS
wp_localize_script(
'config_plugin',
'my_cfg',
array(
'url' => $this->plugin_url, // To load stuff from the plugin's dir
'option' => get_option( 'my_option' ), // Your custom config values, simple value or full object
)
);
}
}
new SO_25527828();
CUSTOM-CONFIG.js, the my_cfg var is printed on header and contains the values that we localized
jQuery(document).ready(function($)
{
console.dir(my_cfg);
});