我有一位摄影师客户,他们的网站上有10,000 +照片文件(jpegs)。在网站上查看照片时,您必须单独单击每个单独的一个,并在完成查看后单击X.换句话说,没有允许滚动照片的灯箱。
我正在搜索关于如何“删除”/传输/转换现有jpeg文件到灯箱环境的方法或建议,而不必单独手动键入每个文件并放置在html结构中。
Here是他的一个页面的示例。您将看到所有照片都显示为缩略图。单击一个,然后在灯箱中将其打开。如果可能的话,我将能够向现有的灯箱添加滚动功能
提前致谢。
答案 0 :(得分:2)
我的建议:将所有文件批量命名为某种模式,例如“Pic1,Pic2,Pic3” - 可以通过编程方式加入的内容。使用服务器端语言(如果您使用的话)获取前15张左右的图片并将其发回。然后jQuery可以在灯箱或其他任何地方使用前15个左右,当你超过前15个时,进行Ajax调用以调用下一个15,等等。
答案 1 :(得分:2)
您可以放入像prettyphoto这样的灯箱,并使用jquery选择器来定位您的图片链接。就像tskuzzy说的那样,如果你想能够在灯箱内循环浏览它们,你将不得不进行搜索和替换以添加rel
属性。
如果您描述当前页面的构建方式或链接指向它,可能会有所帮助。
答案 2 :(得分:1)
根据当前页面的结构,您可能只需进行智能查找和替换。如果它有点复杂,你可以写一个简单的脚本来为你做转换。
编辑:
让我们说你现在的代码是:
<ul>
<li><a class="showimage" href="pic1.jpg"><img src="pic1thumb.jpg" /></a></li>
<li><a class="showimage" href="pic2.jpg"><img src="pic2thumb.jpg" /></a></li>
</ul>
要将其置于灯箱环境中,您将希望它采用以下格式:
<ul>
<li><a rel="lightbox" href="pic1.jpg"><img src="pic1thumb.jpg" /></a></li>
<li><a rel="lightbox" href="pic1.jpg"><img src="pic1thumb.jpg" /></a></li>
</ul>
然后你需要找到:
class="showimage"
并将其替换为
rel="lightbox"
我希望能够解释它。如果您需要根据自己的需求量身定制更具体的答案,则必须发布当前代码/ html的片段。
答案 3 :(得分:0)
似乎你的朋友为他的投资组合创建了自己的静态html网站。我建议,如果你的朋友买不起自定义动态网站(PHP,asp.net,jsp),他应该订阅任何已经拥有这些管理工具的博客网站。