[JS] 画像の拡大やシェア、タッチジェスチャーに対応したLightbox風「PhotoSwipe」

2014年12月9日

「PhotoSwipe」は、ページの画像をページ内にポップアップ表示させる、Lightbox風のJavaScript画像ギャラリー。

画像の表示方法がかなりよろしくて、拡大表示、キー操作、タッチジェスチャー、FacebookやTwitterへのシェアボタンなどが付いています。

拡大表示は、画像をフルサイズで見せたいときに有効ですし、タッチジェスチャーではスワイプでの画像送り以外に画像をつまんでの拡大・クローズに対応しているので、スマホユーザーには使いやすいでしょう。

[画像素材] 著作権フリーの画像素材を検索できる「FindA.Photo」

2014年12月8日

著作権フリーな画像素材だけをストックしている「FindA.Photo」。
著作権フリーなので、著作権者の表示無しに加工して自由に使用することができます。

2014年12月2日

「Dimensions」は、Webページの画像やレイアウトのサイズを測ることができるChrome拡張機能です。

画像のサイズやレイアウトのサイズ、ボタンやアイコンのサイズなどをソースを見ずに知る事ができるので、Webデザインの調節を行うときにかなり便利。サイズを%やem指定で行っている時でも、実際のpixelで測れるので、人によっては、必須のツールといってもいいかもしれません。

画像をポップアップ表示するLightbox系の「Image Lightbox」は、レスポンシブデザイン対応でタッチフレンドリーな操作が可能です。様々な表示方法があり、スワイプで画像を切り替えることができるのでスマホ対応サイトなどにも幅広く使用できます。（表示デモ）

実装はかなり簡単で、1つのjsファイルとjQueryをヘッダーで読み込んで、CSSを追加するだけなので、FC2などの無料ブログサービスにも最適です。

ここでは一例としてFC2ブログへの実装を紹介しています。

Tumblrをミニブログとしてカスタマイズする際に有効な“関連するエントリー（Related Posts）”の表示は、「tumblr-in-link」というウィジェットツールを使用することで可能です。

これを使うと、タグ付けしたエントリーから関連するものをランダムで表示してくれます。