レスポンシブ ポラロイドギャラリー【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. accordion-init

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

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

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

  3. handy-collapse

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

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

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

  5. フォトギャラリー

    写真アルバム・フォトギャラリー作成・サンプル集 JavaScript・…

  6. easy-responsive-tabs-to-accordion

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

制作実績一覧

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