Clever Geek Handbook

Using php parameters in jquery slider

So I'm not sure if I'm missing something obvious. (I think it might have something to do with the incompatibility of the two languages, since as far as I know PHP is interpreted on the server?) ... I'm new to PHP though.

I am using the large JQuery Plugin ResponsiveSlides on the front page of my custom WordPress site. This 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 homepage in the backend. These custom fields can be easily called and displayed correctly in the message:

var speed = <?php echo the_field( "speed" ); ?>;
var timeout = <?php echo the_field( "timeout" ); ?>;

However, if I try to insert them as variables or directly with the above PHP, I'm out of luck. The closest I have:

$(".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 source of the live page (i.e. timeout: 7000

, etc) but breaks the slider. Is there a way to make this work? Did I miss something?

Thanks everyone!

EDIT:

Thanks to Tom Crick's suggestion, I can answer the script correctly. This leads to the correct script in the original source, but the slider still doesn't work. However, if I copy the same script from the page source to the actual file and test it, it works fine. For some reason the browser is ignoring the script when PHP is echoing.

+3


source to share


2 answers 


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>';


+2


source


To enable jQuery plugins in WordPress, it's a matter of putting the scripts in the correct order (c wp_enqueue_scripts

) and passing our custom metadata to the JavaScript file (c wp_localize_script

).

A simple example, note that the JS files are inside the plugins subfolder /my-plugin/js/

. MAIN-PLUGIN-FILE.js

matches the jQuery plugin files (slider, player, gallery), add more if needed wp_register_script

. And the file CUSTOM-CONFIG.js

contains the initialization of the plugin.

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 dir
                'option' => get_option( 'my_option' ), // Your custom config values, simple value or full object
            )
        );
    }
}
new SO_25527828();

CUSTOM-CONFIG.js

var my_cfg

is printed in the header and contains the values ​​we are localizing

jQuery(document).ready(function($) 
{   
    console.dir(my_cfg);
});
+1


source






More articles:


All Articles