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

Question

我正在使用 Lightbox 2，因为它几乎满足了我的每一项要求，并且似乎是我遇到的最新更新的、低调的、高质量的“Lightbox”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);

可以看到整个文件on 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>

Answer 1

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

原始代码

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');

该脚本的工作原理是检查所有 <script>标签 src属性以 /lightbox.js 结尾(希望您只有一个这样的脚本标签)。从现在开始，计算图像的路径就很容易了。 Demo Here 。请注意，演示使用了一些技巧来在 jsFiddle 上工作。