意外に便利!?画像をグリッドに綺麗に散りばめてくれるjQueryプラグイン「Photoset Grid」

意外に便利!?画像をグリッドに綺麗に散りばめてくれるjQueryプラグイン「Photoset Grid」サンプル 画像を配置する際に大きさ同じでグリッド形式にしてもつまらなくなりますよね。
jQueryプラグインのjQuery Photoset Grid - Style Hatchを利用すると大きさをバラバラにして綺麗に散りばめて配置してくれます。
これで一味違った画像の見せ方が簡単にできますね。

使用方法 jQuery Photoset Grid - Style Hatchからファイルをダウンロード。
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.photoset-grid.js"></script>
<script type="text/javascript">
$(function() {
$('.class名').photosetGrid({
gutter: '1px', //写真の間隔
layout: '312' //レイアウト 1段目に3枚、2段目に1枚、3枚目に2枚といった設定
});
});
</script>

あとは上記のclass内に画像を記述すれば完成です。 <div class="class名">
<img src="画像サムネイルパス1" data-highres="拡大画像パス1">
<img src="画像サムネイルパス2" data-highres="拡大画像パス2">
</div>

拡大画像はリンクを付ける場合やLightBox処理を与えるときに使用するものです。
リンクはオプションにhighresLinks: true,をつけるだけとなります。
LightBoxはjackmoore/colorbox ? GitHubを使用し、以下の様な記述となるようです。
$('.class名').photosetGrid({
highresLinks: true,
rel: 'withhearts-gallery',
gutter: '2px',

onComplete: function(){
$('.photoset-grid-lightbox').attr('style', '');
$('.photoset-grid-lightbox a').colorbox({
photo: true,
scalePhotos: true,
maxHeight:'90%',
maxWidth:'90%'
});
}
});

意外に便利!?画像をグリッドに綺麗に散りばめてくれるjQueryプラグイン「Photoset Grid」サンプル

sponsors

「意外に便利!?画像をグリッドに綺麗に散りばめてくれるjQueryプラグイン「Photoset Grid」」をシェアする

記事作成:
記事URL:

TOP > > > 意外に便利!?画像をグリッドに綺麗に散りばめてくれるjQueryプラグイン「Photoset Grid」