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

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

转载作者：行者123 更新时间：2023-11-28 09:00:48

25

4

我正在编写一个灯箱/厚箱画廊风格的程序，我需要发送用户单击的内容以在灯箱中加载正确的内容。

这是我的文件:

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/

25

4

0

文章推荐： javascript - 通过 Javascript 定位 Django 模型中的动态内容

文章推荐： javascript - jQuery:$.on 应该如何工作？

文章推荐： ios - CIContext 绘制图像上的 EXC_BAD_ACCESS

php - 在 PHP 中加/除数字
我正在开发一个需要能够平均三个数字的 Facebook 应用程序。但是，它总是返回 0 作为答案。这是我的代码: $y = 100; $n = 250; $m = 300; $number = ($y
javascript - 我需要将一个整数除以 12，如果结果是 float ，则在 javascript 中加 1
我只是无法弄清楚这一点，也找不到任何对我来说有意义的类似问题。我的问题:我从数据库中提取记录，并在我的网页上以每个面板 12 条的倍数显示它们。因此，我需要知道有多少个面板可以使用 JavaScrip

首页

博学

6Ren·AI

商城

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