我正在制作一个画廊，用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>

基本上，我希望在单击"阅读更多"时加载叠加层，但带有该特定图像的特定标题、描述等。

但问题是，我真的不确定如何编码。有人对如何处理这个问题有建议吗？

-编辑-
所以基本上我正在寻找的是一种将从我的数据库中检索到的 php 数据（例如 HREF 链接）传输到叠加层的方法，以便在单击图像时显示正确的信息（标题、描述等）。

我正在努力传输数据，而不是制作实际的 HTML 覆盖。希望能清除一切。

编辑2-
让颜色框jquery工作...http://imandragrafie.nl/demo/ontwerp_test.php 但是现在我需要将信息加载到框中:)

请不要花哨的盒子

，我不能在商业网站上使用花哨的盒子。

您可以将

各自的数据保存在 json 中，并在单击read more时显示它，如下所示：

下面是一个小示例代码，其中我在 var 中有数据jsonObj并将相应的数据存储在元素var html然后我必须console.log(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>

j查询代码：

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变量作为数据在灯箱窗口中传递。

希望这有帮助！

如果你愿意，你可以用纯 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>

这是我

的建议。

总结一下...您有一个带有图片的图库页面。它们链接到一个叠加层，其中包含有关图片的更多信息。

我曾经做过类似的事情：http://fancybox.net/尝试页面上的谷歌地图链接..看起来像这样：

<a class="various iframe" href="http://maps.google.com/?output=embed&amp;f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&amp;hl=lv&amp;ll=51.504155,-0.117749&amp;spn=0.00571,0.016512&amp;sll=56.879635,24.603189&amp;sspn=10.280244,33.815918&amp;vpsrc=6&amp;hq=London+Eye&amp;radius=15000&amp;t=h&amp;z=17">Google maps (iframe)</a>

但是您的叠加链接会转到另一个页面，该页面仅显示有关 picure 的信息，如下所示：

<a class="various iframe" href="/mygallerie/picturedetails.php?id=124"><img ... ></a>

因此，在我的解决方案中，您有一个PHP页面，其中列出了图片并将它们链接到带有id的覆盖层。

然后，第二个 PHP 页面将显示在叠加层中。

编辑后，我认为您需要某种 ajax 来获取数据并将其放入覆盖层中。

你可以在jquery中使用ajax简单地做到这一点。这样的事情应该有效：

$( "#doit" ).click(function() {
  $.ajax({
    url: "/get/data.php",
    context: document.body
  }).done(function() {
  $( this ).addClass( "done" );
  });
});

在此处阅读有关 jquery 中的 ajax 的更多信息

评论后更新。

你

/get/data.php

可以返回 JSON 对象或（准备显示）HTML。

在第一种情况下，您必须使用javascript将数据结构转换为html。

在第二种情况下，您可以在php（服务器）端执行此操作。

我会首先使用 php 将您想要在灯箱中分离的所有内容加载到不同的div 中。然后，我将灯箱部分的所有html css默认为"显示：无;"。然后你可以使用jquery来制作你当前悬停在上面的任何东西（或点击..等）从"显示：无"切换到"显示：块"。

所以总结一下。我会先对所有内容/html 进行编码，并使用 php 编写所有可能的视图。然后我会使用 jQuery 来控制视图，这样你只能看到你想要的视图，这取决于你点击/悬停的内容。我经常使用这种方法，它对于小型项目表现很好。

你可以做的是：- 添加背景（灰色透明背景）- 在屏幕中间添加一个框- 在框中放置图像，标题和描述

下面是 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%;
   }

如何将内容加载到类似灯箱的叠加层中

How to load content into lightbox-like overlay

http://codepen.io/fauverism/pen/pvvKKL

.CSS

.HTML