title: How do I pass dynamic URLs into a Lightbox 2 instance, rather than using its hardcoded `this.URL`?
body: <p>I'm working with Lightbox 2, as it meets nearly every one of my requirements and appears to be the most recently updated, low profile, quality 'Lightbox' jQuery plugin I have come across. The only issue I have with it is that two of the images (close and loading) are hard-coded into the .js file, and there are no examples for passing arguments into the script to override this. I'm not good enough with JS to use the documentation that is the source code.</p>
  
  <pre><code>(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);
  </code></pre>
  
  <p>The entire file can be seen <a href="https://github.com/lokesh/lightbox2/blob/master/js/lightbox.js" rel="nofollow">on GitHub</a> if I have not included enough of the code. In the included sections, <code>this.fileLoadingImage</code> and <code>this.fileCloseImage</code> are given a path relative to the HTML file that executes it. For example, <code>http://mywebsite.com/</code>. However, my CSS, JS, images, etc. are all served from <code>http://static[number].mywebsitestatic.com/</code>. Rather than hard-coding a single one of my available static URLs into the .js file, I'd prefer to make this a more re-usable solution so that if this available subdomains or parent domains change I don't have to update this file as well.</p>
  
  <p>The site is a Django app, so in the template code I can simply use <code>{{ STATIC_URL }}</code> to write out the proper static file URL for a given page and pass that into the .js file. But how? For example, I'd like to be able to do the following (while avoiding global variables):</p>
  
  <pre><code>&lt;script&gt;
      /* instantiate a new version of Lightbox */
      newLightbox.fileLoadingImage = "{{ STATIC_URL }}img/lightbox/loading.gif";
      newLightbox.fileCloseImage = "{{ STATIC_URL }}img/lightbox/close.gif";
  &lt;/script&gt;
  </code></pre>