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時遇到了問題，因此至少在一段時間內手動操作會解決它。 希望這有助於其他人。