スマートフォンなど、様々なデバイス幅に対応したフォトギャラリーを、またひとつご紹介致します。今回は、ポップアップではなくダウンスライドでページの先頭に「写真とテキスト」を表示させることが出来るものになります。
▼こちらの記事を参考にさせて頂きました。
Script Tutorials - Web Development Tutorials Web development tutorials and other dev articles
▼データを一式ダウンロードしたい場合はこちら。
それでは見ていきましょう。
1.HTMLを記述
<header>内にて下記データを読み込みます。
1 2 3 4 5 6 7 8 |
<!-- add styles --> <link href="css/least.min.css" rel="stylesheet" type="text/css" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> <!-- add scripts --> <script src="js/jquery.min.js"></script> <script src="js/least.min.js"></script> <script src="js/jquery.lazyload.js"></script> |
<body>内に必要枚数分の画像リストを決まった規則で並べていきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<section> <ul id="gallery"> <li id="fullPreview"></li> <li> <a href="images/p1.jpg"></a> <img data-original="images/t1.jpg" src="img/effects/white.gif" alt="Photo 1" /> <div class="overLayer"></div> <div class="infoLayer"> <ul> <li><h2>Photo 1</h2></li> <li><p>View</p></li> <li><p>ヤギ</p></li> </ul> </div> <div class="projectInfo">ヤギの写真</div> </li> <!-- other photes --> </ul> </section> |
2.CSSを記述
ダウンロードデータをちょこっとイジっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
section { background-image: url("../img/bg.jpg"); box-shadow: none; margin:0; padding:0; } section li a, section li .overLayer, section li .infoLayer { height: 213px; width: 320px; border-radius:10px; border: 5px solid #FFF; } section li .infoLayer ul li { padding: 5px 0 0; } li#fullPreview{ background:#100f1a; } #gallery li>img{ border-radius:10px; border: 5px solid #FFF; box-shadow: 2px 2px 2px #ccc; } #gallery li>img:hover{ } #gallery li#fullPreview>img { border-radius: 0; border: none; box-shadow: none; } li#fullPreview .fullCaption{ color: #696969; } |
3.画像を用意
[images]フォルダの中に、大きな画像と、サムネイル用の縮小画像を入れておきます。サンプルの中では、大きな画像(1000×667px)、サムネイル画像(320×213px)で入れてあります。
以上で完了です。