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

Posted 2023-02-24

【中文标题】如何将动态 URL 传递到 Lightbox 2 实例，而不是使用其硬编码的“this.URL”？

【英文标题】：How do I pass dynamic URLs into a Lightbox 2 instance, rather than using its hardcoded `this.URL`?

【发布时间】：2012-05-04 18:38:49

【问题描述】：

我正在使用 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>

【参考方案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');

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

【讨论】：

每当我在我的 HTML 中引用 .js 文件中使用的 LightboxOptions 或 Lightbox 时，浏览器都会返回一个错误，指出这些是 undefined。这是我尝试的第一件事。

我明白了。我注意到代码是在闭包内执行的，并且在它之外没有任何变量/配置可用。现在，有一个技巧涉及查看 <script src> 标签，但需要编辑 lightbox.js 文件。这行得通吗？

如果编辑使其按原样运行，或者可以选择我想做的事情，那绝对可行（但如果在 GitHub 上作为拉取请求提交可能会更有用！ )。

@Bryson：我已经修改了答案。

【参考方案2】：

可以使用全局js变量：

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

然后，修改lightbox.js：

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

【讨论】：

我确实想过这样做，但我试图避免“弄乱全局命名空间”。

解决它的唯一方法是对 lightbox.js 进行更大的更改，例如将其默认初始化代码替换为您自己的 init 函数，该函数将 LightboxOptions 对象作为参数。

【参考方案3】：

这就是我选择jQuery lightBox plugin的原因，它可以根据你的内心需求进行初始化。示例：

$("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）。

【讨论】：

@Bryson 我不知道。最新版本的日期为“2008 年 4 月 11 日”。它实际上是基于 Lokesh Dhakar 的 Lightbox 2。我同意 Lightbox 2 从那时起确实做了一些不错的更新。打败我为什么他们没有将它作为一个合适的 jquery 插件发布。我敢肯定有他们的理由。