0

I would like to integrate Facybox 3 in my WordPress (only on posts). It works but I'm a bit bothered cuz the initialize script is loaded after the core minified fancybox js. So, here is the code I added in my child functions.php:

// ENQUEUE FANCYBOX SCRIPT
function fancy_scripts() {
    if ( is_single() ) {
        wp_enqueue_script( 'fancybox-script', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js', array(), '3.3.5', true );     
    }
}
add_action( 'wp_enqueue_scripts', 'fancy_scripts' );

// INITIALIZE
function fancy_init(){
    if ( is_single() ) {
    ?>
    <script>
    jQuery(document).ready(function($){
        $("[data-fancybox]").fancybox({
            buttons: [
            'zoom',
            'fullScreen',
            'share',
            'thumbs',
            'close'
            ],
            protect: true
        });
        $(document).on('click', '.fancybox-share a.fancybox-share__button', function(e){ 
            e.preventDefault(); 
            var url = $(this).attr('href'); 
            window.open(url, '_blank');
        });
    });
    </script>
    <?php
    }
}
add_action('wp_footer','fancy_init')
;
// ENQUEUE CSS TO FOOTER
function fancy_footer_styles() {
    if ( is_single() ) {
        wp_enqueue_style( 'fancybox-style','https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css' );
    }   
};
add_action( 'get_footer', 'fancy_footer_styles' );

And here is the output html

<!--FOOTER-->
<script>
jQuery(document).ready(function($){
    $("[data-fancybox]").fancybox({
        buttons: [
        'zoom',
        'fullScreen',
        'share',
        'thumbs',
        'close'
        ],
        protect: true
    });
    $(document).on('click', '.fancybox-share a.fancybox-share__button', function(e){ 
        e.preventDefault(); 
        var url = $(this).attr('href'); 
        window.open(url, '_blank');
    });
});
</script>
<link rel='stylesheet' id='fancybox-style-css'  href='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css?ver=81a38b5eb2a4df901367646a93448a94' type='text/css' media='all' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js?ver=3.3.5'></script>

My questions are:

  1. Is it a problem that Initialize loads before the core fancy js?
  2. Is it a proper way to do that or do I absolutely have to put the initialize script in a separate js file and then enqueue it in the same function where I load the core file? As this, I mean :

.

function fancy_scripts() {
        if ( is_single() ) {
            wp_enqueue_script( 'fancybox-script', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js', array(), '3.3.5', true );
            wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom-scripts.js', array( 'jquery' ), true );
        }
    }
    add_action( 'wp_enqueue_scripts', 'fancy_scripts' );
2

There should be no real problems doing it this manner, but there is a more correct way, namely using wp_add_inline_script, which is exactly meant for situations where you want to append something to a script file. You would use it like this:

add_action ('wp_enqueue_scripts', 'wpse302588_enqueue_add_script');

function wpse302588_enqueue_add_script() {
  $add_script = "jQuery(document).ready(function($){ .... });"; // your script as a string without <script> tags
  wp_enqueue_script ('fancybox-script', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js', array(), '3.3.5', true);     
  wp_add_inline_script ('fancybox-script', $add_script, 'after');
  }
| improve this answer | |
1

Thanks to cjbj, here is the working code to add Fancybox to Wordpress:

// ADD FANCYBOX SCRIPT
add_action ('wp_enqueue_scripts', 'add_fancybox_script');
function add_fancybox_script() {
    if ( is_single() ) { // LOAD ONLY FOR SINGLE POSTS
        $add_script = 'jQuery(document).ready(function($){ 
            $("[data-fancybox]").fancybox({
                buttons: [
                "zoom",
                "fullScreen",
                "share",
                "thumbs",
                "close"
                ],
                protect: true
            });
        });'; 
        wp_enqueue_script ('fancybox-script', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js', array(), '3.3.5', true);     
        wp_add_inline_script ('fancybox-script', $add_script, 'after');
    }
}
// ENQUEUE CSS TO FOOTER
function fancy_footer_styles() {
    if ( is_single() ) {
        wp_enqueue_style( 'fancybox-style','https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css' );
    }   
};
add_action( 'get_footer', 'fancy_footer_styles' );

I've loaded the css in the footer as it is not important when the page load.

Also, be careful about mixing simple quotes (') and double quotes(")!

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.