Fancybox не работает с AJAX отображаемыми сообщениями на Wordpress

Question

Я установил плагин Fancybox для Wordpress на веб-сайте. На обычных страницах, когда я вставляю галерею шорткодов Wordpress или изображения, она работает просто отлично.

Но у меня есть несколько страниц, где сообщения загружаются через функцию ajax.

Я знаю, что обычно плагин Fancybox сканирует страницу для каждого изображения и затем создает атрибут "rel = 'fancybox' для каждого из них. Поэтому, если страница уже загружена, и я добавляю в нее некоторое содержимое с помощью AJAX, я не ожидаю, что плагин будет работать, так как он запускается оператором de jQuery (document) .ready.

Как я могу решить эту проблему? Я думал о том, чтобы поместить функцию str_replace в функцию PHP, которая вызывается вызовом AJAX, например:

$content = get_the_content(); 

// это получит post_content и сохранит его в переменной $ content

$content = apply_filters('the_content', $content);

// это заставит wordpress выполнять шорткоды в строке $ content

$content = str_replace('<a ', '<a rel="fancybox" ', $content);

// это ДОЛЖНО заставить воображение появляться.

Как я могу решить эту проблему? Большое спасибо.

Answer 1

Много вещей, чтобы рассмотреть здесь.

это

$content = str_replace('<a ', '<a rel="fancybox" ', $content);

не будет запускать fancybox, но привязывать тег <a rel="fancybox к fancybox, ЕСЛИ (и только если) такой скрипт существует

$("a[rel='fancybox']").fancybox();

однако вы добавляете этот элемент на лету (или используете метод replace для добавления атрибута rel), что означает, что он не существовал в DOM во время загрузки плагина fancybox.

Если вы используете fancybox v1.3.4 или ниже, эта (эти) версия (ы) не поддерживает (не) динамически добавленные элементы, поэтому ни один из вышеперечисленных не будет (никогда) работать.

В качестве обходного пути вы можете попытаться определить родительский контейнер и применить метод .on(), как описано здесь .

Возможно, вам потребуется настроить скрипт, чтобы он соответствовал вашим потребностям, например

$("#container").on("focusin", function(){
 $("a[rel='fancybox']").fancybox({ ......

Последнее примечание: fancybox v2.x уже поддерживает как существующие, так и динамически добавленные элементы.