レスポンシブ対応のフォトギャラリー「least.js」

レスポンシブに対応のフォトギャラリー「least.js」

 

スマートフォンなど、様々なデバイス幅に対応したフォトギャラリーを、またひとつご紹介致します。今回は、ポップアップではなくダウンスライドでページの先頭に「写真とテキスト」を表示させることが出来るものになります。

 

 

デモサンプル

 

▼こちらの記事を参考にさせて頂きました。

Script Tutorials - Web Development Tutorials Web development tutorials and other dev articles

 

▼データを一式ダウンロードしたい場合はこちら。

ダウンロード

 

それでは見ていきましょう。

 

1.HTMLを記述

<header>内にて下記データを読み込みます。

 

<body>内に必要枚数分の画像リストを決まった規則で並べていきます。

 

2.CSSを記述

ダウンロードデータをちょこっとイジっています。

 

3.画像を用意

[images]フォルダの中に、大きな画像と、サムネイル用の縮小画像を入れておきます。サンプルの中では、大きな画像(1000×667px)、サムネイル画像(320×213px)で入れてあります。

以上で完了です。

 

デモサンプル

 




タイトルとURLをコピーしました