How do I pass dynamic URLs into a Lightbox 2 instance, rather than using its hardcoded `this.URL`?

Question

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.

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

The entire file can be seen on GitHub if I have not included enough of the code. In the included sections, this.fileLoadingImage and this.fileCloseImage are given a path relative to the HTML file that executes it. For example, http://mywebsite.com/. However, my CSS, JS, images, etc. are all served from http://static[number].mywebsitestatic.com/. 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.

The site is a Django app, so in the template code I can simply use {{ STATIC_URL }} 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):

<script>
    /* instantiate a new version of Lightbox */
    newLightbox.fileLoadingImage = "{{ STATIC_URL }}img/lightbox/loading.gif";
    newLightbox.fileCloseImage = "{{ STATIC_URL }}img/lightbox/close.gif";
</script>

Salman A · Accepted Answer · 2012-04-24T07:16:28.037

7

Here is little tweak that allows lightbox.js script to determine its URL; and then the URL of dependency images.

Original Code

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

Revised Code

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

The script works by checking all <script> tags whose src attribute ends with /lightbox.js (hoping that you have only one such script tag). From this point forward, it is easy to calculate the paths of images. Demo Here. Note that demo uses some tricks to work on jsFiddle.

edited Apr 24 '12 at 07:16

answered Apr 24 '12 at 06:27

Salman A

262,204
82
430
521

Any time I refer, in my HTML, to LightboxOptions or Lightbox as used in the .js file, an error is returned by the browser saying that these are `undefined`. This was the very first thing I tried. – Bryson Apr 24 '12 at 06:29
I see. I notice that the code is executed inside a closure and none of the variables/configuration is available outside of it. Now, there is a trick that involves looking at the ` – Salman A Apr 24 '12 at 06:36
If the edits make it function as-is, or with the option of what I'd like to do, that would absolutely work (but may be more useful if submitted on GitHub as a pull request!). – Bryson Apr 24 '12 at 06:38
@Bryson: I've revised my answer. – Salman A Apr 24 '12 at 07:19

score 1 · Answer 2 · answered Apr 24 '12 at 06:21

1

You can use a global js variable:

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

Then, modify lightbox.js:

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

answered Apr 24 '12 at 06:21

Emmett

14,035
12
56
81

I did think about doing it that way, but I was trying to avoid "cluttering the global namespace". – Bryson Apr 24 '12 at 06:25
1

The only way around it would be to make bigger changes to lightbox.js, e.g. replace its default initialization code with your own `init` function that takes a LightboxOptions object as an argument. – Emmett Apr 24 '12 at 06:28

score 0 · Answer 3 · answered Jul 02 '12 at 16:27

0

That's why I chose jQuery lightBox plugin, which can be initialized as your heart desires. Example:

$("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'

(I'm using Coffeescript).

answered Jul 02 '12 at 16:27

Art Shayderov

5,002
1
26
33

@Bryson nothing I'm aware of. Last version is dated "April 11, 2008". It was actually based on Lightbox 2 by Lokesh Dhakar. I agree though that Lightbox 2 did make some nice updates since then. Beats me why they haven't released it as a proper jquery plugin. Have their reasons I'm sure. – Art Shayderov Jul 11 '12 at 04:55

How do I pass dynamic URLs into a Lightbox 2 instance, rather than using its hardcoded `this.URL`?

3 Answers3

Original Code

Revised Code