月曜日, 4月 15, 2013

「BlocksIt.js」Pinterest（ピンタレスト）風に画像を並べて表示するjQueryプラグイン










Title01 moonfish
by name
Title02 Tigermilk
by name
Title03 Houttuynia+cordata
by name
Title04 fuck
by name
Title05 KRAZY+BALDHEAD
by name
Title06 hole
by name
Title07 boy
by name
Title09 hello!
by name
Title10 man
by name
Title11 monochrome
by name
Title12 elroy klee
by name
Title13 Eyes as Big as Plates
Title14 Bellflower
by name
Title15 pandamonium
by name
Title15 RCA secret
by name
Title16 Riitta Ikonen leaf
by name
Title17 Riitta Ikonen leaf
by name
Title18 lastdaydream
by name
Title19ampanman 
by name
Title20 Viviane Sassen
by name
Title21 jopsu ramu
by name
Title22 hdvoice
by name

最近、特に女性に人気があるPinterest（ピンタレスト）。 その人気の秘密のひとつが、そのシンプルでお洒落なデザイン性です。

Pinterest（ピンタレスト）は白地に画像がずらりと並んだビジュアル中心のデザインになっていて、とてもシンプルですが、ファッション誌のようでただ眺めているだけでも退屈しません。

そのPinterest（ピンタレスト）風に画像を一覧表示させてくれるのが、このjQueryプラグイン「BlocksIt.js」です。

サンプルページを作ってみました。　→　Pinterest（ピ ンタレスト）風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」サンプル

jQueryプラグイン「BlocksIt.js」の使用方法は続きをどうぞ。

【使用方法】
まずは、こちらの本家のサイトからBlocksIt.jsなど一式ダウンロードします。 <head>部分にcssとJavaScriptを記述します。


1<link rel='stylesheet' href='style.css' media='screen' />
2<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
3<script type="text/javascript" src="blocksit.js"></script>
4<script>
5$(document).ready(function() {
6$('#ID名').BlocksIt();
7});
8</script>

最後に<body>部に画像を記述すれば完成です。

1<div id="#ID名">
2 <div>
3  <div>
4   <img src="画像1" />
5  </div>
6  <strong> タイトル1</strong>
7  <p> コンテンツ1-1</p>
8  <div> コンテンツ1-2</div>
9 </div>
10 <div>
11  <div>
12   <img src="画像2" />
13  </div>
14   <strong>タイトル2</strong>
15   <p>コンテンツ２-2</p>
16   <div>コンテンツ２-2</div>
17 </div>
18
19//　以後表示させたい画像の数だけ繰り返し
20
21</div>

※オプションがいくつか用意されているので、様々な効果を付けることも可能です。

.BlocksIt( [Options] ) [Options]
  • numOfCol: Type: Int Default: 5 コラム数を設定します。
  • offsetX: Type: Int Default: 5 ブロックの左右のマージン幅
  • offsetY: Type: Int Default: 5 ブロックの上下のマージン幅
  • blockElement: Type: String Default: ‘div’ 


オプションの記述の例

1$(document).ready(function() {
2   $('#container').BlocksIt({
3      numOfCol: 5,
4      offsetX: 8,
5      offsetY: 8,
6      blockElement: '.grid'
7   });
8});

以下にサンプルページのソースを書いておきます。サンプルではウィンドウズ幅に応じてコラム数を変更させています。どうぞご参考までに。 （画像の数が多いので６枚目以降の画像指定の部分は省略しています。）

1<!DOCTYPE html>
2<html>
3<head>
4<title>Pinterest風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」サンプル　│　ぱんにゃっと/H&Y</title>
5<meta name="description" content="BlocksIt.js jQueryのサンプル　by　ぱんにゃっと/H&Y"/>
6<meta name="keywords" content="jquery,blocksit.js,サンプル"/>
7<link rel='stylesheet' href='style.css' media='screen' />
8<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
9<!--[if lt IE 9]>
10<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11<![endif]-->
12<script src="js/blocksit.min.js"></script>
13<script>
14$(document).ready(function() {
15    //blocksit define
16    $(window).load( function() {
17        $('#container').BlocksIt({
18            numOfCol: 5,
19            offsetX: 8,
20            offsetY: 8
21        });
22    });
23
24    //window resize
25    var currentWidth = 1100;
26    $(window).resize(function() {
27        var winWidth = $(window).width();
28        var conWidth;
29        if(winWidth < 660) {
30            conWidth = 440;
31            col = 2
32        } else if(winWidth < 880) {
33            conWidth = 660;
34            col = 3
35        } else if(winWidth < 1100) {
36            conWidth = 880;
37            col = 4;
38        } else {
39            conWidth = 1100;
40            col = 5;
41        }
42
43        if(conWidth != currentWidth) {
44            currentWidth = conWidth;
45            $('#container').width(conWidth);
46            $('#container').BlocksIt({
47                numOfCol: col,
48                offsetX: 8,
49                offsetY: 8
50            });
51        }
52    });
53});
54</script>
55
56</head>
57<body>
58
59<!-- Content -->
60<section id="wrapper">
61    <hgroup>
62        <h1>Pinterest風に画像をレイアウトして表示するjQueryプラグイン「BlocksIt.js」サンプ ル</h1>
63    </hgroup>
64<div id="container">
65    <div class="grid">
66        <div class="imgholder">
67            <img src="img/01.jpg" />      </div>
68        <strong>Title01</strong>
69        <p>コンテンツ...</p>
70        <div class="meta">by name</div>
71    </div>
72    <div class="grid">
73        <div class="imgholder">
74            <img src="img/02.jpg" />      </div>
75        <strong>Title02</strong>
76        <p>Hello?</p>
77        <div class="meta">by name</div>
78    </div>
79    <div class="grid">
80        <div class="imgholder">
81            <img src="img/03.jpg" />      </div>
82        <strong>Title03</strong>
83        <p>好きな文字を入れれます。</p>
84        <div class="meta">by name</div>
85    </div>
86    <div class="grid">
87        <div class="imgholder">
88            <img src="img/04.jpg" />      </div>
89        <strong>Title04</strong>
90        <p>feel</p>
91        <div class="meta">by name</div>
92    </div>
93    <div class="grid">
94        <div class="imgholder">
95            <img src="img/05.jpg" />      </div>
96        <strong>Title05</strong>
97        <p>好きな文字を入れれます</p>
98        <div class="meta">by name</div>
99    </div>
100
101</div>
102</section>
103</body>
104</html>
投稿者 時刻:
ラベル: , , , , , , ,