フォトアルバムを作る
photo-workファイルを使用
01 画像をダウンロード
フォトアルバムに使用する写真を「PIXABAY」などからダウンロード。
ダウンロードサイズ／640px
写真の枚数／3～6枚
※写真のサイズは高さも同じになるように編集してください／width:640px height:○○○px
windowsのペイント、photoshop、iLOVEimgなどで編集
※写真の名前はimg1、img2、img3 にすると簡単に入れ替えられます
02 タイトルを変更
サンプルではタイトルやh1が「Photo album」となっていますので写真にマッチした名前に変更してください。
HTML
<title>PHOTO ALBUM</title>
<h1>Photo album</h1>
03 jQueryのリンク・JavaScript を確認
</body>の上にjQuery本体と自作script.jsを入れてあります
HTML
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/script.js"></script>
</body>
04 サムネイル画像のサイズ変更方法
拡大表示するエリアは「figure」要素でマークアップしてあります。
最初の画面ではimg1.jpgを表示。
※今回使用しているfigureタグ（figure要素）は、写真などのまとまりを表します
HTML
<figure><img src="img/img1.jpg" width="640" height="427" alt="Photo"></figure>
サムネイルと拡大写真は同一のもの使っています
サムネイルの写真サイズは自由に変更してかまいません
例）<img src="img/img1.jpg" width="100" height="67" alt="Photo1">
HTML
<ul>
<li><a href="img/img1.jpg"><img src="img/img1.jpg" width="150" height="100" alt="Photo1"></a></li>
<li><a href="img/img2.jpg"><img src="img/img2.jpg" width="150" height="100" alt="Photo2"></a></li>
<li><a href="img/img3.jpg"><img src="img/img3.jpg" width="150" height="100" alt="Photo3"></a></li>
</ul>
05 CSSでデザインを変更
bodyやheaderなど自由に変更してください
CSS
body{
font-family: sans-serif;
background-color: #fffaf0;
}
h1{
color:#94846a;
font-size:2.6em;
font-weight:bold;
text-align:center;
}
header{
background-color: antiquewhite;
padding: 30px 0;
margin-bottom: 40px;
}
06 jQuery 確認
サムネールをクリックすると、拡大画像の表示が変わる
$(function(){
// サムネールをクリック
$("a").click(function(){
// 拡大画像のsrc属性に、選択したa要素のhref属性を入れる
$("figure img").attr("src", $(this).attr("href"));
return false;
});
});
07 画像解像度の確認
最後にもう一度、画像解像度（image resolution）をチェックしてください
Important！
画像解像度が変更できていない場合が多いので必ず全ての写真を
iLOVEimg で「画像の圧縮（Compress IMAGE）」した写真をダウンロードしたものを使ってください