0
AjaxとFancybox.jsフォトビューアを一緒に使用する際に問題が発生しています。Ajax、html5、Fancybox.js
私はウェブサイトをハイパーリンク付きの標準ナビゲーションを備えたウェブ1.0として最初に設定しました。
html5ブラウザの場合、私はウェブ2.0体験を作成するjavascriptを使用しています。
JavaScriptが最初にハイジャックすると、HTMLの構文解析を行うPHPスクリプトを呼び出すXMLHttpRequestを作成し、置き換えるhtmlの部分だけを返すリンクonclickイベントがハイジャックされます。私はpushStateとpopStateを使って、前後のボタンを機能させています。
検索エンジンのスパイダーまでのリンクが標準HTMLページへの標準リンクにすぎないため、SEOを含むWeb 1.0のすべての利点に堪えながら、Ajax効果を生み出しています。
問題点は、Fancybox.jsを使用して写真を表示し、標準のURLでページにアクセスするとうまく動作しますが、AjaxスクリプトでHTMLにアクセスすると問題が発生することです。ここで
は、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);
});
}
と、彼女はそれがページのheadセクションにある
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("a[rel=example_group]").fancybox({
'overlayShow' : false,
'cyclic' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
//]]>
</script>
、Fancybox.jsを呼び出すスクリプトです。
フォトリンクを持つhtmlがAjaxを介して取り込まれると、fancybox.jsを呼び出すスクリプトは含まれません。私は別の場所でそれを呼び出すことを試みたが、何も動作していないようだ。誰にもアイデアはありますか？