我目前正在编码一个画廊,该画廊到目前为止一直将AJAX和Javascript与xml文件结合起来以加载所有图像。现在,我进入了有趣的部分,我单击图像进入内部画廊。 (在第一页上,它们加载每个会话的一个图像,当按下一个图像时,它将继续显示该会话的其余图像。)
我在AJAX上遇到的问题(我也肯定对此有一个完善的技巧!)是,当页面重新加载时,它自动返回到会话索引,因为没有URL更改。
到目前为止,我现在所做的是将一个javascript函数放在一个文档中,该文档仅加载图库索引。这工作完美。
在另一个文件中,我得到的代码几乎相同,但是它加载了加载其余会话图像的函数,但我无法正常工作。
这是应该加载特定会话图像的脚本。
<script type="text/javascript">
window.onload = displayGallery(<?php echo $_GET['session']; ?>);
</script>
<div id="gallery">
</div>
当我仅使用JavaScript和链接中的“加载”功能时,它就可以正常工作,但随后出现了重新加载页面的问题。现在,我只是用PHP包含此文件,并使用$ _GET变量“ displayGallery()”
function displayGallery(sessionAtt)
因此,为弄清楚这一点,我在解释问题,我需要帮助,以便在从URL中获取必要的变量后,使displayGallery(sessionAtt)实际运行。
我非常喜欢Javascript。到现在为止,大多数脚本都是用php完成的。
编辑:
稍微解释一下该网站:这是我为我的一个朋友制作的画廊。除了她和她的所有子页面(“开始”,“图库”,“关于”等)之外,其他任何人都没有登录名,是通过php“ include”加载的。
XML:
<gallery>
<session>
<sessionName>Beauty</sessionName>
<path>gallery/beauty/</path>
<item>
<file>_DSC2331.jpg</file>
<name>Picture 1</name>
</item>
<item>
<file>_DSC2339.jpg</file>
<name>Picture 2</name>
</item>
<item>
<file>_DSC2350.jpg</file>
<name>Picture 3</name>
</item>
<date>2011-08-03</date>
</session>
<session>
<sessionName>Red</sessionName>
<path>gallery/red/</path>
<item>
<file>_MG_6227-web.jpg</file>
<name>Picture 1</name>
</item>
<item>
<file>_MG_6235-web.jpg</file>
<name>Picture 2</name>
</item>
<item>
<file>_MG_6240-cropped-web.jpg</file>
<name>Picture 3</name>
</item>
<date>2011-08-03</date>
</session>
</gallery>
js:
function displayGallery(sessionAtt)
{
var xmlDoc = loadDoc("gallery/gallery.xml");
var sessions = xmlDoc.getElementsByTagName("session");
var txt = getGallery(sessions, sessionAtt);
document.getElementById("gallery").innerHTML = txt;
}
function getGallery(sessions, sessionAtt) {
var items = null,
i = 0,
j = 0,
sessionName = "",
link = "",
img = "",
path = "",
file = "",
txt = "";
for (i = 0; i < sessions.length; i++) {
sessionName = sessions[i].getElementsByTagName("sessionName")[0].childNodes[0].nodeValue;
if(sessionName == sessionAtt)
{
items = sessions[i].getElementsByTagName("item");
path = sessions[i].getElementsByTagName("path")[0].childNodes[0].nodeValue;
for (j = 0; j < items.length; j++) {
file = items[j].getElementsByTagName("file")[0].childNodes[0].nodeValue;
link = '<a href="' + path + file + '" rel="lightbox[' + sessionName + ']" title="' + sessionName + '">';
img = '<img src="' + path + file + '" class="thumb" onclick="displayImage();" /></a>';
txt += link + img;
}
}
}
return txt;
}
我试图使用功能中设置的sessionAtt运行脚本,并且该脚本可以正常工作。
window.onload = displayGallery;
但是当更改为
window.onload = displayGallery('Red');
手动和与PHP ...什么都没有。
最佳答案
您的代码对我来说很好。我唯一不同的方式是使用<body onload="displayGallery('Red')">
而不是window.onload = displayGallery('Red');
正如Martin所指出的那样,使用window.onload
尝试在页面加载之前找到<div id='gallery'>
,这将导致错误:document.getElementById(“ gallery”)为null
使用<body onload="displayGallery('Red')">
等待页面完成加载,然后再调用displayGallery。