Vanilla JavaScriptでズーム可能な画像ギャラリー【vanilla-zoom.js】

vanilla-zoom-js

Vanilla JS Image Zoom Pluginを使用すると、カーソル位置に応じて選択した画像のさまざまな部分をユーザーが表示できる画像ギャラリーを作成できます。CSS Script サイトよりダウンロードが可能な無料配布素材です。

【vanilla-zoom.js】プレビュー

パソコン版プレビュー

vanilla-zoom

著者ohmiler
公式ページwebsite
最後の更新2018年11月27日
ライセンスMIT

LICENSE:MIT
MITライセンスでは、商用利用だけでなく、コピーの使用、複製、変更、統合、公開、配布、サブライセンス、複製物を販売することが認められています。ただし、使用時には著作権表示とライセンス表示をする必要があります。ソースコード上(css、html)内に、著作権およびライセンス表示をすれば、サイト上で公開し表示する義務はありません。参照:MITライセンス(日本語翻訳)

Image Zoom Plugin ダウンロード

download

Image Zoom Plugin Download

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>

Image Zoom Plugin Download

フォトギャラリー

「集客」無料相談承ります!

お問い合わせはこちら

関連記事

  1. lightbox2

    あらゆるブラウザに対応!画像ポップアップスクリプト【Lightbox2…

  2. accordion_jsjavascript & CSS 超シンプル スライディング アコーディオン

    javascript & CSS 超シンプル スライディング…

  3. 滑らかな垂直アコーディオンパネル

    滑らかな垂直アコーディオン パネル【Accordion Panel】

  4. jQueryプラグイン Image Photo

    jQueryプラグイン サンプル集

  5. Lightboxに画像をグループ化する軽量なJavaScriptプラグ…

  6. imagehover.css-master

    マウスオーバーで画像アニメーション表示する44種類のCSS【Image…

制作実績一覧

  1. 行田市 三島造園有限会社
  2. 行田市リサイクルイズミ
  3. スパイシーベジーカレー
  4. bacchus
  5. ふじぜんリニューアル後
  6. legend-planning
  7. ポスティングこころざし様
  8. インテリアコーディネーター小島真子

最近の記事

  1. WordPress
  2. Ameba Ownd(アメーバオウンド)
  3. Jimdo(ジンドゥ)
  4. 無料ホームページ作成『ペライチ』
  5. 無料ホームページwix
  6. お客様の笑顔を撮影
  7. お客様の声アンケートのコツ
  8. 悉皆屋
  9. ホームページ商品説明文
  10. サイトリニューアルでSEO