我想在我的网站上添加一个限制宽度的照片库(高度无关紧要)。我尝试了很多类型的画廊,但所有这些都取决于照片的宽度或高度。然后,我想“为什么不使用像Facebook一样的模板?”,但我的问题是,我不知道如何。我不需要像Facebook这样的复杂画廊,但我需要autoresize可点击的照片(看起来在相册中呈现照片的小缩略图),并且当您用左右箭头单击它们以扩大到正常尺寸时。你能帮我实现我的目标吗?如果有什么不清楚的地方,请在评论部分问我,我的英语说得不好。 PS:我所有的网站都是基于html,jquery和css的。如何用css和jquery创建一个类似facebook的画廊?
-1
A
回答
1
您可以使用下面的CSS属性重新缩放图像,虽然如上所述,这将不会执行您的加载时间任何优惠和服务器端脚本将是一个更可取的选项,如果你愿意钻研进入PHP。如果没有,请随意创建一个具有设置宽度和高度的div以及下面的属性和背景图像,并且应该可以工作。缺点是你可能无法在不使用onClick/JavaScript的情况下链接div。
background-size: 100%;
至于jQuery的,你可以使用http://fancybox.net灯箱插件,允许用户点击一个“缩略图”,查看全尺寸图像,并使用箭头键切换图像。
0
最好的解决方案是有一个服务器端调整脚本,将您的图像缩放到预定义的约束(例如缩略图,预览和全尺寸)。有很多方法可以做到这一点,例如用于PHP的http://www.reconn.us/image_thumbnail.html。
更简单的方法是只使用CSS样式属性让浏览器调整图像大小。这有一个缺点,即服务器将始终发送大图像,无论用户想要以全尺寸查看它们,只需要在img标签中设置宽度和高度。
相关问题
- 1. 如何创建一个类似于Facebook的Facebook应用程序的侧边栏?
- 2. 如何创建一个类似Facebook的粘杆
- 3. 我们如何创建一个灯箱画廊与SQL图像
- 4. 如何创建一个类似jquery的$()包装函数?
- 5. jQuery的下一个()的画廊
- 6. 在Rails中创建画廊
- 7. 创建更新画廊
- 8. 在我的网站上创建一个类似Facebook的搜索
- 9. 如何用CSS和Javascript制作居中的画廊布局?
- 10. jQuery画廊翻过下一个和上一个按钮
- 11. 使用jquery创建我自己的图像画廊网格
- 12. 创建一个类似于Facebook的搜索框
- 13. WordPress的画廊:用jQuery
- 14. 如何使用展开/折叠动画创建类似的recyclerview?
- 15. 脚本JQuery画廊,通过CSS类作为函数的参数
- 16. 如何使用Cocos2d创建更高效的肖像画廊?
- 17. 试图创建一个可折叠的画廊导航
- 18. 如何创建一个下拉像菜单类似Facebook的下拉通知
- 19. 如何使用CSS创建类似图库的移动图库
- 20. 如何创建一个类似PHP的Winsocks应用程序?
- 21. 如何创建一个动画地图覆盖或类似compas的行为?
- 22. 如何创建一个jQuery插件类
- 23. Mediawiki的图片画廊CSS
- 24. CSS伪类和jQuery动画?
- 25. 如何创建一个类似Google的建议下拉列表?
- 26. Phoca画廊:错误与画廊中的Facebook相册的集成
- 27. 如何为不同的照片创建不同的Facebook喜欢同一个画廊
- 28. 如何使用jekyll&liquid更有效地创建此画廊?
- 29. 创建类似于jQuery的.css()函数的方法
- 30. 如何使用画布创建类似以下链接的动画?
无法在Javascript中轻松调整图像大小 - 这意味着首先下载整个图像,这对于大型图库来说会非常缓慢。您应该使用任何您熟悉的技术(例如PHP/ASP.Net/Python/Ruby)在服务器上生成缩略图。 – Basic 2013-03-17 00:00:57