レスポンシブ ポラロイドギャラリー【Vintalight】

レスポンシブ ポラロイドギャラリー【Vintalight】

【Vintalight】は、pug, sass y vanilla JS (Babel). で作成されたlightbox(ライトボックス)エフェクトを備えたレスポンシブインスタントスタイルフォトギャラリーです。

プレビュー

ポラロイドギャラリー

スマホ レスポンシブ ポラロイドギャラリー

デモ

著者Jopzik
公式ページwebsite
デモページデモ
最後の更新2018年2月18日
ライセンスMIT

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

Vintalight ダウンロード

download

Download

Vintalight 設置方法

Vintalight css 記述方法

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


<link rel="stylesheet" type="text/css" href="css/style.css" />

Vintalight JavaScript 記述方法

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


<script type="text/javascript" src="js/script.js"></script>

Vintalight 設置例


 <!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>レスポンシブ ポラロイドギャラリー【Vintalight】デモ </title>
     <link rel="stylesheet" href="style.css">
 
<link rel="stylesheet" type="text/css" href="css/style.css" />
 
 </head>
 <body>
     <div class="container">
         <h1>レスポンシブ ポラロイドギャラリー【Vintalight】デモ </h1>
 
<section class="vintalight" id="vintalight">
 
  <figure class="vintalight__container">
    <div class="vintalight__photo"><img class="vintalight__img" src="img/01.jpg" alt="Happy Moment"></div>
    <figcaption class="vintalight__caption">
      <h3 class="vintalight__text">Happy Moment</h3>
    </figcaption>
  </figure>
 
  <figure class="vintalight__container">
    <div class="vintalight__photo"><img class="vintalight__img" src="img/02.jpg" alt="Happy Moment"></div>
    <figcaption class="vintalight__caption">
      <h3 class="vintalight__text">Happy Moment</h3>
    </figcaption>
  </figure>
 
  <figure class="vintalight__container">
    <div class="vintalight__photo"><img class="vintalight__img" src="img/03.jpg" alt="Happy Moment"></div>
    <figcaption class="vintalight__caption">
      <h3 class="vintalight__text">Happy Moment</h3>
    </figcaption>
  </figure>
 
  <figure class="vintalight__container">
    <div class="vintalight__photo"><img class="vintalight__img" src="img/04.jpg" alt="Happy Moment"></div>
    <figcaption class="vintalight__caption">
      <h3 class="vintalight__text">Happy Moment</h3>
    </figcaption>
  </figure>
 
  <figure class="vintalight__container">
    <div class="vintalight__photo"><img class="vintalight__img" src="img/05.jpg" alt="Happy Moment"></div>
    <figcaption class="vintalight__caption">
      <h3 class="vintalight__text">Happy Moment</h3>
    </figcaption>
  </figure>
 
  <figure class="vintalight__container">
    <div class="vintalight__photo"><img class="vintalight__img" src="img/06.jpg" alt="Happy Moment"></div>
    <figcaption class="vintalight__caption">
      <h3 class="vintalight__text">Happy Moment</h3>
    </figcaption>
  </figure>
 
</section>
<script src="js/script.js"></script>
 
     </div>
 </body>
 </html>

Vintalight Download

フォトギャラリー

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

お問い合わせはこちら

関連記事

  1. jQueryプラグイン Image Photo

    jQueryプラグイン サンプル集

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

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

  3. tiles_grid_video

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

  4. imagehover.css-master

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

  5. vanilla-zoom-js

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

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

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

制作実績一覧

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

最近の記事

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