图像预览功能，如Google和Lightbox + Iframe
我如何实现一个图像预览功能，如谷歌图像搜索结果，当点击一个缩略图，谷歌显示一个预览的网站在背景和预览的图像在前景。
可以使用Lightbox/Fancybox (或它们的克隆)和iframe选项吗？你有什么建议或解决方案吗？
回答 1
Stack Overflow用户
发布于 2012-04-03 07:45:45
制作这种类型的灯箱很容易。你不一定需要使用Lightbox/Fancybox。实际上，网上有很多这样的示例，您可以将其用于model...for实例我只找到了这一个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() )。
确保弹出窗口的内容在css中也初始化为display:none；
然后我会将图像放入div中，并使用position: absolute来定位它；
我在此页面上使用了这种类型的窗帘/弹出窗口...http://asdf.us/imgrid/greatgrids单击“选择，然后单击此处查看详细信息”
编辑：在读完你的评论后，我意识到这更多的是关于在lightboxes中使用iframe。我会小心使用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>https://stackoverflow.com/questions/9985196
复制相似问题
腾讯云开发者
