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. accordion-init

    JavaScriptのモダンで滑らかな展開型アコーディオン【accor…

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

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

  3. 無料素材メニュー

    CSS MENU メニュー ボタン テンプレートによる無料素材

  4. レスポンシブ ポラロイドギャラリー【Vintalight】

    レスポンシブ ポラロイドギャラリー【Vintalight】

  5. collapsible

    JavaScriptでスムーズなコンテンツ切り替えプラグイン デモ【c…

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

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

制作実績一覧

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

最近の記事

  1. PowerDirector
  2. ホームページは自分で作る
  3. 無料ホームページメッリトデメリット
  4. リンクビルディング
  5. ABテスト
  6. インターネット広告
  7. インターネット広告
  8. ホームページのリニューアル
  9. ドメインパワー