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. collapsible

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

  2. hes-gallery-master

    モバイル対応レスポンシブギャラリー【HesGallery】

  3. zoomwall_js

    CSS ポップアップ フォトギャラリー【 zoomwall.js 】

  4. handy-collapse

    アコーディオンメニュー内にアコーディオン【handy-collapse…

  5. CSS + HTML だけのアコーディオン

    CSS + HTML だけのアコーディオン(Accordion)メニュ…

  6. tiles_grid_video

    YouTube 動画のスライドショー📽をホームページへ…

制作実績一覧

  1. bacchus
  2. ふじぜんリニューアル後
  3. legend-planning
  4. ポスティングこころざし様
  5. インテリアコーディネーター小島真子

最近の記事

  1. LINE公式アカウント
  2. Google Maps
  3. youtube seo
  4. アーテック・エジソンアカデミー
  5. パズル×ロボット×プログラミング 3つとも学習できる小学校低学年向け教室
  6. z会子供プログラミング講座
  7. embot
  8. カルチャースクール
  9. 外壁塗装
人気の記事 おすすめ記事
  1. フォトギャラリー
  2. 高い広告費に悩むサロン店主
  3. 広告費
  4. SEO評価を下げる低品質コンテンツ
  5. 文字装飾
  1. ブログの見出し
  2. ブログタイトル
  3. 集客ブログの作り方
  4. ブログ集客方法・パソコン操作
  5. 高い広告費に悩むサロン店主