像谷歌图片一样弹出图片

Question

有没有jQuery插件或CSS技术可以实现像谷歌图片那样的弹出效果？

谢谢。

- eozzy

Answer 1

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

- Roko C. Buljan

---

不需要工具提示。你试过谷歌图片搜索吗？ - eozzy

@RokoC.Buljan想要求助一些帮助。 - Jack

我尝试了你的例子，但是无法使其工作。在firebug控制台中出现错误：“$j（“＃images img”）.ibox不是函数”。在我的index.php中，我已经调用了包含插件的.js文件，并在其中添加了“$(document).ready(function() { $('#images img').ibox(); });”，就像演示中一样。 我真的很新于jQuery世界，可能会错过一些显而易见的东西！ - JinSnow

Answer 2

我正在寻找同样的东西，不得不构建一个可扩展的插件。对我来说重要的是它在Wapper或浏览器内像谷歌一样可扩展。

这是带有演示的插件： 演示

在Github上下载插件 希望这可以帮到您。

- Andiio

---

谢谢你的工作！我正在寻找可扩展的东西！太棒了，太棒了，太棒了！ - JinSnow

Answer 3

有很多jQuery插件可用于此

Thickbox

LightBox

FancyBox

FaceBox

NyroModal

PiroBox

- Tushar Ahirrao

Answer 4

这里有一个鼠标悬停预览类型插件的选项：imgpreview

还有这个，可以查看第二个演示：http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

Beautytips 也可能会有所帮助，它似乎非常灵活。Netflix风格的框很不错。

- Surreal Dreams

---

不需要工具提示。你试过谷歌图片搜索吗？ - Nimbuz 刚刚编辑 - eozzy

我非常熟悉GIS。请查看imgpreview的演示：http://james.padolsey.com/demos/imgPreview/full/ 在底部，预览更多，工具提示更少。 - Surreal Dreams

Answer 5

从谷歌代码中查看：

http://code.google.com/p/jquery-image-hover/

- James Jithin