WEBサイトの画像ポップアップツール「Pictune」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

画像をリストアップする機能を作っていた時に、その画像のサムネイル一覧を表示し、それぞれのサムネイルをクリックしたら、本画像を拡大表示するという機能はGoogleImageをはじめ、たくさん世の中のサービスで使われていますが、それをWEBサイトに導入するためのツールを作ってみました。
 

WordPressや、各種IDEのライブラリとしての提供もあるかもしれませんが、今回はJavascriptでタグを貼るだけで実装できる機能にこだわっています。 

すでにLightBoxというライブラリがありますが、そちらを使った時に、カスタマイズ機能が乏しかったので、軽量かつカスタマイズ重視のツールを構築してみました。

色々な画像表示機能

GoogleImageでは、以下のような、ポップアップではなく、吹き出しが割り込み表示される方式です。
 

 

Pinterestは、画面遷移方式です。
 

 

 

ソースコード

基本的に下記のjsとcssの2ファイルで構成しています。
同じ階層に設置してjsだけを読み込めばいいようにしています。
(ファイル名は変更しないでね)
 

使い方

IMGタグに属性を追加

対象ページの画像に以下の属性を追加してください。
 

 

data-pictune : このAttributeを元に画像クリックを判別します。
data-pictune-src : imgタグのsrc属性と同じでもいいですが、ここに入力された画像がポップアップ表示されます。
 

ライブラリタグを追加

書きScriptタグをWEBサイトに追加します。
 

※ライブラリのパスは任意に変更してください。

サンプルイメージ

画像にLIKEボタンをつけたようなサイトを構築する際に、LIKEカウント数も一緒にポップアップ表示させたい時などに利用できます。
 


 

 

このサンプルのようなカスタマイズを行うには、タグを設置する際に、以下のようなコードを書いています。
 

 

簡単に解説すると、ライブラリを読み込んだタグの下にscriptタグで、下記のような構造を作っています。

 

その下のstyleタグは、新たな要素を追加した時の、スタイルを記載しています。
 

これでかなり柔軟なカスタマイズが可能になりますが、HTMLソースにスクリプトを書くのが気になる人は、別途jsファイルを構築して読み込むやり方でも可能です。

Githubで公開

今回のソースコードは、そのままGithubに掲載しているので、DLなどは最新版も含めてこちらから取得してください。
 

Pictune | Github
 

要望や、質問、その他ご意見などありましたら、コメント記載をしてください。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です