ローカルPCに保存した画像をPinterestやtumblrのようにタイル状に配置してブラウザで表示する

2019年9月29日 Web, システム開発

Webサイトを閲覧していて気に入った画像をローカルPCに保存してあとで見ようとしたとき、その都度画像ファイルをクリックして見るのは結構手間に感じます。

Pinterestやtumblrのように、ローカルPC内の画像もタイル状に表示させることができれば便利になるのではと思ったので作って見ました。

使ったもの

今回はPC環境のChromeブラウザを使って表示確認します。

オブジェクトをタイル状に表示するjQueryプラグインです。また、閲覧するブラウザ幅に応じてオブジェクトを再配置してくれるレスポンシブデザインを簡単に作れます。

オブジェクトには画像以外にもテキストデータなどを入れることができます。

画像をクリックした時にモーダルウィンドウで画像表示するjQueryプラグインです。画像をクリックしてもページが切り替わったり別ウィンドウで開いたりしなくて良いので助かります。

デモページでは次のようなディレクトリ構成にしました。「pics」ディレクトリに保存した画像を入れておくと、ディレクトリ内の画像ファイルをブラウザ上のWebページ「demo.html」で表示します。

「demo.html」には保存した画像に対応するimgタグやリンクタグを連記します。

下はデモページのキャプチャ画像です。ウィンドウ幅1,300pxくらいでキャプチャしたときのものです。サンプルの画像ファイルは当サイトのアイキャッチ画像を使用しています。

この作業によって『フォルダを開いて画像ファイルをクリックして画像を一つ一つ閲覧する』といった手順を踏むよりも簡単になったのではないでしょうか。

また、綺麗に整列されていますので見た目もぐっと良くなった気がします。

ただ、画像ファイル名に特殊文字を入れているとブラウザで正しく表示されなくなるので、その際は画像ファイルのリネームが必要になってきます。