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

誰かが何が起こっているのか知っていますか?

編集:

コンソールをチェックすると、呼び出されたときにライトボックスdivに画像が表示されないことがわかります

<div id="lightboxOverlay" style="width: 1633px; height: 1234px; display: block;"></div>

4

4 に答える 4

13

jQuery 1.9との競合は、.after()メソッドの新しい動作に関係しています。切断されたノードで.after()メソッドを使用しないように、ライトボックスのメソッドを書き直すことができますLightbox.prototype.build。ライトボックスはjQuery1.9で再び機能します。

私のすぐにハッキングされた解決策(それは機能します)は次のとおりです。より多くの連鎖でクリーンアップすることもできますが、後でそれを残すか、おそらくライトボックス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

アンカータグでより大きな画像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 に答える
0

jquery-rails gemv2.2.0の最新バージョンがjquery1.10をロードしていることがわかりました。これは、まだjquery1.8.3を実行している本番サイトよりも新しいバージョンです。何らかの理由で、これはあなたが説明したとおりにLightbox2(v2.51)を壊しました-画面は暗くなりますが、画像は表示されません。これがjqueryまたはライトボックスの問題であるかどうかはわかりませんが、最新の変更を本番環境にプッシュできるように、アプリケーションレイアウトでスクリプトタグを使用して、アプリに以前のバージョンのjqueryv1.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 に答える