我正在制作一个用PHP和mysql加载图像的画廊 . 现在我正在尝试合并类似灯箱的叠加层，但具有特定的，可编辑的html . 所以，我可以添加我想要显示的元素（图像， Headers ，描述，扩展描述），这些元素通过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>

基本上，我希望在点击“阅读更多”时加载叠加层，但是具有该特定图像的特定 Headers ，描述等 .

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

-edit-
所以基本上我正在寻找的是一种方法来传输从我的数据库中检索的php数据，例如通过HREF链接到覆盖，这样当点击图像时，正确的信息（ Headers ，显示描述等） .

我正在努力转移数据，而不是制作实际的HTML叠加层 . 希望清除一切 .

-edit 2-
得到了colorbox jquery ... http://imandragrafie.nl/demo/ontwerp_test.php但现在我需要将信息加载到框中:)

No fancybox 拜托，我不能用商业网站的花式盒子 .

6 回答

您可以在json中保存各自的数据，并在点击 read more 时显示，如下所示：

下面是一个小示例代码，其中我在 jsonObj var中有数据并在 var html 元素中存储相应的数据，然后我有 console.log(html) 来显示该数据 . 您可以根据需要修改代码以从数据库中获取数据 .

HTML Code:

<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>

jQuery Code:

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

希望这可以帮助！

回复于 2024-05-10T00:56:42+08:00

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

回复于 2024-05-10T00:56:42+08:00

2
这是我的建议 .

总结一下......你有一个画廊页面上有图片 . 它们链接到覆盖图，其中包含有关图片的更多信息 .

我用过类似的东西：http://fancybox.net/尝试页面上的谷歌 Map 链接..看起来像这样：
```
<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>
```
但是你的叠加链接转到另一个页面，它只显示图片的信息，如下所示：
```
<a class="various iframe" href="/mygallerie/picturedetails.php?id=124"><img ... ></a>
```
因此，在我的解决方案中，您有一个PHP页面列出图片并将其链接到带有ID的叠加层 .

然后在Overlay中显示第二个PHP页面 .
回复于 2024-05-10T00:56:42+08:00
0
在您编辑之后，我认为您需要某种ajax来获取数据并将其放入叠加层 .

你可以在jquery中使用ajax来做到这一点 . 这样的事情应该有效：
```
$( "#doit" ).click(function() {
  $.ajax({
    url: "/get/data.php",
    context: document.body
  }).done(function() {
  $( this ).addClass( "done" );
  });
});
```
在jquery中了解更多关于ajax的信息here

Update 评论后 .

您的
```
/get/data.php
```
可以返回一个json对象或（准备显示）html .

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

在第二种情况下，您可以在php（服务器）端执行此操作 .
回复于 2024-05-10T00:56:42+08:00
1

我会首先使用php将您想要在灯箱中分离的所有内容加载到不同的div中 . 然后我会将灯箱部分的所有html css默认为“display：none;” . 然后你可以使用jquery来制作它，这样你当前悬停的任何东西（或点击..etc）都会从“display：none”切换到“display：block” .

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

回复于 2024-05-10T00:56:42+08:00

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

这是一个关于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%;
   }

回复于 2024-05-10T00:56:42+08:00

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

6 回答

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

CSS

HTML

相关问题