具有滑动功能的响应式照片墙画廊

Question

我希望构建一个符合以下标准的 javascript/jquery 库，并且很想知道是否有任何现有的库模块具有所有/大部分这些功能：

1. 具有缩放（单视图）功能的照片墙。例如。 http://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/

2. 响应式，以便桌面和移动设备的照片墙图像正确平铺，并在用户调整浏览器大小时重新排列。例如。 http://isotope.metafizzy.co/

3.（可选但可取）。如果用户在移动设备上，允许他们滑动浏览单视图图像。

简而言之。用户将转到缩略图墙，选择一张图片，然后可以滑动浏览更多放大的照片，或者切换回墙。

照片将来自服务器上的文件夹。版主只是相机女孩，他们会通过 ftp 将数码相机中的图像上传到该文件夹​​ - 他们不会调整图像大小/优化图像，所以如果这也能发生在这个过程中的某个地方，那就太好了。

我们托管在 PHP / Linux 环境中。

Answer 1

看看 jQuery Mason：http://masonry.desandro.com/

它可以用作响应墙。

您要求的不是“缩放”（这是另一种效果），您似乎是所谓的灯箱。这些有很多，这里比较一下，http://planetozh.com/projects/lightbox-clones/

要重新调整图像大小，您必须编写一些 php 来使用图像 GD 或 imagemagick，这里有一个教程，http://net.tutsplus.com/tutorials/php/image-resizing-made-easy-with-php/ 或可能是一个脚本，http://shiftingpixel.com/2008/03/03/smart-image-resizer/（或 timthumb.php）。

为了为他们服务，您将不得不用您的 javascript 编写一些 php。

对于您所要求的内容，没有一站式解决方案，您将不得不编写它或聘请某人这样做。

Answer 2

据我所知，您必须创建一个插件或编写自己的 jquery 函数才能获得所有自定义功能。（这在性能和维护方面非常好）

1. 对于缩放功能，您可以使用一些带有 ajax 调用的模态窗口，也可以创建。
2. 要实现这一点，您必须编写良好的 css，以便您的照片根据屏幕对齐。如果您编写良好的 css，将处理重新洗牌。
3. 是的，您可以通过检测浏览器导航器并相应地更改 css 和 javascript 来实现此目的。
4. 对于预处理图像（调整大小、动态生成缩略图），您可以选择 php 后端解决方案。
5. 不用担心，您可以通过 Ajax 处理文件夹中的图像并根据需要显示它们。