サムネイルクリックで画像が入れ替わる レスポンシブギャラリー 【responsive gallery gh pages】

サムネイルクリック レスポンシブギャラリー

メイン表示の画像下部のサムネイルをクリックで画像が入れ替わるギャラリー 【responsive gallery gh pages】の設置方法を解説します。スマホ表示時には2段となりますがレスポンシブ対応となっています。

プレビュー

スマホ版プレビュー

サムネイルクリックで画像が入れ替わる レスポンシブギャラリー 【responsive gallery gh pages】デモ

デモ

著者OmarIthawi
公式ページwebsite
デモページデモ
最後の更新2016年9月10日
ライセンスMIT

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

Responsive Gallery ダウンロード

download

Download

Responsive Gallery 設置方法

Responsive Gallery css 記述方法

スタイルシート(css)『gallery.min.css』は<head></head>内に記述!


<link rel="stylesheet" href="css/gallery.min.css">

Responsive Gallery JavaScript 記述方法

JavaScriptは『hammer.min.js』『main.min.js』<body></body>内の終了タグ直前に記述します。


<script src="js/hammer.min.js"></script>
<script src="js/main.min.js"></script>

Responsive Gallery 設置例


 <!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
     <title>サムネイルクリックで画像が入れ替わる レスポンシブギャラリー 【responsive gallery gh pages】デモ </title>
     <link rel="stylesheet" href="style.css">
 
     <link rel="stylesheet" href="css/gallery.min.css">
 
 </head>
 <body>
     <div class="container">
         <h1>Responsive Gallery デモ </h1>
 
  <div class="main-container">
    <div class="main wrapper clearfix">
      <article>
        <section>
          <div id="mygallery" class="gallery">
            <div class="images">
              <div class="active" style="background-image: url(img/01.jpg)"></div>
              <div style="background-image: url(img/02.jpg)"></div>
              <div style="background-image: url(img/03.jpg)"></div>
              <div style="background-image: url(img/04.jpg)"></div>
              <div style="background-image: url(img/05.jpg)"></div>
              <div style="background-image: url(img/06.jpg)"></div>
              <span class="left"></span>
              <span class="right"></span>
            </div>
            <div class="thumbs">
              <div class="active" style="background-image: url(img/01.jpg)"></div>
              <div style="background-image: url(img/02.jpg)"></div>
              <div style="background-image: url(img/03.jpg)"></div>
              <div style="background-image: url(img/04.jpg)"></div>
              <div style="background-image: url(img/05.jpg)"></div>
              <div style="background-image: url(img/06.jpg)"></div>
            </div>
          </div>
        </section>
      </article>
    </div>
  </div>
 
<script src="js/hammer.min.js"></script>
<script src="js/main.min.js"></script>
 
     </div>
 </body>
 </html>

Responsive Gallery Download

フォトギャラリー

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

お問い合わせはこちら

関連記事

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

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

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

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

  3. vanilla-zoom-js

    Vanilla JavaScriptでズーム可能な画像ギャラリー【va…

  4. easy-responsive-tabs-to-accordion

    水平または垂直タブをアコーディオンに最適化する軽量のjQueryプラグ…

  5. accordion-init

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

  6. imagehover.css-master

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

制作実績一覧

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

最近の記事

  1. セルフSEO対策
  2. STORES 予約
  3. 無料で予約サイトが作れる【MOSH】
  4. 第三者の影響力 ウィンザー効果
  5. 『お客様の声』アンケート
  6. コアウェブバイタル(Core Web Vitals)
  7. FAQリッチリザルト
  8. WordPress
  9. Ameba Ownd(アメーバオウンド)
  10. Jimdo(ジンドゥ)