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

Question

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

基本上，我希望在点击“阅读更多”时加载叠加层，但要使用特定图像的特定标题，描述等。

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

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

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

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

没有fancybox 请，我不能在商业网站上使用精美的盒子。

Answer 1

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

下面是一个小示例代码，其中我在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>

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

希望这有帮助！

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

Answer 3

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

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

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

在jquery here

中阅读有关ajax的更多信息评论后

更新。

你的

/get/data.php

可以返回json对象或（准备显示）html。

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

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

Answer 4

这是我的建议。

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

我用过类似的东西：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>

但是你的叠加链接会转到另一个只显示图片信息的页面：

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

因此，在我的解决方案中，您有一个PHP页面列出图片并将其链接到带有ID的叠加层。

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

Answer 5

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

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

Answer 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%;
   }

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

6 个答案:

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

CSS

HTML