MediaView.js

WEBサイト上の画像をポップアップ表示・拡大表示させるJavascriptプラグインを開発しました。

機能

ダウンロードしたファイルを配置し、以下のタグのいずれかを <head> タグの一番下もしくは <body> タグのどこかに配置してください。ファイルパスは各環境に合わせて適宜変更してください。

<script src="mediaview.js"></script>
<script src="mediaview.min.js"></script>

上記のスクリプトが読み込まれると、imgタグのクリック時は自動でMediaView.jsを用いた画像表示になります。

<img data-media-view="グループ名">

data-media-view 属性の文字列でグループ化を行います。空の場合や data-media-view 属性が指定されていない場合は、自動でデフォルトのグループ [default] とみなされます。

<img data-media-view-src="test.png">

data-media-view-src 属性が指定されている場合、 data-media-view-src 属性のファイルパスで画像が表示されます。

<img data-media-view="[null]">

data-media-view 属性に [null] が指定されている場合、グループ化しないで表示されます。前後の画像への矢印は表示されません。

<img data-media-view="[false]">

data-media-view 属性に [false] が指定されている場合、その画像ではMediaView.js表示が無効になります。