1

Bootstrapにこのjqueryライトボックスプラグインを使用しようとしているときに（ソースコードをクリックしてください）、jQueryプラグインがどのように機能するかについて奇妙な問題に遭遇しました。

divライトボックス用のコンテナがあります。

<div class="lightbox fade" id="demoLightbox" style="display: none;">
    <div class='lightbox-content'>
        <img src="image.png">
    </div>
</div>

もし私が：

  1. ライトボックスを開く$("#demoLightbox").lightbox()
  2. で閉じる$("#demoLightbox").lightbox('hide')
  3. AJAXを介して画像を変更する
  4. nreライトボックスを再度開くように依頼する$("#demoLightbox").lightbox()

次に、2番目のライトボックスが表示されますが、最初のライトボックスと同じサイズです。新しい画像に従って再計算されていません！

サイズの計算はLightboxクラスのコンストラクターで行われるので、新しいインスタンス$("#demoLightbox").lightbox()が得られ、計算をやり直すと思いました。しかし、私は同じものを手に入れたようです！どうしたの ？

4

1 に答える 1

1

サイズの計算がコンストラクターでのみ行われる場合、最も簡単なことは、試みたように新しいインスタンスを作成することです。ただし、最初に古いインスタンスを削除する必要があります。

$('#demoLightbox').removeData('lightbox');

一挙に新しいインスタンスが必要な場合は、

$('#demoLightbox').removeData('lightbox').lightbox();

更新: 破壊的でないオプション

このプラグインには文書化されていない機能がいくつかあるようですが、そのうちの 1 つは目的に役立つ可能性があります。つまり、resizetofitというオプションにフラグがあります。デフォルトでは、に設定されていfalseます。このフラグは、ライトボックスのサイズ自体をウィンドウ サイズに合わせるために使用されます。サイズ変更の過程で、コンテンツの寸法が再計算されます。

data-resizetofit="true"開始リンクのマークアップまたは に属性を追加する<div class="lightbox" >と、メソッドの呼び出しごとにコンテンツの再計算がトリガーされますshow()。

注:<img>コンテンツのサイズの再計算は、が完全に新しい に置き換えられた場合にのみ発生します<img>。src最初の計算の後にディメンション計算が要素にキャッシュされるため、属性を変更するだけでは失敗します。

于 2012-09-05T22:14:27.400 に答える