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，我想知道是否有一种更简单的方式让我做一个带灯箱的照相馆（或类似的东西）。我认为在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-Popup的更多信息： Magnific-Popup Docs

Answer 3

我喜欢使用Featherlight（http://noelboss.github.io/featherlight/）

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

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

3 个答案: