0

このオリジナルのブートストラップ ライトボックスを使用しています: http://jbutz.github.io/bootstrap-lightbox/

私はそれを取り除き、画像リンクを div クラス"visible-tablet"と"visible-phone". このクラスでは、ポップアップ イメージは表示されません。たとえば、次のとおりです。

http://www.getaveo.com/_bootstrap4/lightbox4.html

1) そのページを 900px 以上のデスクトップ ビューで表示してください。右側の赤い列にある画像のサムネイルをクリックします。大きな画像がポップアップし、ライトボックスが機能しています。

2) 次に、ブラウザを iPad ビューまたは 700px 幅のように小さくしてください。「目に見えるタブレット」のため、赤い列がポップダウンします。次に、画像のサムネイルをクリックします。大きな画像のポップアップが表示されない、機能しない。

3) Phone View 500px以下も同様。「目に見える電話」画像のサムネイルをクリックしてください。大きな画像のポップアップが表示されない、機能しない。

画像のサムネイルをポップアップさせ、ライトボックスを と のときに機能させるにはどうすればよい"visible-tablet"です"visible-phone"か?

4

1 に答える 1

0

ライトボックスがある with クラス fluid-row には、「visible-desktop」クラスがあります。これにより、ウィンドウ サイズを小さくすると div 全体が非表示になります。親の div 表示がなしになったため、すべての子 (ライトボックスを含む) が非表示になります。これは、HTML に一意でない ID があるために発生します。要素の id は一意である必要があります。同じ div id="demoLightbox" が複数回あります。したがって、最初のものを選択します。

バージョン (デスクトップ、テーブル、電話) ごとに個別の div id を作成します。

于 2013-05-03T23:10:09.330 に答える