如何在WordPress中正确集成FancyBox 3

我想在我的WordPress中集成Facybox 3（仅在帖子上）。它可以工作，但我有点麻烦，因为初始化脚本是在核心缩小后加载的fancybox js. 这是我在孩子身上添加的代码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\' );

下面是输出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>

我的问题是：

在核心花式js之前初始化加载是否有问题。

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

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\'); }

// 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\' );

将Lightbox添加到WordPress本地库

有没有办法通过jQuery或WP过滤器检查库是否链接到附件页或图像文件？我正在尝试将一个灯箱添加到链接到图像文件的库图像中。但我无法做到这一点，因为在WordPress生成的html代码中，无法区分链接到附件页的图像和链接到图像文件的图像之间的区别。

相关推荐

将Lightbox添加到WordPress本地库