LightBoxのレスポンシブ

ポップアップで拡大画像をエフェクト表示させるLightBox系ライブラリは多々ありますが、非常に人気があり、個人/商用はもちろん通販サイトなど多目的なサイトで利用されています。
LightBox PC表示

しかし、継続利用(jQuery等の干渉が毎度めんどいから継続)している
元祖Prototype系LightBox(v2.05)だとレスポンシブ非対応
LightBox 縮小するとはみ出る
スマホやブラウザを縮小した際にも拡大画像が原寸大のままハミ出してしまい、美しくありません。

「簡単にレスポンシブに出来るだろう」
と思いましてゴニョってみましたら
3時間も掛かりました・・・

画像サイズのCSSがstyle属性として直接指定されてしまう。
CSSファイルから上書きできない。
値を消すよう.jsファイルを編集しても外枠の縦高が元画像の値になるか、デフォルトの250pxが最低値として適用される。
height: auto !important;で上書き解除するも効かないw

lightbox.js
// this.prevLink.setStyle({ height: imgHeight + 'px' });
// this.nextLink.setStyle({ height: imgHeight + 'px' });

各部の高さ指定を削除してもダメ
inlineにしても高さが消えない・・・どんなBOXや?
試行錯誤した結果、実はFONT-SIZEが落とし穴! あり得ない設定w
// if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
LightBox レスポンシブ対応
これらを前提条件として、
CSS(@media)で変更すればOKで、style属性を打ち消す最優先な!importantも多用します。

JavaScriptの勉強を疎かにしたから、今こんな大変な目にあっています・・・




コメント

コメントを書く
お名前:

メール:

Web URL:

コメント: [必須入力]

認証コード: [入力必須] ※ 画像の文字を半角で入力してください。
認証 : 一二三

 ※ 承認されたコメントのみ表示されます。

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。