Блог

У меня есть ссылки на изображения, добавленные динамически (Ajax), которые содержат только определенный класс, и я хотел бы заставить их работать с Fancybox 3. Итак, есть ли какой-нибудь способ запустить fancybox 3 с классом вместо атрибута data-fancybox? Я пытался указать селектор, но безуспешно.

Другим решением было бы добавить атрибут с помощью 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');
});
 

Я искал решение, но пока не нашел его, так что я застрял.

Хорошо, я наконец-то нашел рабочее решение благодаря этому CODEPEN.

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

Это позволяет Facybox 3 работать только с именем класса, и поэтому нет необходимости использовать data-fancybox attibute.

Кстати, я не упоминал об этом, но моей целью было заменить собственный лайтбокс Thickbox, используемый некоторыми плагинами WP (в моем случае Activity Plus Reloaded для BuddyPress) во интерфейсе WordPress.

Вот полный фрагмент PHP, который я сделал, чтобы отключить Thickbox во внешнем интерфейсе и добавить Fancybox в WordPress без использования плагина.

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

?>
 

Надеюсь, это может кому-то помочь.