загрузка colorbox из содержимого AJAX - PullRequest
Новая
       24

загрузка colorbox из содержимого AJAX

0 голосов
/ 09 августа 2011

Во-первых, я очень новичок во всех формах javascript, особенно во всех удаленно AJAX.Тем не менее, в течение последнего дня мне удалось закодировать скрипт, который динамически обновляет один div и заменяет его содержимым div на другой странице.

Проблема, однако, заключается в том, что некоторые из моихдругие скрипты не работают в обновленном контенте ajax.Самым важным из которых является «colorbox».

Я провел несколько часов этим вечером, исследуя это, и вижу множество вещей, касающихся .load, .live ... обновления DOM при обновлении и т.д ... и т. Д.... Но, честно говоря, большая часть этого сейчас идет мне на ум, и я не знаю, с чего начать с точки зрения его интеграции с имеющимся у меня кодом.

Мой код обновления Ajax выглядит так:следует (мои извинения, если я не использовал передовой опыт, это была моя первая попытка): - 

$(function()  {

$(".artist li.artist").removeClass("artist").addClass("current_page_item");
$("#rightcolumnwrapper").append("<img src='http://www.mywebsite.com/wp-content/images/ajax-loader.gif' id='ajax-loader' style='position:absolute;top:400px;left:190px;right:0px;margin-left:auto;margin-right:auto;width:100px;' />");

var $rightcolumn = $("#rightcolumn"),       
    siteURL = "http://" + top.location.host.toString(),     
    hash = window.location.hash,
    $ajaxSpinner = $("#ajax-loader"),
    $el, $allLinks = $("a");
            $ajaxSpinner.hide();


$('a:urlInternal').live('click', function(e) { 
    $el = $(this);
    if ((!$el.hasClass("comment-reply-link")) && ($el.attr("id") != 'cancel-comment-reply-link')) {         
        var path = $(this).attr('href').replace(siteURL, '');
        $.address.value(path);
        $(".current_page_item").removeClass("current_page_item");
        $allLinks.removeClass("current_link");
        $el.addClass("current_link").parent().addClass("current_page_item");
        return false;
    }

    e.preventDefault();

});  

$.address.change(function(event) {      
    $ajaxSpinner.fadeIn();
    $rightcolumn.animate({ opacity: "0.1" })
    .load(siteURL + event.value + ' #rightcolumn', function() {
        $ajaxSpinner.fadeOut();
        $rightcolumn.animate({ opacity: "1" });
    });
});});

Я надеялся, что кто-то может быть достаточно любезен, чтобы показать мне, какие модификации мне нужно будет сделатьк приведенному выше коду, чтобы загрузить colorbox, когда содержимое #rightcolumn было обновлено.

Есть также вторая часть этого вопроса.Мои ссылки на сами изображения теперь также обрабатываются хэштегом из-за приведенного выше кода, который, в свою очередь, будет препятствовать правильной загрузке самих изображений в палитре цветов, которую я должен представить.Как я могу предотвратить создание этих изображений и просто сохранить их стандартный URL-адрес.Я только хочу, чтобы приведенный выше код влиял на мои внутренние навигационные ссылки, если это вообще возможно.

Большое спасибо, ребята.Я с нетерпением жду ваших ответов.

Ответы [ 2 ]

1 голос
/ 24 января 2012

Используйте $('selector').delegate(), это наблюдает за DOM 'селектора', а .live() устарело.

Используйте это, чтобы посмотреть ваши элементы И запустить инициализацию colorbox.Таким образом, colorbox не зависит от элемента DOM, а наоборот. 

$("body").delegate("a[rel='lightbox']", "click", function (event) {
                    event.preventDefault();
                    $.colorbox({href: $(this).attr("href"),
                            transition: "fade",
                            innerHeight: '515px',
                            innerWidth: '579px',
                            overlayClose: true,
                            iframe: true,
                            opacity: 0.3});});

Это должно решить вашу проблему и протестировано в разных браузерах.[Rel = 'lightbox'] в закрытии делегата - это ссылка на любую ссылку, по которой вы щелкаете, чтобы запустить colorbox, независимо от того, был ли он загружен с исходным DOM или с помощью запроса AJAX и был добавлен в DOMв прямом эфире.то есть: любой тег, подобный этому: 

<a rel='lightbox' href="http://some.website.com">Launch Colorbox</a>
1 голос
/ 17 августа 2011

Это большой код для обзора, поэтому я сосредоточусь сначала на концептуальной стороне вещей.Может быть, вы дадите несколько подсказок ...

Звучит так, будто при загрузке контента через Ajax DOM изменяется.Не беспокойтесь, это то, что мы ожидаем.Однако скрипты, загруженные до вызовов Ajax, могут испытывать трудности, если они связаны с элементами, которых не было во время загрузки страницы, или их больше нет.

Функция JQuery live является одним из решений этой проблемы.Вместо привязки к конкретному элементу (или совокупности элементов) в определенный момент времени live позволяет указать привязку к элементу (или совокупности) элементов без учета того, когда они появляются в DOM (если вообще когда-либо).

ColorBox, однако, по умолчанию использует ванильные аннотации, которые полностью удалены, и, я полагаю, использует классическую привязку DOM - то есть элементы должны присутствовать во время привязки.(Поскольку вы не показываете свой вызов ColorBox, я не могу понять, как вы его используете.)

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

...