7

我有一个奇怪的问题，灯箱似乎正在工作，但没有出现更大的图像。

图像链接正确，缩略图显示，但没有完整尺寸的图像。

控制台中也没有错误。

我的画廊 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>

4

4 回答 4

13

与 jQuery 1.9 的冲突​​与.after() 方法的新行为有关。您可以重写Lightbox.prototype.buildLightbox 中的方法以避免在断开连接的节点上使用 .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;
  });
};
于 2013-02-13T22:00:47.180 回答
3

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

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

于 2013-02-05T05:07:37.033 回答
0

我发现最新版本的 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 文件的 javascript_include_tag 之上。此外，注释掉 application.js 中对 jquery 的任何引用以禁用它。

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

于 2013-02-06T19:28:18.030 回答
0

您必须在锚标记中使用更大的图像 href，它不是自动的。您链接到图片的更大版本，而不是浏览器将您带到那里，而是在花式框中显示它。但是您仍然必须提供图像。

<a href="images/here_big.jpg" rel="lightbox[gallery]"><img src="images/here.jpg" alt="FAST Festival Image Gallery"></a>
于 2013-02-04T06:38:41.620 回答