Lightboxと軽量フォト グリッドギャラリー 【Grid Gallery】

grid-gallery-master

Lightboxが統合された軽量でレスポンシブなフォトGrid Gallery。任意のサムネイルをクリックしてポップアップ内の画像を切り替えることができます。

プレビュー

パソコン版プレビュー

grid-gallery-master

スマホ版プレビュー

grid-galleryスマホ版プレビュー

デモ

著者 jestov
公式ページ website
最後の更新 2019年4月21日
ライセンス MIT

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

Grid Gallery ダウンロード

download

Grid Gallery Download

Grid Gallery 設置方法

スタイルシート(css)『grid-gallery.min.css』は<head”></head”>内に記述!JavaScriptは『grid-gallery.min.js』<body></body>内に記述します。


<link rel=”stylesheet” href=”css/grid-gallery.min.css”>
<script src=”js/grid-gallery.min.js”></script>

<body></body>内にグリッドギャラリー(Grid Gallery)の画像を記述します


<div  class="gg-box">
  <img src="img/1.jpg">
  <img src="img/2.jpg">
  <img src="img/3.jpg">
  <img src="img/4.jpg">
  <img src="img/5.jpg">
  …
</div>

グリッドギャラリー
画像Lightboxのフルスクリーンオーバーレイを作成します。
<body></body>内に記述して終了です。


<div id="gg-screen" hidden”></div”>

Grid 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>Grid Gallery シンプルで軽量なグリッドギャラリー デモ </title>
     <link rel="stylesheet" href="style.css">
 
     <link rel="stylesheet" href="css/grid-gallery.min.css">
 
 </head>
 <body>
     <div class="container">
 
     <div id="gg-screen" hidden> </div>
 
         <h1>Grid Gallery デモ </h1>
 
         <div class="gg-box">
             <img src="img/1.jpg">
             <img src="img/2.jpg">
             <img src="img/3.jpg">
             <img src="img/4.jpg">
             <img src="img/5.jpg">
             <img src="img/6.jpg">
             <img src="img/7.jpg">
             <img src="img/8.jpg">
             <img src="img/9.jpg">
             <img src="img/10.jpg">
             <img src="img/11.jpg">
             <img src="img/12.jpg">
             <img src="img/13.jpg">
             <img src="img/14.jpg">
             <img src="img/15.jpg">
             <img src="img/16.jpg">
             <img src="img/17.jpg">
             <img src="img/18.jpg">
             <img src="img/19.jpg">
             <img src="img/20.jpg">
         </div>
 
     <script type="text/javascript" src="js/grid-gallery.min.js"> </script>
 
     </div>
 </body>
 </html>

Grid Gallery Download

フォトギャラリー

関連記事

  1. vanilla-zoom-js

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

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

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

  3. tiles_grid_video

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

  4. 「FAQ」「Q&A」「SIDE MENU」に最適なアコーディオンメニュー

    「FAQ」「Q&A」に最適なアコーディオンメニュー(無料素材…

  5. accordion-init

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

  6. handy-collapse

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

制作実績一覧

  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. 高い広告費に悩むサロン店主