fancybox2 не работает во втором вызове ajax

Question

У меня есть страница с несколькими продуктами, если вы выбрали php для этого продукта, загружаемого в div, заменяющего несколько продуктов - я использую плагин fancybox для галереи изображений выбранного продукта , когда я выбираю продукт и нажимаю на любое из изображений, он безупречно показывает галерею fancybox. но когда я вернуться назад и выбрать второй продукт он просто не открывается ...

PageMap является следующим образом- страницу продуктов содержит 2 (названный type1 и type2) кнопки и 1 (динамический дел) на продукты страница загружается type1.php на загрузку

кнопки с помощью следующей Аякса

$('div#type1_link').on('click',function() {   
     $('div#ajax_div').html("<img src='ajax-load.gif' />").load("type1.php?carmodel=" + $for_url); 
     }); 

я использую FancyBox как

$(".fancybox").fancybox();//for initialisation 

<a class="fancybox" rel="group" href="images/<?php echo $row2['img1'] ?>"> 
    <img src="images/thumbs/<?php echo $row2['img1'] ?>"></a></li>//on images 

, пожалуйста, расскажите, как я могу исправить эту проблему. с использованием последних версий fancybox и jquery

Answer 1

Из того, что, как я понимаю, вы используете ajax для вывода вашего контента после первого запроса fancybox, что означает, что ваши команды jquery становятся неактуальными для динамического содержимого.

Для того, чтобы их отношение вы должны использовать «прослушивание» метод, который будет отвечать на ваши, чтобы динамическое содержимое действий:

Предположив ваш Jquery выше 1.7, вы должны использовать on() метод с вашим FancyBox. должно быть примерно так:

$(".fancybox").on("click", function(){ 
    $(this).fancybox(); 
}); 

Есть более приятные способы сделать это, но это должно работать.

Answer 2

1. Сначала создайте универсальную контейнерную упаковку для вашего продукта и обертки.
2. Назовите это нечто уникальное, как «product-container- {id}», заменив {id} на пользовательское числовое уникальное значение
3. при загрузке нового продукта через ajax вместо замены проверки содержимого, если «#product -container- {request-id} "существует
4. Если он существует, скройте каждый элемент" product-container- {id} "и покажите запрошенный элемент" # product-container- {request-id} " если он не существует, создайте новый контейнер «# product-container- {request-id}» и инициируйте jQuery fancybox в этой папке следующим образом: $ ("# product-container- {request-id} .fancybox"). fancybox() ;
5. теперь вы должны иметь небольшой кэш АЯКС для уже загруженных элементов в рамках сессии, не нарушая функциональность

Answer 3

Так от того, что я понял ваши фантазии окно не работает после того, как второй элемент, который вставлен в DIV. Для этого вам необходимо повторно инициализировать facncybox для этих элементов.

О функции успеха вы должны переинициализировать facncybox как этого

$('div#type1_link').on('click',function() {   
    $('div#ajax_div').html("<img src='ajax-load.gif' />").load("type1.php?carmodel=" + $for_url,function(){ 
     $(".fancybox").fancybox();//This initialized for dynamic content 
    }); 
}); 

Вы должны также проверить, что динамическое содержимое также имеет те правильные атрибуты фантазии поля и необходимую инициализацию для различных типов связывания JQuery.