我正在使用 Lightbox 2,因为它几乎满足了我的每一个要求,并且似乎是我遇到的最新更新的、低调的、高质量的“灯箱”jQuery 插件。我唯一遇到的问题是两个图像(关闭和加载)被硬编码到 .js 文件中,并且没有将参数传递到脚本中以覆盖它的示例。我对 JS 不够好,无法使用作为源代码的文档。
(function() {
var $, Lightbox, LightboxOptions;
$ = jQuery;
LightboxOptions = (function() {
function LightboxOptions() {
this.fileLoadingImage = 'images/loading.gif';
this.fileCloseImage = 'images/close.png';
this.resizeDuration = 700;
this.fadeDuration = 500;
this.labelImage = "Image";
this.labelOf = "of";
}
return LightboxOptions;
})();
Lightbox = (function() {
function Lightbox(options) {
this.options = options;
this.album = [];
this.currentImageIndex = void 0;
this.init();
}
[...]
})();
$(function() {
var lightbox, options;
options = new LightboxOptions;
return lightbox = new Lightbox(options);
});
}).call(this);
如果我没有包含足够的代码,可以在 GitHub 上看到整个文件。在包含的部分中,this.fileLoadingImage
并this.fileCloseImage
给出了相对于执行它的 HTML 文件的路径。例如,http://mywebsite.com/
。但是,我的 CSS、JS、图像等都是从http://static[number].mywebsitestatic.com/
. 与其将我的一个可用静态 URL 硬编码到 .js 文件中,我更愿意使它成为一个更可重用的解决方案,这样如果这个可用的子域或父域发生变化,我就不必更新这个文件也是如此。
该站点是一个 Django 应用程序,因此在模板代码中,我可以简单地使用{{ STATIC_URL }}
为给定页面写出正确的静态文件 URL 并将其传递到 .js 文件中。但是怎么做?例如,我希望能够执行以下操作(同时避免使用全局变量):
<script>
/* instantiate a new version of Lightbox */
newLightbox.fileLoadingImage = "{{ STATIC_URL }}img/lightbox/loading.gif";
newLightbox.fileCloseImage = "{{ STATIC_URL }}img/lightbox/close.gif";
</script>