1

我正在编写一个 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>

和一个最小的样式表

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

4

1 回答 1

0

灯箱库您可以实际使用 FancyBox 插件 http://fancyapps.com/fancybox/

于 2013-08-02T11:08:35.087 回答