JQuery Lightbox:缩略图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的冲突与.after()方法的新行为有关.您可以Lightbox.prototype.build在Lightbox中重写该方法,以避免在断开连接的节点上使用.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;
  });
};

Answer 2

此版本的 LightBox 似乎与最新版本的 JQuery 不兼容。

我已经链接到 Google 托管的 1.9 版本。我改成了下载自带的1.7版本，可以用了