2.写真の拡大ポップアップ 編

背景も同時に暗くします

写真のポップアップツールと言えば jQuery の[Lightbox] が一時期大人気で、あのサイトでもこのサイトでも使われていましたが、そんなに難しい事でも無いので試したもので、画面のサイズほぼほぼいっぱいに拡大するコードを作ったのが・・ 結構以前ですけど、一応備忘録に。

レスポンシブにも対応しなければ意味が無いので、一応は対応すべく考えたのですが・・・
基本的な思考はPC用ですね。
貧弱なモバイル端末では、動きがぎくしゃくしてしまいます。(現行のデバイス[モバイル機器]の性能なら、それほどストレスは感じません。)
 
Lightbox 使えば済む事ですが、そうしたくない事もありますので。

Navi Open
Close Navi
ads by google
デモと概要
 サンプルデモでは、高解像度用(主にPC用)と低解像度用(主にmobile と tablet)に2サイズの画像を用意しています。
1サイズで全てのデバイスを賄う事も可能ですが、mobile デバイスに不要なファイルサイズの大きい画像を用意しても・・と言う事です。(既に現在の機種では問題は無いでしょう)
 全てのポップアップは、Window サイズをはみ出す事が無いように、横長 window の場合は高さ×90%とし、縦長 window の場合は幅×90%のサイズで表示します。 大きいサイズの画像は 1024*728 小さいサイズは 507*360 (各px) ですから、大きいサイズの基準スクリーン解像度は 1920*1080 と言うところです。 最近では 4K 8K と更に高解像度のデスプレイが、やがては主流になっていくのでしょうから、それ用に更に大きいサイズの画像も用意する事も視野に入れています。


サンプルの小サイズ画像をクリックすると、CSSプロパティーの[opacity:]を用いて透過させた[.shade]を
バックスクリーンにしてポップアップ用の画像が表示されす。
 [.shade]を用いる事でサンプル画像へのアクセスが遮断されますので、重複起動も防止されます。
サンプルデモでは、コンテンツサイズ[#container]を小さくしてあるため、スクロールする事は有りませんが、
コンテンツサイズが大きい場合はポップアップ画像の容器となる[#photobox]のCSSプパティーを[:fixed]で固定化する事をお勧めします。
テストでは、Windows 用の Safari で easing の挙動がぎこちなかった。 ipad3 でも動きがカタい。
HTML
ご覧の環境では、object要素がサポートされていないようです。外部文書を別ウィンドウで開いてください
CSS
ご覧の環境では、object要素がサポートされていないようです。外部文書を別ウィンドウで開いてください
JS
ご覧の環境では、object要素がサポートされていないようです。外部文書を別ウィンドウで開いてください