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

Answer 2

看来这个版本的LightBox与最新版本的JQuery不兼容。

我已经链接到在Google上托管的1.9版本。 我改为下载附带的1.7版，它可以工作

Answer 3

你必须在锚标签中使用更大的图像href，它不是自动的。 您链接到更大版本的图片，而不是浏览器带你到那里它显示在一个fancybox。 但你仍然需要提供图像。

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

Answer 4

我发现最新版本的jquery-rails gem v2.2.0正在加载jquery 1.10，这是一个比我的生产站点更新的版本仍在运行jquery 1.8.3。 出于某种原因，这完全打破了Lightbox2（v2.51） - 屏幕变暗但没有显示图像。 不确定这是否是一个jquery或lightbox问题，但是为了能够将我的最新更改推送到生产中，我只是手动强制我的应用程序在我的应用程序布局中使用脚本标记来使用以前版本的jquery v1.8.3：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<%= javascript_include_tag "application" %>

请务必将其放在javascript_include_tag上方，以创建资产管道和所有其他javascript文件。 另外，注释掉application.js中对jquery的任何引用以禁用它。

我知道以这种方式链接并不理想但是我在尝试使用早期版本的jquery-rails gem时遇到了问题，因此至少在一段时间内手动操作会解决它。 希望这有助于其他人。