Slimbox V2 error when upgrading to jQuery 1.9.1

Question

When you have a site that uses Slimbox V2 and upgrade to jQuery 1.9.1 you get a strange behavior. The semitransparent overlay layer comes in front of your image instead of behind it.

Before the upgrade, I used jQuery 1.8 and everything was working fine. Nothing else changed on the site. How to solve the issue without downgrading jQuery?

Answer 1

The reason it doesn't work is that jQuery 1.9 changes the way .after() works, and the complicated code in the original lightbox that I show below uses .after() in the old way (assumes it adds the new element to the set of elements returned, whereas the new .after() doesn't.)

You can easily fix it by changing the order, so instead of:

$('.....).appendTo($('body'));

you just do:

$('body').append($('...);

However beware. The code below has been changed by me to put the data section above the picture rather than below it, and that needs other changes (you need to add the height of the data section in the size_container function). Nevertheless, it's a demonstration of how the problem can be fixed—and is working. See the web site I am working on

Lightbox.prototype.build = function() {
  var $lightbox,
    _this = this;

  $('body').append($("<div>", {
    id: 'lightboxOverlay'
  }),$('<div/>', {
    id: 'lightbox'
  }).append($('<div/>', {
    "class": 'lb-outerContainer'
  }).append($('<div/>', {
    "class": 'lb-dataContainer'
  }).append($('<div/>', {
    "class": 'lb-data'
  }).append($('<div/>', {
    "class": 'lb-details'
  }).append($('<span/>', {
    "class": 'lb-caption'
  }), $('<span/>', {
    "class": 'lb-number'
  })), $('<div/>', {
    "class": 'lb-closeContainer'
  }).append($('<a/>', {
    "class": 'lb-close'
  }).append($('<img/>', {
    src: this.options.fileCloseImage
  }))))),$('<div/>', {
    "class": 'lb-container'
  }).append($('<img/>', {
    "class": 'lb-image'
  }),$('<div/>', {
    "class": 'lb-nav'
  }).append($('<a/>', {
    "class": 'lb-prev'
  }), $('<a/>', {
    "class": 'lb-next'
  })), $('<div/>', {
    "class": 'lb-loader'
  }).append($('<a/>', {
    "class": 'lb-cancel'
  }).append($('<img/>', {
    src: this.options.fileLoadingImage
  })))))));