3

私はここを見ました：http：//drupal.org/node/1630630が、これはDrupalサイト専用です。通常のlightbox2ライブラリを微調整して応答性を高め、小さなモバイル画面に表示する方法を知っている人はいますか？

「レスポンシブ」とは、画面サイズに応じて画像が表示されることを意味します。現在、サイズは常に同じで、小さな画面ではスクロールする必要があります。

4

6 に答える 6

3

さて、これは非常に遅いですが、私もこの欲しい支援に出くわしました。回答の 2 つのコード スニペットは「ある程度」機能しますが、ひどいものに見えます。

これははるかにうまく機能します、IMO：

.lb-image, .lb-dataContainer {
 max-width: 100%;
 height: auto !important;
 width: 100%;
}

.lb-outerContainer {
 max-width: 100%;
 height: auto !important;
}
于 2013-01-17T20:53:05.623 に答える
1

max-width:100%（CSSを使用して）画像に設定できるはずです。画像をレスポンシブにするために必要なのはこれだけです。lightbox2が画像にスタイルを設定する場合は、セレクターの特異性を確認してオーバーライドするだけです。

于 2012-07-22T14:16:22.037 に答える
1

私が使用した： .lb-image, .lb-dataContainer, .lb-outerContainer { max-width: 100%; height: auto !important; width: auto !important; }

于 2012-11-15T23:19:53.170 に答える
1

ポインタをありがとう...いくつかの以前の提案を出発点として使用し、その後フィドルを持っています。

私は、新しいインストールではなく、LightBox2 v2.0 の既存のインストールを使用してサイトで作業しています (また、画像を再コーディングする必要があります)。フィドルを用意することにしました...

私のCSSは以下です。これで完全にレスポンシブになりました。

主なポイントは、幅、最大幅、高さ、最大高さを変更することです。重要です。ビューポートに対応する幅を取得すると、#outerImagecontainer が非常に長くなり、最大高さまたは固定高さになることがわかりました。また、幅を 768px に制限しました。サイトの幅と画像も同様に拡大すると、明らかに損失が大きくなります。

lightbox、#lightbox img、#outerImageContainer、#hovernav、#imageDataContainer、#overlay はすべて少し編集されています。

    #lightbox{  position: absolute; max-height:700px; left: 0; width: 100%; z-index: 100; text-

align: center; line-height: 0;}
#lightbox img{ width:100%; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; max-width: 760px; width:80% !

important; max-height:50%; height: auto !important; margin: 0 auto;font-size:11px !important; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 25%; text-align: center; 

line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; max-height:50%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); 

/* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/assets/lightbox2/images/prevlabel.gif) 

left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/assets/lightbox2/images/nextlabel.gif) 

right 15% no-repeat; }

#imageDataContainer{ font: 85% arial, sans-serif; background-color: #fff; margin: 0 auto; line-

height: 1.4em; overflow: auto; max-width: 760px; width: 80% !important; max-height:50px;}

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }  
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;  }           
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}      

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: auto; background-

color: #000; }
于 2015-04-27T13:59:14.930 に答える
0

私にとっては、NickWが言うように機能しました（この解決策を見つけるのを手伝ってくれてありがとう）、少し変更する必要がありました：

@media only screen and (max-width: 680px) {.lb-dataContainer{
max-width: 80%; 
height: auto !important; 
width: auto !important; }.lb-outerContainer { 
max-width: 80%; 
height: auto !important; 
width: auto !important;}}

ライトボックスは特定の画面サイズまで問題がないので、画像が小さな画面サイズに収まり始めている部分にメディアクエリを使用しました（私の場合は680pxでした）。また、コンテナが画面の空き幅をすべて使用していない場合に最適に機能します（私にとっては見栄えが良いだけです）が、それは単なる選択であるため、それがどのように機能するかを確認してください. .lb-image については、上記の投稿に書かれているコードを使用してください。

于 2014-11-24T04:32:33.370 に答える