「PhotoSwipe」は、ページの画像をページ内にポップアップ表示させる、Lightbox風のJavaScript画像ギャラリー。
画像の表示方法がかなりよろしくて、拡大表示、キー操作、タッチジェスチャー、FacebookやTwitterへのシェアボタンなどが付いています。
拡大表示は、画像をフルサイズで見せたいときに有効ですし、タッチジェスチャーではスワイプでの画像送り以外に画像をつまんでの拡大・クローズに対応しているので、スマホユーザーには使いやすいでしょう。
タグ: Lightbox
[Js] レスポンシブ&スマホ向けな「Image LightBox」の設置方法
画像をポップアップ表示するLightbox系の「Image Lightbox」は、レスポンシブデザイン対応でタッチフレンドリーな操作が可能です。様々な表示方法があり、スワイプで画像を切り替えることができるのでスマホ対応サイトなどにも幅広く使用できます。（表示デモ）
実装はかなり簡単で、1つのjsファイルとjQueryをヘッダーで読み込んで、CSSを追加するだけなので、FC2などの無料ブログサービスにも最適です。
ここでは一例としてFC2ブログへの実装を紹介しています。
[WP] 「Lightbox Plus ColorBox」を使って、YouTube動画をポップアップ表示させる
テキストリンクや画像からのリンクを開くとYouTube動画をポップアップ再生・・・こういう風にするには、Lightbox系のプラグインで行えます。
とにかくすぐに導入するなら「Lightbox 2」と「WP Video Lightbox」がお手軽です。Lightbox 2は設定が要らず、WP Video LightboxはYouTubeのリンクタグに rel=”wp-video-lightbox” を記入するだけ。ですが、WP Video Lightboxは動画の大きさを設定できないようなので、その点ではイマイチなプラグインです。
というわけで、Lightbox系のプラグインで主流となっているのが「Lightbox Plus ColorBox」です。若干の設定が必要になりますが、デザインや大きさが細かく設定できるのでこだわりたい人には最適でしょう。
Lightboxのビデオ版「Videobox」
Videobox: Lightbox for videos
Youtube, Metacafe, Google Video, iFilmの動画をLightboxで観覧できるスクリプト。
ブックマーク追加をポップアップで登録可能にする
主要なソーシャルブックマーク追加ボタンを付けるの方法では、ブックマークに追加する際にページが移動するかtarget=”_blank”でウィンドウが開くので、実際使うと面倒な感じがします。
そこで、LightBoxのようにポップアップで表示してくれるJavascriptの「GreyBox」を使います。GreyBoxは画像だけでなくWEBサイトもポップアップ表示が可能。
これを使って、ブックマーク登録画面をその場でポップアップさせることで、訪問者の人にスマートなブクマ登録をしてもらえます。登録してくれる率が高まるかも？