Question

我正在编写Lightbox / Thickbox图库样式程序，我需要发送用户点击的内容以在灯箱中加载正确的内容。

以下是我的文件：

show-hide-lightbox.js - Ajax请求加载内容o lightbox.jsp（我不记得如何将变量传递给）

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>

最小的StyleSheet

#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已经生锈了我不知道最简单的方法是什么。理想情况下，您单击缩略图并加载大图像版本。

Answer 1

LightBox图库您实际上可以使用FancyBox插件 {{3P>

如何使用AJAX加载灯箱中的内容，该内容取决于用户点击的触发器

1 个答案: