我正在编写一个灯箱/厚箱画廊风格的程序，我需要发送用户单击的内容以在灯箱中加载正确的内容。
这是我的文件:
show-hide-lightbox.js - Ajax Request Loading the content o lightbox.jsp (which I don't remember how to pass variables to)
function showLightbox(){
var ajaxObject = null;
if(window.XMLHttpRequest){
ajaxObject = new XMLHttpRequest();
}else if(window.ActiveXObject){
ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");
}
if(ajaxObject != null){
ajaxObject.open("GET","lightbox.jsp",true);
ajaxObject.send();
}else{
alert("You do not have a compatible browser.")
}
ajaxObject.onreadystatechange = function(){
if (ajaxObject.readyState == 4 && ajaxObject.status == 200){
document.getElementById("ajaxResult").innerHTML = ajaxObject.responseText;
}
};
}
function hideLightbox(){
document.getElementById("commentFormBG").style.display = "none";
document.getElementById("commentFormFG").style.display = "none";
}
lightbox.jsp(要加载到 html 上的 div 中的内容)
<div id="commentFormFG">
<div class="commentFormTitle">Title of Lightbox</div>
</div>
test.html - 只是一个包含 div id=ajaxResult 供 ajax 加载的页面
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id=ajaxResult></div>
<img onclick="showLightbox()" src="http://www.swanderphotography.com/wp-content/uploads/2013/07/2013Jul06-9917.jpg">
<script type="text/javascript" src="show-hide-lightbox.js"></script>
</body>
</html>
和一个最小的样式表
#commentFormBG{
width: 100%;
height: 100%;
background-color: #000;
opacity: .8;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
#commentFormFG{
width: 80%;
height: 80%;
background-color: #fcfcfc;
position: absolute;
top: 10%;
left: 10%;
}
我想发送点击图像的地址，但我的 php 已经变得非常生锈，我不知道最简单的方法是什么。理想情况下，您单击缩略图并加载图像的大版本。
最佳答案
LightBox Gallery 您可以实际使用 FancyBox 插件 http://fancyapps.com/fancybox/
关于php - 如何使用 AJAX 在灯箱中加载内容，该内容取决于用户点击的触发器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17768186/