外部托管网站/CSM上的灯箱型照片库

Question

我已经3年没有写任何代码了，所以如果这看起来很傻，请原谅我。我被允许在外部托管的网站上发布内容（比如http://www.example.com)我无法控制。我的内容可以是HTML、CSS和JS。我在dropbox中有一堆照片，希望加载到我的内容页面中(http://www.example.com/MyContentPage)。这个页面使用jQuery（我检查过了）。

我在dropbox中有我的图像，并将它们加载到列表中，但随着图像数量的增加，我希望将它们加载为库。但是我不控制根文件夹和相对路径。因此，我需要的任何JS/CSS/Image都应该托管在Dropbox中或来自不同的域（需要在我的CMS页面中引用）

当我看灯箱的时候(https://github.com/lokesh/lightbox2/)，我看到它附带了所有必要的文件夹，但由于我无法"安装"lightbox2，我想知道是否有一种更简单的方法可以让我用lightbox（或类似的东西）制作照片库。我认为在lightbox2中更改css和图像的相对路径可能可行，但我不知道。如果有任何想法，我将不胜感激。

谢谢。

Answer 1

您不需要"安装"脚本——只需指向网络上其他地方的JS和CSS资源就足够了。你甚至可以把它们放在你的DropBox帐户中，并从那里引用它们（假设DropBox不会以任何方式阻止这种情况，但既然它们似乎不反对被用来承载图像，为什么当你对一些JS/CSS文件做同样的事情时，它们会反对）。

另一种选择是寻找一个专门的CDN来为您托管这些文件——对于常见的脚本，已经有一些服务可以这样做了……无论是否有一个托管这个特定脚本的服务，您都必须进行研究。（不过，你不应该做的是直接链接到github上的文件——在这种情况下，它们明确不想被用作CDN。）

Answer 2

在html文件中，将以下内容（全部托管在CDN上）放在头部：

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/magnific-popup.css"> 
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ ===> Optional if your site has jQuery already but 
Check what version of jQuery your example.com site has-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.11/jquery.min.js"></script> 
<!-- Magnific Popup core JS file -->
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js"></script> 
<script>
$(document).ready(function() {
$('.gallery').magnificPopup({
type:'image',
gallery:{
enabled:true
}
});
});
</script>

这是你的图像的html：

<div class="gallery">
<a href="path-to-image.jpg">Open image 1 (gallery #1)</a><!-- can be absolute path -->
<a href="path-to-image.jpg">Open image 2 (gallery #1)</a>
<!-- more links  -->
</div>

jsFiddle示例

您还可以从您的dropbox中托管css和js。你只需要输入链接。有关放大弹出菜单的更多信息：放大弹出文档

Answer 3

我喜欢使用Featurelight(http://noelboss.github.io/featherlight/)

还有一个库选项，但它允许您从外部数据源（如CDN）提取数据源。此外，它非常小，所以你可以保持你的网站优化。