Question

如何实现Google图片搜索结果等图片预览功能，点击缩略图后，Google会在背景上显示网站预览，并预览前景图片。

可以使用Lightbox / Fancybox（或它们的克隆）和iframe选项吗？您有任何建议或解决方案吗？

Answer 1

制作这种类型的灯箱很容易。您不一定需要使用Lightbox / Fancybox。实际上有很多这个在线的例子你可以用于模型...例如我刚发现这个 http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

我通常对这种弹出类似的东西做一个具有以下属性的div：

position:fixed;
top:left;
height:100%;
z-index:(something high);
background-color:rgba(255,255,255,0.8);
display:none;

这将覆盖带有半透明层或窗帘的页面我通常用来显示窗帘的是附加一个函数，它将“display：none”设置为“display：block”（或者，使用jquery的.toggle（））到页面某处的click事件。

确保弹出窗口的内容也初始化为display：none;在css中

然后我将图像放在div中，并将其放置在position：absolute;

我在这个页面上使用过这种类型的窗帘/弹出窗口... http://asdf.us/imgrid/greatgrids 点击“选择，然后点击此处了解详情”

编辑：在阅读完评论后，我意识到这更多是关于使用iframes with lightboxes。我会小心使用iframe，因为有些网站（比如stackoverflow.com）不允许使用iframe链接。请尝试以下示例：

<html><head><style>
iframe, #curtain{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#curtain{
background-color:rgba(255,255,255,0.8);
z-index:10;
text-align:center;
}
#theimg{
padding:20px;
border:1px solid black;
}
</style>
</head>
<body>
<iframe src="http://en.wikipedia.org/wiki/Stack_overflow"></iframe>
<div id="curtain">
  <img id="theimg" src="http://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/220px-Wikipedia-logo-v2.svg.png"></img>
</div>
</body></html>

图像预览功能，如Google和Lightbox + Iframe

1 个答案: