動作サンプル
sample album 15 photos
sample album 21 photo
sample album 32 photos
ダウンロード
jquery.gplusalbum_0.0.1.zip
使用方法
アルバム単位にしたい画像を div.album の中に img を並べて記述するだけです。
4枚以上指定した場合は3枚目までが表示されます。（拡大後には表示されます）
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script src="jquery.gplusalbum_0.0.1.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$("#gPlusAlbum").gplusalbum();
});
</script>
<link rel="stylesheet" href="jquery.gplusalbum.css" type="text/css" media="all">
</head>
<body>
<div id="gPlusAlbum">
<div class="album">
<img src="photo/1.jpg" alt="花">
<img src="photo/2.jpg" alt="ワイン">
<img src="photo/3.jpg" alt="プチトマト">
<img src="photo/7.jpg" alt="お肉">
<img src="photo/8.jpg" alt="春の川原">
<div class="album-title">sample album 1<span>4 photos</span></div>
</div>
<div class="album">
<img src="photo/4.jpg" alt="自転車">
<div class="album-title">sample album 2<span>1 photo</span></div>
</div>
<div class="album">
<img src="photo/5.jpg" alt="花嫁">
<img src="photo/6.jpg" alt="メリーゴーランド">
<div class="album-title">sample album 3<span>2 photos</span></div>
</div>
</div>
</body>
</html>
オプション
実行時の引数に値を渡すことでボタン画像の変更が可能です。
$("#gPlusAlbum").gplusalbum({
btnClose : 'images/btnClose.png'
btnNext : 'images/btnNext.png'
btnPrev : 'images/btnPrev.png'
});