Php 如何将内容加载到类似lightbox的覆盖中
我正在制作一个用php和mysql加载图像的图库。 现在，我正尝试合并一个类似lightbox的覆盖，但是要使用特定的、可编辑的html。 因此，我可以添加我想要显示的元素（图像、标题、描述、扩展描述），这些元素通过php和mysql加载 我在谷歌上搜索了一堆灯箱，但它们并不是我真正想要的，除此之外，它还必须获得许可，以便我可以在商业上使用它。（如果可能的话，我想自己做） 我当前的html代码，由php和mysql加载：Php 如何将内容加载到类似lightbox的覆盖中,php,jquery,html,mysql,css,Php,Jquery,Html,Mysql,Css,我正在制作一个用php和mysql加载图像的图库。 现在，我正尝试合并一个类似lightbox的覆盖，但是要使用特定的、可编辑的html。 因此，我可以添加我想要显示的元素（图像、标题、描述、扩展描述），这些元素通过php和mysql加载 我在谷歌上搜索了一堆灯箱，但它们并不是我真正想要的，除此之外，它还必须获得许可，以便我可以在商业上使用它。（如果可能的话，我想自己做） 我当前的html代码，由php和mysql加载： <div class='view view-tenth'> &
<div class='view view-tenth'>
<img src='".$images['orig']."' alt='".$images['name']."' />
<div class='mask'>
<h2>".$images['model']."</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href='#' class='info'>Read More</a>
</div>
</div>
“$images['model']”
一种美妙的宁静占据了我的整个灵魂，就像这些我全心全意享受的春天的甜美早晨
因此，基本上我正在寻找的是一种将从我的数据库中检索到的php数据通过（例如）HREF链接传输到覆盖图的方法，这样当单击图像时，就会显示正确的信息（标题、描述等） 我正在努力传输数据，而不是制作实际的HTML覆盖。希望一切都会好起来 -编辑2-
使colorbox jquery正常工作。。。但现在我需要将信息加载到框中：）
没有fancybox请，我不能在商业网站上使用fancybox。如果您愿意，您可以使用纯css来实现这一点。下面是一个例子 CSS HTML
首先，我会使用php将lightbox中需要分隔的所有内容加载到不同的div中。然后，我将lightbox部分的所有html css默认为“display:none；”。然后，您可以使用jquery将当前悬停的内容（或单击..等）从“display:none”切换到“display:block” 总而言之。我将首先编写所有内容/html，并使用php编写所有可能的视图。然后，我将使用jQuery来控制视图，因此根据单击/悬停的内容，您只能看到所需的视图。我经常使用这种方法，对于小项目来说效果很好。您可以做的是： -添加背景（灰色透明背景） -在屏幕中间添加一个框 -在框内放置图像、标题和说明 下面是一个关于JSFIDLE的示例：
您可以将各自的数据保存在json中，并在单击
阅读更多内容时显示，如下所示：
下面是一个小示例代码，其中我将数据存储在jsonObj
var中，并将各自的数据存储在var html
元素中，然后我使用console.log（html）
来显示该数据。您可以根据需要修改代码以从数据库中获取数据
HTML代码：
<div class='view view-tenth'>
<img src='' alt='' width="25" height="25" />
<div class='mask'>
<h2>".$images['model']."</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href='#' class='info' data-value="img1">Read More</a>
</div>
<img src='' alt='' width="25" height="25" />
<div class='mask'>
<h2>".$images['model']."</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href='#' class='info' data-value="img2">Read More</a>
</div>
<img src='' alt='' width="25" height="25" />
<div class='mask'>
<h2>".$images['model']."</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href='#' class='info' data-value="img3">Read More</a>
</div>
</div>
var jsonObj = {
"img1":{
"id": "img1",
"image": "path/to/image1.jpg",
"title": "This is title 1",
"desc": "A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart."
},
"img2":{
"id": "img2",
"image": "path/to/image2.jpg",
"title": "This is title 2",
"desc": "A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart."
},
"img3":{
"id": "img3",
"image": "path/to/image3.jpg",
"title": "This is title 3",
"desc": "A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart."
}
}
$(function(){
$(".info").on("click", function(){
var val = $(this).data("value"),
html = "";
for(var i in jsonObj){
if(jsonObj[i].id == val){
html += "jsonObj.img1.id = " + jsonObj[i].id + "\n";
html += "jsonObj.img1.image = " + jsonObj[i].image + "\n";
html += "jsonObj.img1.title = " + jsonObj[i].title + "\n";
html += "jsonObj.img1.desc = " + jsonObj[i].desc + "\n";
}
}
console.log(html);
});
});
您可以在lightbox窗口中将此html
变量作为数据传递
希望这有帮助 编辑之后，我认为您需要某种ajax来获取数据并将其放入覆盖层
您只需在jquery中使用ajax即可。像这样的方法应该会奏效：
$( "#doit" ).click(function() {
$.ajax({
url: "/get/data.php",
context: document.body
}).done(function() {
$( this ).addClass( "done" );
});
});
阅读jquery中有关ajax的更多信息
评论后更新
你的
可以返回json对象或（准备显示）html
在第一种情况下，您必须使用javascript将数据结构转换为html
在第二种情况下，您可以在php（服务器）端执行此操作。以下是我的建议
总而言之。。。你有一个图库页面，上面有图片。它们链接到一个覆盖图，上面有关于图片的更多信息
我曾经做过类似的事情：
尝试页面上的谷歌地图链接。。看起来是这样的：
<a class="various iframe" href="http://maps.google.com/?output=embed&f=q&source=s_q&hl=en&geocode=&q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&hl=lv&ll=51.504155,-0.117749&spn=0.00571,0.016512&sll=56.879635,24.603189&sspn=10.280244,33.815918&vpsrc=6&hq=London+Eye&radius=15000&t=h&z=17">Google maps (iframe)</a>
<a class="various iframe" href="/mygallerie/picturedetails.php?id=124"><img ... ></a>
但您的覆盖链接会转到另一个页面，该页面仅显示图片的信息，如下所示：
<a class="various iframe" href="http://maps.google.com/?output=embed&f=q&source=s_q&hl=en&geocode=&q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&hl=lv&ll=51.504155,-0.117749&spn=0.00571,0.016512&sll=56.879635,24.603189&sspn=10.280244,33.815918&vpsrc=6&hq=London+Eye&radius=15000&t=h&z=17">Google maps (iframe)</a>
<a class="various iframe" href="/mygallerie/picturedetails.php?id=124"><img ... ></a>
因此，在我的解决方案中，您有一个PHP页面，其中列出了图片，并使用id将它们链接到覆盖
第二个PHP页面随后显示在覆盖图中。但这意味着我的“覆盖”div与我的photo div一样多。似乎有一个更简单、更少代码的解决方案，也许是GET或其他什么？或者我看错了吗？如果你使用的是相同的html，那就简单了。只需将图像src、名称和描述放入一个数组中，并创建一个for循环来遍历它。这样循环就完成了工作，你只需要写一次html。你能给我举个例子吗？因为我不太明白这是怎么回事，哈哈。听起来它只是在信息和图像之间循环，这是我不想要的：PYes，这绝对是在信息和图像之间循环。因此，如果你不想追求这个想法，那么这肯定不是你要走的路。不，那不是你要走的路。我希望有一个解决方案，其中的内容是检索的基础上-例如-href链接（这是由从数据库检索的php变量“生成”的，因此每个“图像”在覆盖中都有不同的内容，以便为正确的图像显示正确的信息。希望这是有意义的！好吧，那么我会有覆盖，但如何在其中获取特定内容？因为这取决于哪个图像链接是clic你能做一把小提琴吗？因为当我测试你的小提琴时，它除了显示一个空白页之外什么都不做：）此外，我已经看过了colorbox，但是如何在那里获得图像信息而不制作（不必要的）额外的“overlay”div？好的，那么我就有了overlay..但是如何在overlay中获取内容？你有兴趣不在php中这样做吗？Angular是一个非常容易绑定数据的选项好吧，我对Angular一无所知，但是如果这是唯一有效的选项..我宁愿使用jquery/php/css/html解决方案
/get/data.php
<a class="various iframe" href="http://maps.google.com/?output=embed&f=q&source=s_q&hl=en&geocode=&q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&hl=lv&ll=51.504155,-0.117749&spn=0.00571,0.016512&sll=56.879635,24.603189&sspn=10.280244,33.815918&vpsrc=6&hq=London+Eye&radius=15000&t=h&z=17">Google maps (iframe)</a>
<a class="various iframe" href="/mygallerie/picturedetails.php?id=124"><img ... ></a>