MediaView.js

公開日: 2019/01/05

カテゴリ: JavaScript

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.webp">

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表示が無効になります。

2019/01/05

カテゴリ: JavaScript