如何用css和jquery创建一个与facebook相似的画廊？

Question

我想在我的网站上添加一个宽度有限的照片库（高度无关紧要）。我尝试了很多类型的画廊，但所有画廊都取决于照片的宽度或高度。然后我想“为什么不像Facebook一样使用同样的模式？”，但我的问题是我不知道如何。我不需要像facebook那样复杂的画廊，但是我需要自动缩放的可点击照片（显示在相册中显示照片的小缩略图），当您点击它们以扩展到正常尺寸时，使用左右箭头。你能帮我成功吗？如果事情不明确，请在评论部分问我，我的英语说得不太好。

PS：我的所有网站都基于html，jquery和css。

Answer 1

你可以使用下面的CSS属性来重新缩放图像，尽管如上所述，这不会使你的加载时间有任何好处，如果你愿意钻研，服务器端脚本将是更好的选择PHP。如果没有，请随意创建一个具有设置宽度和高度的div以及下面的属性和背景图像，这应该可行。缺点是您可能无法使用onClick / JavaScript链接div。

background-size: 100%;

对于jQuery，您可以使用http://fancybox.net灯箱插件让用户点击“缩略图”，查看完整尺寸的图片，并使用箭头键在图片之间切换。

Answer 2

最佳解决方案是使用服务器端调整大小脚本，将脚本缩放到预定义的约束（例如缩略图，预览和完整大小）。有很多方法可以做到这一点，例如PHP的http://www.reconn.us/image_thumbnail.html。

更简单的方法是只使用CSS样式属性让浏览器调整图像大小。这样做的缺点是服务器总是发送大图像，无论你的用户想要以完整大小查看它们，而只需要你在img标签中设置宽度和高度。