javascript - JQuery Lightbox : thumbnails OK, 背景变暗，但不显示大图

Question

我有一个奇怪的问题，灯箱似乎可以正常工作，但没有显示更大的图像。

图片链接正确，显示的是缩略图，但没有全尺寸图片。

控制台也没有报错。

我的图库 HTML 设置如下:

<a href="images/here.jpg" rel="lightbox[gallery]"><img src="images/here.jpg" alt="FAST Festival Image Gallery"></a>

我已确保 JQuery、JQuery UI、Lightbox.css、Lighbox.js 和 jquery.smooth-scroll.min.js 都存在。

页面是:http://www.fastfestival.com.au/gallery.html

有人知道发生了什么吗？

编辑:

在控制台中检查，我发现调用 Lightbox div 时没有图像出现

<div id="lightboxOverlay" style="width: 1633px; height: 1234px; display: block;"></div>

Answer 1

与 jQuery 1.9 的冲突​​与 new behavior for the .after() method 有关。 .您可以重写 Lightbox 中的 Lightbox.prototype.build 方法，以避免在断开连接的节点上使用 .after() 方法，Lightbox 将再次与 jQuery 1.9 一起工作。

我的快速组合解决方案(有效)如下。它可以通过更多链接进行清理，但我决定将其留到以后或者可能只是等待 Lightbox v2.51 被修订以包含标准化修复。

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

  // Editing here for jQuery 1.9 conflict
  $("<div>", { "id": "lightboxOverlay" }).appendTo("body");

  lightbox = $("<div>", { "id": "lightbox" });

  outerContainer = $("<div>", { "class": "lb-outerContainer" });
  container = $("<div>", { "class": "lb-container" });
  $(container).append($("<img>", { "class": "lb-image" }));
  nav = $("<div>", { "class": "lb-nav" });
  $(nav).append($("<a>", { "class": "lb-prev" }));
  $(nav).append($("<a>", { "class": "lb-next" }));
  loader = $("<div>", { "class": "lb-loader" });
  $(loader).append($("<a>", { "class": "lb-cancel" }).append($("<img>", { "src": this.options.fileLoadingImage })));
  $(container).append(nav);
  $(container).append(loader);
  $(outerContainer).append(container);

  dataContainer = $("<div>", { "class": "lb-dataContainer" });
  data = $("<div>", { "class": "lb-data" });
  details = $("<div>", { "class": "lb-details" });
  $(details).append($("<span>", { "class": "lb-caption" }));
  $(details).append($("<span>", { "class": "lb-number" }));
  closeContainer = $("<div>", { "class": "lb-closeContainer" });
  $(closeContainer).append($("<a>", { "class": "lb-close" }).append($("<img>", { "src": this.options.fileCloseImage })));
  $(data).append(details);
  $(data).append(closeContainer);
  $(dataContainer).append(data);

  $(lightbox).append(outerContainer);
  $(lightbox).append(dataContainer);

  $(lightbox).appendTo("body");
  // End custom changes

  $('#lightboxOverlay').hide().on('click', function(e) {
    _this.end();
    return false;
  });
  $lightbox = $('#lightbox');
  $lightbox.hide().on('click', function(e) {
    if ($(e.target).attr('id') === 'lightbox') _this.end();
    return false;
  });
  $lightbox.find('.lb-outerContainer').on('click', function(e) {
    if ($(e.target).attr('id') === 'lightbox') _this.end();
    return false;
  });
  $lightbox.find('.lb-prev').on('click', function(e) {
    _this.changeImage(_this.currentImageIndex - 1);
    return false;
  });
  $lightbox.find('.lb-next').on('click', function(e) {
    _this.changeImage(_this.currentImageIndex + 1);
    return false;
  });
  $lightbox.find('.lb-loader, .lb-close').on('click', function(e) {
    _this.end();
    return false;
  });
};