有什么方法可以用 class 而不是 data-fancybox 属性来触发 fancybox 3？

Question

我有动态添加的图像链接 (Ajax)，它只包含一个特定的 class，我想让它们与 Fancybox 3 一起工作。那么，有什么方法可以触发带有 class 而不是 data-fancybox 属性的 fancybox 3？我尝试指定选择器但没有成功。

另一种解决方案是使用 jQuery 添加属性，但由于它是动态加载的，因此不适用于此。

渲染HTML

<a href="IMAGE_URL" class="thickbox" >
    <img src="THUMBNAIL_IMG" />
</a>

JS

jQuery(document).ready(function($) {                
    $.fancybox({
        type : 'image',
        selector : '.thickbox'
    });
    $('.thickbox').attr('data-fancybox');
});

我搜索了一个解决方案，但我还没有找到，所以我被卡住了。

Answer 1

好的，多亏了这个CODEPEN，我终于找到了可行的解决方案。

jQuery(document).ready(function($) {   
    $().fancybox({
        selector : '.thickbox'
    });
});

这使得 Facybox 3 仅使用 class 名称，因此无需使用 data-fancybox 属性。

顺便说一句，我没有提到它，但我的目的是替换一些 WP 插件使用的原生 Thickbox 灯箱 (Activity Plus在 wordPress 前端为 BuddyPress 重新加载）。

这是我在前端禁用 Thickbox 并在不使用插件的情况下将 Fancybox 添加到 WordPress 的完整 PHP 片段。

<?php

// DISABLE THICKBOX LIGHTBOX FRONTEND

function wpse71503_init() {
    if (!is_admin()) {
        wp_deregister_style('thickbox');
        wp_deregister_script('thickbox');
    }
}
add_action('init', 'wpse71503_init');

// ADD FANCYBOX LIGHTBOX

function fancy_enqueue_scripts() {
    if (!is_admin()) {
        wp_enqueue_script( 'fancybox-script', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js', array(), '', true );
    }
}
add_action( 'wp_enqueue_scripts', 'fancy_enqueue_scripts' );

function fancy_CSS_callback() {
    if (!is_admin()) {
        wp_enqueue_style( 'fancybox-style','https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css' );
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {                
                $().fancybox({
                    selector : '.thickbox, .fancybox'
                }); 
            }); 
        </script>
        <?php
    }   
};
add_action( 'wp_footer', 'fancy_CSS_callback' );

?>

希望这对某人有所帮助。

有什么方法可以用 class 而不是 data-fancybox 属性来触发 fancybox 3？

Any way to trigger fancybox 3 with a class instead of data-fancybox attribute?

class

lightbox

attr