gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:00:48 25 4
gpt4 key购买 nike

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

这是我的文件:

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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com