lightboxのカスタマイズ 問題まとめ

jQueryのプラグインlightboxを使ってみて

 

画像をクリックorタップで拡大させることのできる『Lightbox』というプラグインを導入させたのですが、結構気になる挙動が多いのでテストページでいろいろ試してるんだけど全然うまくいかない(-“-)

 

やりたいことは、

画像をクリックすると拡大され周りにオーバーレイがかかる動き(モーダルウィンドウ)をしてくれるんだけど、その画面のままPCでもスマホでもスクロールできてしまう。

 

 

下に行くとオーバーレイでカバーされた画面が下に広がる\(^o^)/

 

これかっこ悪いので直したい!

 

ちなみに公式ページでももちろんこのままの挙動で提供されています。

 

このモーダル時に背景を固定させスクロールできないようにし、また元の画面でに戻ったら、見ていた場所からスクロールを開始させるようにカスタマイズをしたい。

 

 

何回も書き直してコレ(;^_^A って感じだけどひとまず途中経過。

とこんな感じで、クリックイベントでクラス名を取り外しするという書き方をしたいのだけど、モーダル時の拡大されたときの画像以外の領域をクリック

 

 

この書き方でクラス名を外したいのだが外れず、ただ普通に画像がdisplay:noneになって本来のプラグイン通りの記述の動きしかしてくれない。

 

(オーバーレイにかかる動きで何か起きてると思ってる…。)

 

でもそのあとモーダルウィンドウ時ではない元の状態の適当な場所をクリックでクラスタグは外されるんだけどそれだと意味がない。あとちょっとなのに、このダブルクリックの謎がどうもわからない…。

まだ作りかけなのでスクロールで読み込んだ次の画像に対してはこの動きは作用されないので改善が多すぎたのでここで少しまとめます。



問題まとめ

1,モーダル時にスクロールされる。

2,1のせいてスクロールすると画像が流れてしまう。

 

完成理想

 

1,モーダル時に背景を固定し、元の画面に戻ったら見ていた場所からの再スタートでスクロールができる

 

2,別のhtmlを読み込んで画像を表示させているため新たに読み込まれた画像に対しては私が書いた動きが効かないので読み込んでから繰り返し作業の記述も作る。

 

3,現在bodyにoverflow:hidden;でスクロールバーを”見えなく”しているけど、スマホだと普通にスクロールされてしまうため、やはりposition:fixed;で固定したほうがいいと思われるが、その場合画像を拡大した時にトップまで戻ってしまうため、閲覧している場所の高さを取得する必要がある…

 

I’m not sure any more!!/(^o^)\

 

あれやって成功したと思ったら別の場所の挙動がおかしくなってたり。プログラムを組むのは奥が深く、また確実でないといけないね。

まだプログラム脳になってないので自分にとっては難しい壁だけど何とか完成させたい。

 

今これを課題として制作にあたっているけど、このプラグインはレスポンシブ【非】対応だからそのうちプラグインを変えると思うけど、そのレスポンシブ対応のプラグインもいくつか試したんだが、どれもあまり好きじゃない機能やデザインでなかなか悩ましいです。

自分で全部かければいいんだけど、たぶんめちゃくちゃ時間かかるし、今は自分のレベルにあった順番に進めていこうかなと(^^)

改善できたらまたメモ書きします。

 

lightboxのモールダウン時の挙動の解決法をまとめてあります。(PCのみの挙動)