Vanilla JS Image Zoom Pluginを使用すると、カーソル位置に応じて選択した画像のさまざまな部分をユーザーが表示できる画像ギャラリーを作成できます。CSS Script サイトよりダウンロードが可能な無料配布素材です。
この記事の内容
【vanilla-zoom.js】プレビュー
パソコン版プレビュー
| 著者 | ohmiler |
|---|---|
| 公式ページ | website |
| 最後の更新 | 2018年11月27日 |
| ライセンス | MIT |
LICENSE:MIT
MITライセンスでは、商用利用だけでなく、コピーの使用、複製、変更、統合、公開、配布、サブライセンス、複製物を販売することが認められています。ただし、使用時には著作権表示とライセンス表示をする必要があります。ソースコード上（css、html）内に、著作権およびライセンス表示をすれば、サイト上で公開し表示する義務はありません。参照：MITライセンス（日本語翻訳）
Image Zoom Plugin ダウンロード
Image Zoom Plugin 設置方法
スタイルシート『vanilla-zoom.css』とJavaScript『vanilla-zoom.js』をインポートします。
<link rel=”stylesheet” href=”vanilla-zoom/vanilla-zoom.css”>
<script src=”vanilla-zoom/vanilla-zoom.js”></script>
次のようにマークアップに従ってギャラリーに画像プレビューを挿入します。ユーザーはプレビューをクリックしたときにズームされるように選択された画像を変更することができます。
<div id="my-gallery" class="vanilla-zoom">
<div class="sidebar">
<img src="1.jpg" class="small-preview">
<img src="2.jpg" class="small-preview">
<img src="3.jpg" class="small-preview">
</div>
<div class="zoomed-image"></div>
</div>
ギャラリーを初期化して、画像ズーム機能を有効にします。
vanillaZoom.init('#my-gallery');
Image Zoom Plugin デモ
※スマートホンでは「Zoom」機能は動作しません。
Image Zoom Plugin ソースコード 設置例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vanilla JS Image Zoom Plugin</title>
<link rel="stylesheet" href="vanilla-zoom/vanilla-zoom.css">
</head>
<body>
<div class="container">
<h1>Vanilla JavaScriptでズーム可能な画像ギャラリー 【vanilla-zoom.js】</h1>
<div id="my-gallery" class="vanilla-zoom">
<div class="sidebar">
<img src="images/1.jpg" class="small-preview">
<img src="images/2.jpg" class="small-preview">
<img src="images/3.jpg" class="small-preview">
</div>
<div class="zoomed-image"></div>
</div>
</div>
<script src="vanilla-zoom/vanilla-zoom.js"></script>
<script>
vanillaZoom.init('#my-gallery');
</script>
</body>
</html>
こんにちは。【検索上位表示ホームページ制作】中小企業様の集客に特化したコンテンツ作成＆Webマーケティングのアドバイザーをしております。貴社の魅力を引き出し大企業と渡り合えるコンテンツ作りには自信がございます。Web事業歴15年目。「地域一番を目指したい」と言うweb担当者様お気軽にご相談ください。