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

【问题标题】：Any way to trigger fancybox 3 with a class instead of data-fancybox attribute?有什么方法可以用类而不是 data-fancybox 属性来触发fancybox 3？
【发布时间】：2021-06-24 08:23:35
【问题描述】：

我有动态添加的图像链接（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');
});

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

【问题讨论】：

标签： class lightbox attr

【解决方案1】：

好的，感谢CODEPEN，我终于找到了可行的解决方案。

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

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

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

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

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

?>

希望这可以帮助某人。

【讨论】：