javascript – JQuery Lightbox：缩略图OK,背景暗淡,但没有大图像显示

我有一个奇怪的问题,灯箱似乎工作但没有出现更大的图像.

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

控制台中也没有错误.

我的画廊HTML设置如下：

<a href="images/here.jpg" rel="lightBox"><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>

解决方法

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

javascript – JQuery Lightbox：缩略图OK,背景暗淡,但没有大图像显示

解决方法

猜你在找的jQuery相关文章