無料配布素材

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

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

プレビュー

スマホ版プレビュー

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

responsive gallery デモ

著者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. 解体業がホームページで集客に成功する8つの秘訣

  2. BingのAIチャットとは?メリットや注意点を初心者向けに解説

  3. GoogleのAI「Bard(バード)」とは?日本語版公開は?初心者向け解説

  4. AIチャットボット「ChatGPT」とは?使い方・注意点を初心者向けに解説

  5. AI文章作成サービスってどう?マーケティングでのメリット・デメリット

TOP