Ajax, html5, Fancybox.js - PullRequest
Новая
       15

Ajax, html5, Fancybox.js

0 голосов
/ 15 ноября 2011

У меня проблемы с совместным использованием Ajax и Fancybox.js для просмотра фотографий.

У меня сначала есть веб-сайт, настроенный как веб 1.0 со стандартной навигацией с гиперссылками.

, но для браузеров html5 я использую javascript, который создает опыт web 2.0.

Сначала javascript перехватывает событие links onclick, которое создает XMLHttpRequest, который вызывает скрипт php, который анализирует html и отправляет обратно только ту часть html, которую я хочу заменить. Я использую pushState и popState, чтобы заставить работать кнопки «назад» и «вперед».

Он отлично работает, он создает эффект Ajax, сохраняя при этом все преимущества веб 1.0, включая SEO, потому что ссылки, касающиеся пауков поисковых систем, являются просто стандартными ссылками на стандартные HTML-страницы.

Проблема в том, что одна из страниц использует Fancybox.js для показа фотографий, она прекрасно работает, когда к странице обращаются через стандартный URL, но когда доступ к html осуществляется через скрипты Ajax, если она нарушается.

Вот код для Ajax, 

if (history.pushState) {

function changeContent(url) {
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            document.getElementById('content').innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET", "getContents.php?url=" + url, true);
    xmlhttp.send();
}





$(document).ready(function() {
    var elems = null,
        links = null,
        link = null,
        i;

    elems = document.getElementById('nav');
    links = elems.getElementsByTagName('a');

    if (links) {
        for (i = 0; i < links.length; i++) {
            links[i].addEventListener("click", function(e) {
                    url = $(this).attr("href");
                    var pathArray = window.location.pathname.split( '/' );
                    var n = pathArray.length;
                    changeContent(url);
                    history.pushState(null, null, url);
                    e.preventDefault();

                    var urlstr = window.location,
                    index = /index/g,
                    program = /program/g,
                    photos = /photos/g,
                    testimonials = /testimonials/g,
                    about = /about/g,
                    contact = /contact/g;

                    if (program.test(urlstr)){
                        changeCurrentPage('#program');
                        document.title = "Our Programs Kolibri Daycare";

                    }else if (photos.test(urlstr)){
                        changeCurrentPage('#photos');
                        document.title = "Photos Kolibri Daycare";
                        slideShow();

                    }else if (testimonials.test(urlstr)){
                        changeCurrentPage('#testimonials');
                        document.title = "Tesimonials Kolibri Daycare";

                    }else if (about.test(urlstr)){
                        changeCurrentPage('#about');
                        document.title = "About Kolibri Daycare";

                    }else if (contact.test(urlstr)){
                        changeCurrentPage('#contact');
                        document.title = "Contact Kolibri Daycare";
                    }else {
                        changeCurrentPage('#home');
                        document.title = "Kolibri Daycare";
                    }
                }, false);
            }
        }

        window.setTimeout(function() {
        window.addEventListener("popstate", function(e) {

        var pathArray = window.location.pathname.split( '/' );
        var n = pathArray.length;
        if (pathArray[n-1]){
            changeContent(pathArray[n-1]);
        }else {
            changeContent('index.html');
        }
    }, false);
    }, 1);
});
}

и она - скрипт, который вызывает Fancybox.js, 

 <script type="text/javascript">
//<![CDATA[
    $(document).ready(function() {
        $("a[rel=example_group]").fancybox({
            'overlayShow'   : false,
            'cyclic'        : true,
            'transitionIn'      : 'elastic',
            'transitionOut'     : 'elastic'
        });
    });
//]]>
</script>

Он находится в разделе заголовка страницы.

Когда html, содержащий ссылки на фотографии, вводится через Ajax, сценарий, который вызывает fancybox.js, не включается. Я пытался назвать его в разных местах, но ничего не получается. У кого-нибудь есть идеи?

1 Ответ

0 голосов
/ 16 ноября 2011

Вам необходимо повторно инициализировать fancybox для новых элементов, добавленных из ajax.Я не уверен, почему вы не просто обновляете всю страницу до HTML5 и используете некоторые функции ajax, предоставляемые jQuery, но я думаю, что после этой строки должна быть вставлена ​​реинициализация (не проверено!): 

document.getElementById('content').innerHTML = xmlhttp.responseText;
$('#content').find("a[rel=example_group]").fancybox();
...