升级到jQuery 1.9.1时Slimbox V2错误 [英] Slimbox V2 error when upgrading to jQuery 1.9.1

问题描述

当您拥有一个使用Slimbox V2并升级到jQuery 1.9.1的站点时，您会得到一个奇怪的行为.半透明覆盖层位于图像的前面而不是图像的后面.

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.

在升级之前，我使用了jQuery 1.8，并且一切正常.该网站上没有其他任何更改.如何在不降级jQuery的情况下解决问题?

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?

推荐答案

不起作用的原因是jQuery 1.9更改了.after()的工作方式，而我在下面显示的原始灯箱中的复杂代码使用了.after()以旧的方式(假设它将新元素添加到返回的元素集中，而新的.after()则没有.)

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

您只是这样做:

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

但是当心.我更改了下面的代码，将数据部分放在图片的上方而不是图片的下面，这需要其他更改(您需要在size_container函数中添加数据部分的高度).尽管如此，这只是如何解决问题的证明，并且还在起作用.请参见我正在工作的网站

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

这篇关于升级到jQuery 1.9.1时Slimbox V2错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！