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

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

  2. Lightboxに画像をグループ化する軽量なJavaScriptプラグ…

  3. handy-collapse

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

  4. vanilla-zoom-js

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

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

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

  6. 無料素材メニュー

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

制作実績一覧

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

最近の記事

  1. tech-kids-school
  2. セールスライティング
  3. キーワードの選び方
  4. YouTube 集客
  5. 幼児のプログラミング教育
  6. E-A-T(専門性・権威性・信頼性)
  7. ホームページ集客
  8. instagram
  9. ameba-seo
  10. 開業
人気の記事 おすすめ記事
  1. フォトギャラリー
  2. 高い広告費に悩むサロン店主
  3. 広告費
  4. SEO評価を下げる低品質コンテンツ
  5. 文字装飾
  1. ブログの見出し
  2. ブログタイトル
  3. 集客ブログの作り方
  4. ブログ集客方法・パソコン操作
  5. 高い広告費に悩むサロン店主