ポップアップで拡大画像をエフェクト表示させるLightBox系ライブラリは多々ありますが、非常に人気があり、個人/商用はもちろん通販サイトなど多目的なサイトで利用されています。
しかし、継続利用（jQuery等の干渉が毎度めんどいから継続）している
元祖Prototype系LightBox(v2.05)だとレスポンシブ非対応
スマホやブラウザを縮小した際にも拡大画像が原寸大のままハミ出してしまい、美しくありません。
「簡単にレスポンシブに出来るだろう」
と思いましてゴニョってみましたら
３時間も掛かりました・・・
画像サイズのCSSがstyle属性として直接指定されてしまう。
CSSファイルから上書きできない。
値を消すよう.jsファイルを編集しても外枠の縦高が元画像の値になるか、デフォルトの250pxが最低値として適用される。
height: auto !important;で上書き解除するも効かないｗ
lightbox.js// this.prevLink.setStyle({ height: imgHeight + 'px' });
// this.nextLink.setStyle({ height: imgHeight + 'px' });
各部の高さ指定を削除してもダメ
inlineにしても高さが消えない・・・どんなBOXや？
試行錯誤した結果、実はFONT-SIZEが落とし穴！ あり得ない設定ｗ// if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
これらを前提条件として、
CSS(@media)で変更すればOKで、style属性を打ち消す最優先な!importantも多用します。
JavaScriptの勉強を疎かにしたから、今こんな大変な目にあっています・・・
コメント