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

如何解决有什么方法可以用类而不是 data-fancybox 属性触发fancybox 3？

我有动态添加的图像链接（Ajax），它只包含一个特定的类，我想让它们与 fancybox 3 一起使用。那么，有没有办法用一个类而不是数据来触发fancybox 3-花式盒子属性？我试图指定选择器，但没有成功。

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

呈现的 HTML

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

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

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

解决方法

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

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

这使得 Facybox 3 只使用类名，因此无需使用 data-fancybox 属性。

顺便说一句，我没有提到它，但我的目的是替换一些 WP 插件使用的原生 Thickbox 灯箱（在我的例子中是 Activity Plus Reloaded for BuddyPress）在 wordPress 前端。

这是我在前端禁用 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' );

?>

希望这可以帮助某人。