如何将动态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);

如果我没有包含足够的代码,可以在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>标记(希望您只有一个这样的脚本标记).从现在开始,很容易计算出图像的路径.在这里演示.请注意,demo使用一些技巧来处理jsFiddle.src/lightbox.js