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

Question

自从我编写任何代码以来，已有3年多了，因此如果这看起来很愚蠢，请原谅我。我被允许在外部托管的网站（如http://www.example.com）上发布我不能控制的内容。我的内容可以是HTML，CSS和JS。我想在我的内容页面（http://www.example.com/MyContentPage）中加载一堆照片。这个页面使用jQuery（我检查过它）。

我有我的图片在保管箱中并将它们加载到列表中，但随着图片数量的增加，我希望将它们加载为图库。但我不控制根文件夹和相对路径。因此，我需要的任何JS/CSS /图像应该托管在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 Example

您也可能拥有从降CSS和JS框。你只需要输入链接。 有关Magnific酒店，弹出详细信息： Magnific-Popup Docs

Answer 3

我喜欢用羽之（http://noelboss.github.io/featherlight/）

还有一个画廊的选择，但它可以让你从outisde源拉你的数据源，如CDN。此外，它非常小，以便您可以保持您的网站优化。