レスポンシブ ポラロイドギャラリー【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. サムネイルクリック レスポンシブギャラリー

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

  2. hes-gallery-master

    モバイル対応レスポンシブギャラリー【HesGallery】

  3. jQueryプラグイン Image Photo

    jQueryプラグイン サンプル集

  4. handy-collapse

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

  5. accordion-init

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

  6. フォトギャラリー

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

制作実績一覧

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

最近の記事

  1. SEOで効果が出るまでの時間
  2. 目次を付けるメリットと付け方
  3. サブスクリプション
  4. Googleの強調スニペット
  5. コーポレートサイト
  6. twitter
  7. 造園業
  8. オンライン
  9. STORES
  10. オンラインキャバクラ