时间戳

首页 > 解决方案 > 有什么方法可以用类而不是 data-fancybox 属性来触发fancybox 3？

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

问题描述

我有动态添加的图像链接（Ajax），它只包含一个特定的类，我想让它们与 Fancybox 3 一起工作。那么，有没有办法用一个类而不是 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');
});

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

标签： classlightboxattr

解决方案

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

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

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

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

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

?>

希望这可以帮助某人。

推荐阅读