Quantcast
Channel: Raymon Schouwenaar.nl » php
Viewing all articles
Browse latest Browse all 2

Push PHP data to an WordPress external JS script with wp_localize_script

0
0

Creating an WordPress website and you want to push the PHP data to the external JS script! But how you gonna do that? Learn it here! It’s very simple!

PHP data to the external JS file

There is an simple answer! Use the wp_localize_script() function from WordPress!

I assume that you’re familiar with the right way to load the JS or jQuery scripts with wp_enqeue_script() function. Only than you can use wp_localize_script().

The script
This code below is special for building an WordPress Plugin, you can see that i use the plugins_url() function. For theme’s you should use get_template_directory_uri() to get the theme url.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* Script functions */
function wp_exclusive_js_scripts() {
wp_enqueue_script( 'jquery', plugins_url( '../js/jquery.js' , __FILE__ ));
wp_enqueue_script( 'jquery_cycle', plugins_url( '../js/jquery.cycle.js' , __FILE__ ), array( 'jquery' ));
wp_enqueue_script( 'maximage', plugins_url('../js/jquery.maximage.js' , __FILE__ ) , array( 'jquery' ));

$exclusive_slider_fx = get_option('fx_slider_type');
$exclusive_slider_speed = get_option('speed_slider_type');
$exclusive_slider_timeout = get_option('timeout_slider_type');
$exclusive_slider_pauze = get_option('pauze_slider_type');

wp_enqueue_script( 'custom_maximage_slider', plugins_url( '../js/custom_maximage_slider.js' , __FILE__ ) , array( 'jquery' ));

wp_localize_script( 'custom_maximage_slider', 'slider_setting', array(
'fx' => $exclusive_slider_fx,
'speed' => $exclusive_slider_speed,
'timeout' => $exclusive_slider_timeout,
'pauze' => $exclusive_slider_pauze,
)
);

}

If you’re check the source of the page, you should see this:

Select Code
1
2
3
4
5
<script type='text/javascript'>
/* <![CDATA[ */
var slider_setting = {"fx":"fade","speed":"2500","timeout":"0","pauze":"1"};
/* ]]> */
</script>

So you see WordPress has the data of the setting page!

Now you need to add this data to you’re external file. In my case this is the ‘custom_maximage_slider.js’ script. There i’m gonna add some variable’s. (check below)

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
jQuery(document).ready(function ($) {
$('#maximage').maximage({
cycleOptions: {
fx: slider_setting.fx,
speed: slider_setting.speed, // Has to match the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33)
timeout: slider_setting.timeout,
prev: '#arrow_left',
next: '#arrow_right',
pause: slider_setting.pauze,
cssBackgroundSize: false, // We don't want to use background-size:cover for our custom size
before: function(last,current){
if(!$.browser.msie){
// Start HTML5 video when you arrive
if($(current).find('video').length > 0) $(current).find('video')[0].play();
}
},
after: function(last,current){
if(!$.browser.msie){
// Pauses HTML5 video when you leave it
if($(last).find('video').length > 0) $(last).find('video')[0].pause();
}
}
},
onFirstImageLoaded: function(){
jQuery('#cycle-loader').hide();
jQuery('#maximage').fadeIn('fast');
}
});

// Helper function to Fill and Center the HTML5 Video
jQuery('video,object').maximage('maxcover');

// To show it is dynamic html text
jQuery('.in-slide-content').delay(1200).fadeIn();
});

Result

So now you can see that it works!

Het bericht Push PHP data to an WordPress external JS script with wp_localize_script verscheen eerst op Raymon Schouwenaar.nl.


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles





Latest Images