如何将内容加载到类似灯箱的叠加层中
Posted
技术标签:
【中文标题】如何将内容加载到类似灯箱的叠加层中【英文标题】：How to load content into lightbox-like overlay 【发布时间】：2015-01-16 06:29:35 【问题描述】：我正在制作一个用 php 和 mysql 加载图像的画廊。 现在我正在尝试合并一个类似灯箱的叠加层，但具有特定的、可编辑的 html。 因此，我可以添加通过 php 和 mysql 加载的我想要显示的元素（图像、标题、描述、扩展描述）。
我在谷歌上搜索了一堆灯箱，但它们并不是我真正想要的，除此之外，它必须获得许可才能用于商业用途。 （所以我想自己做，如果可能的话）
我当前的html代码，由php和mysql加载：
<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>
基本上，我希望在单击“阅读更多”时加载叠加层，但带有特定图像的特定标题、描述等。
但问题是，我不确定如何编写代码。 有人对如何处理这个问题有建议吗？
-编辑- 所以基本上我正在寻找的是一种将通过 - 例如 - HREF 链接从我的数据库中检索到的 php 数据传输到叠加层的方法，以便在单击图像时，正确的信息（标题，描述等）显示。
我正在努力传输数据，而不是制作实际的 HTML 覆盖。希望一切都清楚。
-编辑 2- 让颜色框 jquery 工作...http://imandragrafie.nl/demo/ontwerp_test.php 但现在我需要将信息加载到框中:)
不要花式框，我不能将花式框用于商业网站。
【问题讨论】：
好的.. 如果我理解了，请告诉我... 您想单击一个链接，该链接必须转到后端并获取数据库中的其他图像，然后在灯箱中显示。 . 对吗？ 嗯，有点。当您单击链接（这是一个已回显的 php 元素）时，您必须看到包含属于该链接的特定信息（例如图像的名称和描述）的覆盖。如果您单击另一个链接，您将获得包含属于该图像的信息的叠加层，依此类推。 【参考方案1】：您可以将各自的数据保存在json中，并可以在点击read more时显示如下：
下面是小的示例代码，其中我在jsonObj var 中有数据，并将相应的数据存储在var html 元素中，然后我有console.log(html) 来显示该数据。您可以根据需要修改代码以从数据库中获取数据。
HTML 代码：
<div class='view view-tenth'>
<img src='' alt='' />
<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='' />
<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='' />
<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>
jQuery 代码：
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);
);
);
您可以将此html 变量作为灯箱窗口中的数据传递。
希望这会有所帮助！
【讨论】：
好的，在我的代码中有你的 jquery（我在脚本标签中用 php 回显这些行，所以我得到了整个数组，希望这不会引起问题？），但怎么能我得到了灯箱中的 html？ 顺便装了colorbox：只需要知道如何将信息放入box即可。 （附带问题：如果描述较长，例如10行的段落，是否可以显示在图像旁边或下方而不是上方？使用示例3的设计） 有两种方法： 1 - 您可以将html 中的内容附加到页面中的一个div中，并使用下面的colorbox方法 $(".inline").colorbox(inline:true,宽度：“50%”）；或 2 - 您可以使用以下代码直接调用 html 变量： // 使用 HTML 直接调用 $.colorbox(html:"Welcome
"); 不确定我是否遵循（对 jQuery 不太熟悉）。你能给个小提琴吗？现在我得到了这个：imandragrafie.nl/demo/ontwerp_test.php 你看不到 php 代码，但我不需要，对吧？既然一切都加载到 jquery 中了？ 好的，它已经到了，但是颜色框覆盖非常非常小，关闭时它只是重定向到#cboxOverlay div。图像并没有消失。另外，我缺少颜色框控件（上一个，下一个，角落的 x 而不是底部的“关闭”）。我不得不禁用颜色框 css，否则它会一团糟。（只是一个 [垂直滚动] 图像栏，但没有关闭按钮或任何东西）请帮忙。链接保持不变：imandragrafie.nl/demo/ontwerp_test.php【参考方案2】：如果你愿意，你可以用纯 CSS 来做到这一点。下面是一个示例。
http://codepen.io/fauverism/pen/pvvKKL
CSS
/* Container */
body
font-family: Helvetica, Arial, sans-serif;
a
text-decoration: none;
.modal
/* Overlay page content */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;
/* Transition opacity on open */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
/* Hide for now */
opacity: 0;
pointer-events: none;
/* Show modal */
.modal:target
opacity: 1;
pointer-events: auto;
/* at time of writing (Feb 2012), pointer-events not supported by Opera or IE */
/* Content */
.modal > div
width: 500px;
background: #fff;
position: relative;
margin: 10% auto;
/* Default minimise animation */
-webkit-animation: minimise 500ms linear;
-moz-animation: minimise 500ms linear;
animation: minimise 500ms linear;
/* Prettify */
padding: 30px;
border-radius: 7px;
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
background: #fff;
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
background: linear-gradient(#fff, #ccc);
text-shadow: 0 1px 0 #fff;
/* Override animation on modal open */
.modal:target > div
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
animation-name: bounce;
.modal h2
font-size: 36px;
padding: 0 0 20px;
@-webkit-keyframes bounce
0%
-webkit-transform: scale3d(0.1,0.1,1);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
55%
-webkit-transform: scale3d(1.08,1.08,1);
box-shadow: 0 10px 20px rgba(0,0,0,0);
75%
-webkit-transform: scale3d(0.95,0.95,1);
box-shadow: 0 0 20px rgba(0,0,0,0.9);
100%
-webkit-transform: scale3d(1,1,1);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
@-webkit-keyframes minimise
0%
-webkit-transform: scale3d(1,1,1);
100%
-webkit-transform: scale3d(0.1,0.1,1);
@-moz-keyframes bounce
0%
-moz-transform: scale3d(0.1,0.1,1);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
55%
-moz-transform: scale3d(1.08,1.08,1);
box-shadow: 0 10px 20px rgba(0,0,0,0);
75%
-moz-transform: scale3d(0.95,0.95,1);
box-shadow: 0 0 20px rgba(0,0,0,0.9);
100%
-moz-transform: scale3d(1,1,1);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
@-moz-keyframes minimise
0%
-moz-transform: scale3d(1,1,1);
100%
-moz-transform: scale3d(0.1,0.1,1);
@keyframes bounce
0%
transform: scale3d(0.1,0.1,1);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
55%
transform: scale3d(1.08,1.08,1);
box-shadow: 0 10px 20px rgba(0,0,0,0);
75%
transform: scale3d(0.95,0.95,1);
box-shadow: 0 0 20px rgba(0,0,0,0.9);
100%
transform: scale3d(1,1,1);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
@keyframes minimise
0%
transform: scale3d(1,1,1);
100%
transform: scale3d(0.1,0.1,1);
/* Modal close link */
.modal a[href="#close"]
position: absolute;
right: 0;
top: 0;
color: transparent;
/* Reset native styles */
.modal a[href="#close"]:focus
outline: none;
/* Create close button */
.modal a[href="#close"]:after
content: 'X';
display: block;
/* Position */
position: absolute;
right: -10px;
top: -10px;
width: 1.5em;
padding: 1px 1px 1px 2px;
/* Style */
text-decoration: none;
text-shadow: none;
text-align: center;
font-weight: bold;
background: #000;
color: #fff;
border: 3px solid #fff;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
.modal a[href="#close"]:focus:after,
.modal a[href="#close"]:hover:after
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
.modal a[href="#close"]:focus:after
outline: 1px solid #000;
/* Open modal */
a.openModal
margin: 1em auto;
display: block;
width: 200px;
background: #ccc;
text-align: center;
padding: 10px;
border-radius: 7px;
background: #fff;
background: -moz-linear-gradient(#fff, #ddd);
background: -webkit-linear-gradient(#fff, #ddd);
background: -o-linear-gradient(#fff, #ddd);
background: linear-gradient(#fff, #ddd);
text-shadow: 0 1px 0 #fff;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
a.openModal:hover,
a.openModal:focus
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
background: linear-gradient(#fff, #ccc);
HTML
<aside id="example" class="modal">
<div>
<h2>Modal box</h2>
<a href="#close" title="Close">Close</a>
</div>
</aside>
<a href="#example" class="openModal">Open</a>
【讨论】：
你能做个小提琴吗？因为当我测试你的时，它除了显示一个空白页之外什么都不做:) 此外，我已经查看了颜色框，但是如何在不制作（不必要的）额外“覆盖”div 的情况下获取图像信息？ 好的，那么我就有了叠加层。但是如何获取叠加层中的内容？ 您有兴趣不在 php 中执行此操作吗？ Angular 将是一个具有相当简单数据绑定的选项 好吧，我对 Angular 一无所知，但如果这是唯一可行的选择。我宁愿有 jquery / php / css/ html 解决方案【参考方案3】：这是我的建议。
总结一下……你有一个画廊页面，上面有图片。它们链接到包含更多图片信息的叠加层。
我用过类似的东西：http://fancybox.net/ 尝试页面上的谷歌地图链接..它看起来像这样：
<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 页面随即显示在 Overlay 中。
【讨论】：
你会做一个小提琴吗？这样我会更好地理解。【参考方案4】：编辑后，我认为您需要某种 ajax 来获取数据并将其放入叠加层中。
您可以在 jquery 中使用 ajax 简单地做到这一点。这样的事情应该可以工作：
$( "#doit" ).click(function()
$.ajax(
url: "/get/data.php",
context: document.body
).done(function()
$( this ).addClass( "done" );
);
);
阅读更多关于 jquery 中的 ajax here
更新在 cmets 之后。
你的
/get/data.php
可以返回一个 json 对象或（准备显示）html。
在第一种情况下，您必须将使用 javascript 的数据结构转换为 html。
在第二种情况下，您可以在 php（服务器）端执行此操作。
【讨论】：
我对 ajax 不是很熟悉，你能用它来获取多个“数组”（没有更好的术语）的数据吗？如果你有这个，你只需将它加载到覆盖中？ 您的 /get/data.php 可以返回一个 json 对象或准备显示 html。在第一种情况下，您必须将使用 javascript 的数据结构转换为 html。在第二种情况下，您可以在 php 方面这样做。 你能做一个小提琴之类的吗？因为我不熟悉ajax，也不知道怎么把信息放在那里..【参考方案5】：我会首先使用 php 将您想要在灯箱中分离的所有内容加载到不同的 div 中。然后，我会将灯箱部分的所有 html css 默认为“显示：无；”。然后，您可以使用 jquery 来制作它，以便您当前悬停在（或单击 ..etc）上的任何内容都从“display：none”切换到“display：block”。
所以总结一下。我将首先对所有内容/html 进行编码，所有可能的视图都使用 php。然后我会使用 jQuery 来控制视图，因此您只能根据您单击/悬停的内容看到您想要的视图。这种方法我用过很多次，对于小型项目来说效果很好。
【讨论】：
但这意味着我将拥有与照片一样多的“覆盖”div。似乎可能有一个更简单、更少代码的解决方案，也许使用 GET 或其他东西？还是我看错了？ 如果您使用的是简单的相同 html。只需将图像 src、名称和描述放入一个数组中，然后创建一个循环遍历它。这样循环就可以完成工作，您只需编写一次 html。 你能给我举个例子吗？因为我不完全明白它是如何工作的哈哈。在我看来，它只会循环遍历我不想要的信息和图像：P 是的，这绝对会遍历信息和图像。因此，如果您不想追求这个想法，那么这绝对不是要走的路。 不，那不是要走的路。我想要一个解决方案，其中基于 - 例如 - href 链接检索内容（即使用从数据库中检索的 php 变量“制作”，以便每个“图像”都有不同的内容在叠加层中，以便为正确的图像显示正确的信息。希望这是有道理的！【参考方案6】：你可以做的是： - 添加背景（灰色透明背景） - 在屏幕中间添加一个框 - 在方框内放置图片、标题和说明
这是 JSFiddle 上的一个示例：http://jsfiddle.net/4tu9Lotg/
<body>
<div class="backdrop"></div>
<div class="box">
<center><h1>Title</h1></center>
<img class="boximg" src="http://free-hq-wallpapers.com/wp-content/uploads/2009/07/New-York-Sunset-1920x1080.jpg"/>
</div>
</body>
和
.backdrop
position: absolute;
top: 0px;
left: 0px;
background-color: #000;
opacity: .5;
height: 100%;
width: 100%;
.box
position: absolute;
background-color: white;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 13px;
.boximg
position: absolute;
top: 16%;
left: 2%;
width: 96%;
height: 80%;
【讨论】：
好吧，那我就有覆盖了，但是如何在其中获取特定内容？因为这取决于点击了哪个图片链接。以上是关于如何将内容加载到类似灯箱的叠加层中的主要内容，如果未能解决你的问题，请参考以下文章