Вопрос по ajax, jquery-plugins, fancybox, jquery – загрузить определенный div в модальное окно, используя fancybox

0

Я использую fancybox 2. Мне удалось загрузить контент в fancybox через AJAX. Но он загружает всю страницу, и меня интересует только конкретный div. В fancybox 1 мы могли бы сделать это, добавив фильтр в ajax. Но я не уверен, как фильтровать в fancybox 2.

Как отфильтровать определенный div из загруженной AJAX страницы в fancybox 2?

<code>    $(".fancybox").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        type        : 'ajax',
        'ajax'      : {
            dataFilter: function(data) {
            return $(data).find('#modalArticleContainer')[0];
        }
    });
</code>

Untile ajax работает, но загружает целую страницу, когда я добавляю фильтр, он перестает работать. Это то, что я делал ранее в fancybox 1.

Ваш Ответ

3   ответа
0

фантазия 3 это еще проще:

<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" data-filter="#yourDivId" href="javascript:;">AJAX Content</a>

Посмотрите надемонстрация

2

Я достиг этого, используяafterLoad обратный вызов для обновления содержимого, чтобы найти ваш конкретный элемент.

$('.fancybox').fancybox({
 afterLoad   : function() {
  this.content = $("<div>").html(this.content).find("#main-content").html();
 }
});

Так что в этом примере только содержание в#main-content элемент будет загружен.

Это позволяет нам просто перейти по ссылке на мобильном телефоне, но загрузить страницу внутри fancybox на рабочем столе без верхнего и нижнего колонтитула и т. Д.

2

Если вы используете последнюю версию (https://github.com/fancyapps/fancyBox/zipball/master), то существует хитрость для загрузки определенного элемента из ответа ajax -

<a href="mypage.html #my_id" class="fancybox fancybox.ajax">Load ajax</a>

$(".fancybox").fancybox();
Это не подтверждается в HTML5, есть ли способ сделать это в JS?
это именно то, что я хотел. веселит. Subash

Похожие вопросы