Jquery 如何将动态URL传递到Lightbox 2实例，而不是使用其硬编码的'this.URL`？

我正在使用Lightbox 2，因为它几乎满足了我的每一个需求，并且似乎是我遇到的最新更新、低调、高质量的“Lightbox”jQuery插件。我唯一的问题是其中两个图像（close和loading）是硬编码到.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);

如果我没有包含足够的代码，那么可以看到整个文件。在包含的部分中，

this.fileLoadingImage

和

this.fileCloseImage

给出了相对于执行它的HTML文件的路径。例如，

http://mywebsite.com/

。然而，我的CSS、JS、图像等都是从

http://static[number].mywebsitestatic.com/

。与其将一个可用的静态URL硬编码到.js文件中，我更愿意使其成为一个更可重用的解决方案，这样，如果可用的子域或父域发生更改，我就不必更新此文件

该站点是一个Django应用程序，因此在模板代码中，我可以简单地使用

{{STATIC_URL}}

写出给定页面的正确静态文件URL，并将其传递到.js文件中。但是怎么做呢？例如，我希望能够做到以下几点（同时避免全局变量）：

/*实例化Lightbox的新版本*/
newLightbox.fileLoadingImage=“{{STATIC_URL}}img/lightbox/load.gif”；
newLightbox.fileCloseImage=“{{STATIC_URL}}img/lightbox/close.gif”；

您可以使用全局js变量：

<script>
    var imagePath = '{{ STATIC_URL }}img/';
</script>
<script src="js/lightbox.js"></script>

---

这里有一个小小的调整，允许lightbox.js脚本确定它的URL；然后是依赖关系图像的URL

原始代码 修订守则 该脚本通过检查其

src

属性以

/lightbox.js

结尾的所有

标记来工作（希望您只有一个这样的脚本标记）。从这一点开始，很容易计算图像的路径。请注意，演示使用了一些技巧来处理JSFIDLE。

这就是我选择它的原因，它可以根据您的内心需求进行初始化。例如：

$("a[rel|=lightbox]").lightBox
  imageLoading: '/assets/lightbox-ico-loading.gif'
  imageBtnPrev: '/assets/lightbox-btn-prev.gif'
  imageBtnNext: '/assets/lightbox-btn-next.gif'
  imageBtnClose: '/assets/lightbox-btn-close.gif'
  imageBlank: '/assets/lightbox-blank.gif'

---

（我正在使用Coffeescript）。

我确实想过这样做，但我试图避免“弄乱全局名称空间”。唯一的解决办法是对lightbox.js进行更大的更改，例如，将其默认初始化代码替换为您自己的

init

函数，该函数将LightboxOptions对象作为参数。每当我在HTML中引用.js文件中使用的LightboxOptions或Lightbox时，浏览器会返回一个错误，指出它们是

未定义的

。这是我第一次尝试，我明白了。我注意到代码是在闭包内执行的，在闭包外没有可用的变量/配置。现在，有一个技巧需要查看

标记，但需要编辑lightbox.js文件。这行得通吗？如果编辑使它按原样运行，或者选择我想做的事情，那绝对行得通（但如果在GitHub上作为拉取请求提交，可能会更有用！）。@Bryson:我已经修改了我的答案。@Bryson我什么都不知道。最后版本日期为“2008年4月11日”。它实际上是基于Lokesh Dhakar的Lightbox 2。我同意Lightbox 2从那时起做了一些不错的更新。我不明白为什么他们没有把它作为一个合适的jquery插件发布。我肯定他们有自己的理由。

this.fileLoadingImage = imagePath + 'images/loading.gif';
this.fileCloseImage = imagePath + 'images/close.png';

this.fileLoadingImage = 'images/loading.gif';
this.fileCloseImage = 'images/close.png';

this.fileLoadingImage = $('script[src$="/lightbox.js"]')
    .attr('src')
    .replace(/\/lightbox\.js$/, '/../images/loading.gif');
this.fileCloseImage = $('script[src$="/lightbox.js"]')
    .attr('src')
    .replace(/\/lightbox\.js$/, '/../images/close.png');

$("a[rel|=lightbox]").lightBox
  imageLoading: '/assets/lightbox-ico-loading.gif'
  imageBtnPrev: '/assets/lightbox-btn-prev.gif'
  imageBtnNext: '/assets/lightbox-btn-next.gif'
  imageBtnClose: '/assets/lightbox-btn-close.gif'
  imageBlank: '/assets/lightbox-blank.gif'