【发布时间】：2011-11-16 16:55:12
【问题描述】：
是否有任何 jQuery 插件或 CSS 技术来实现像谷歌图像这样的弹出效果？
谢谢
【问题讨论】：
标签： jquery popup thumbnails
【发布时间】：2011-11-16 16:55:12
【问题描述】：
#images{
padding:30px;
}
#images img{
position:relative;
float:left;
height:100px;
margin:5px;
transition:0.3s;
box-shadow: 0 0 0 10px #fff;
}
#images img:hover{
z-index:2;
transform: scale(1.2);
}
#images img:hover:after{
content: attr(title);
}<div id="images">
<img src="http://dummyimage.com/180x120/000/fff" alt=""/>
<img src="http://dummyimage.com/175x104/f0f/fff" alt=""/>
<img src="http://dummyimage.com/150x100/a3d/fff" alt=""/>
<img src="http://dummyimage.com/278x125/cf5/fff" alt=""/>
<img src="http://dummyimage.com/199x120/e46/fff" alt=""/>
<img src="http://dummyimage.com/207x480/361/fff" alt="" />
<img src="http://dummyimage.com/400x107/081/fff" alt="" />
<img src="http://dummyimage.com/50x40/cc3/fff" alt="" />
<img src="http://dummyimage.com/700x500/233/fff" alt="" />
<img src="http://dummyimage.com/300x120/a26/fff" alt="" />
<img src="http://dummyimage.com/341x177/f10/fff" alt="" />
</div>【讨论】：
-
Nooo 不需要工具提示。你试过谷歌图片搜索吗？
-
@RokoC.Buljan 想寻求帮助
-
我试过你的例子，但我不能让它工作。我在 firebug 控制台中遇到错误：“$j("#images img").ibox 不是函数”。在我的 index.php 中，我调用了包含插件的 .js 文件，在“$(document).ready(function() { $('#images img').ibox(); });”下面就像在演示中一样。我对 jQuery 世界真的很陌生，我可能会错过一些明显的东西！
我一直在寻找相同的东西，并且必须构建一个可扩展的插件。对我来说重要的是它可以在 Wapper 或像谷歌这样的浏览器中扩展。
这是带有演示的插件
DEMO
Download plugin on Github
希望对你有帮助
【讨论】：
-
感谢您的工作！我正在寻找可扩展的东西！很棒很棒很棒！
这是一个鼠标悬停预览类型插件的选项：imgpreview
还有这个，看第二个demo：http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
Beautytips也可能有一些用处，看起来挺灵活的。 Netflix 风格的盒子很不错。
【讨论】：
-
Nooo 不需要工具提示。你试过谷歌图片搜索吗？ – Nimbuz 刚刚编辑
-
我对 GIS 非常熟悉。查看 imgpreview 的演示：james.padolsey.com/demos/imgPreview/full 在底部，它获得了更多的预览和更少的工具提示。
从谷歌代码中看到这个：
【讨论】：