1

自从我编写任何代码以来已经过去了 3 年，如果这看起来很愚蠢，请原谅我。我可以在我无法控制的外部托管网站（比如http://www.example.com ）上发布内容。我的内容可以是 HTML、CSS 和 JS。我在我的内容页面 ( http://www.example.com/MyContentPage )的 Dropbox 中有一堆照片。此页面使用 jQuery（我检查过）。

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

当我查看灯箱（https://github.com/lokesh/lightbox2/）时，我看到它带有所有必要的文件夹，但由于我无法“安装”lightbox2，我想知道是否有更简单的方法我用灯箱（或类似的东西）做一个相册。我在想改变 lightbox2 中 css 和图像的相对路径可能有效，但我不知道。将不胜感激任何想法。

谢谢。

4

3 回答 3

1

You don’t need to “install” the script – just pointing to the JS and CSS resources located elsewhere on the net should suffice. You could even place them in your DropBox account and reference them from there (assuming DropBox does not prevent this in any way, but since they seem to have nothing against being used to host the images, why should they object when you do the same with some JS/CSS files).

The other option would be to look for a dedicated CDN that hosts those files for you – for common scripts there are a couple of services that do that already … whether or not there’s one hosting this specific script, you’d have to research. (What you should not do though, is link to the files directly on github – they explicitly do not want to be used as a CDN for such cases.)

于 2014-09-08T12:16:11.513 回答
0

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

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

于 2014-09-12T21:27:32.200 回答
0

在您的 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。您只需要输入链接。有关 Magnific-Popup 的更多信息： Magnific-Popup Docs

于 2014-09-11T04:27:22.693 回答