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

-1

我想在我的网站上添加一个限制宽度的照片库（高度无关紧要）。我尝试了很多类型的画廊，但所有这些都取决于照片的宽度或高度。然后，我想“为什么不使用像Facebook一样的模板？”，但我的问题是，我不知道如何。我不需要像Facebook这样的复杂画廊，但我需要autoresize可点击的照片（看起来在相册中呈现照片的小缩略图），并且当您用左右箭头单击它们以扩大到正常尺寸时。你能帮我实现我的目标吗？如果有什么不清楚的地方，请在评论部分问我，我的英语说得不好。 PS：我所有的网站都是基于html，jquery和css的。如何用css和jquery创建一个类似facebook的画廊？

来源

2013-03-16 Adi Micutzu

无法在Javascript中轻松调整图像大小 - 这意味着首先下载整个图像，这对于大型图库来说会非常缓慢。您应该使用任何您熟悉的技术（例如PHP/ASP.Net/Python/Ruby）在服务器上生成缩略图。 – Basic 2013-03-17 00:00:57

您可以使用下面的CSS属性重新缩放图像，虽然如上所述，这将不会执行您的加载时间任何优惠和服务器端脚本将是一个更可取的选项，如果你愿意钻研进入PHP。如果没有，请随意创建一个具有设置宽度和高度的div以及下面的属性和背景图像，并且应该可以工作。缺点是你可能无法在不使用onClick/JavaScript的情况下链接div。

background-size: 100%;

至于jQuery的，你可以使用http://fancybox.net灯箱插件，允许用户点击一个“缩略图”，查看全尺寸图像，并使用箭头键切换图像。

来源

2013-03-17 00:24:57

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

更简单的方法是只使用CSS样式属性让浏览器调整图像大小。这有一个缺点，即服务器将始终发送大图像，无论用户想要以全尺寸查看它们，只需要在img标签中设置宽度和高度。

来源

2013-03-17 00:09:32 hexblot

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

回答

相关问题