Internet Explorer: プラグイン
ラベル プラグイン の投稿を表示しています。 すべての投稿を表示
ラベル プラグイン の投稿を表示しています。 すべての投稿を表示

2013年4月15日月曜日

「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>
投稿者 時刻: 0 件のコメント :
ラベル: , , , , , , ,

2013年4月9日火曜日

jQueryスクラッチカード wScratchPad をスマホ対応にしてみた


 Websanova Scratch Pad という jQuery のプラグインを使うと、
ＰＣブラウザ上で、スクラッチカードをコインで削る表現 が簡単に作れます。




PC用スクラッチデモ
sample:golgo_JK_PC

0%



マウス対応だったのですが、スマホで使いたいので、マウス関連のイベ ントをタッチ関連のイベントに書き換えました。

イベント
  • mousedown → touchstart
  • mousemove → touchmove
  • mouseup → touchend
座標取得
  • e.pageX → e.originalEvent.changedTouches[0].pageX
  • e.pageY → e.originalEvent.changedTouches[0].pageY



スマホ用スクラッチデモ（スマホでお試しください）
sample:golgo_JK_Phone

0%




書き換えるのが面倒な方は、こちらからダウンロードして お使いください。
↓
一式ダウンロード

とってもいいプラグインを作ってくれた WEBSANOVA さんに感謝です。


jQueryでスクラッチカードを実 現する wScratchPad をスマホ対応にしてみた
投稿者 時刻: 0 件のコメント :
ラベル: , , , , , , ,

「wScratchPad」スクラッチのように削ると画像が見えてくるjQueryプラグイン

スクラッチ宝くじのように削ると見えてくるjQueryプラグイン「wScratchPad」を使うと面白いコンテンツが作れそうw

 

 
jQueryのプラグインを使えば、画像に様々な効果を加えたり、アニメーションさせて表示させたりいろんなことができます。 そんなプラグインは出揃った感がありますが、今回とてもユニークなプラグインを見つけたのでご紹介したいと思います。

「銀はがし」が できるプラグイン！

銀はがしといえば、皆さんご存知の宝くじなどでよくあるスクラッチカードがありますが、これと同じようなことをjQueryでできるようにしてくれるプラグイン「wScratchPad」です。 「wScratchPad」を使えば、画像をマスクした状態で表示しておき、 マウスで削っていくと徐々に中の画像 を見せるようなことができます。

 簡単にスクラッチカードを削る間隔を味わうことができますよw 

最初はマスクされて画像が何も表示されていません。

 

 マウスで削っていくと隠れている画像が見えてきます。

   

用途としては、ブラウザ上で簡単なスクラッチくじを実現したい場合や、宝探しゲームのようなものや、レア画像を削って見せていくなどに使えそうで す。 仕 組みとしては、HTML5のCanvasを使って実現しているので、HTML5対応のブラウザでないと表示できません。 文章じゃわかりにくいので以下デモです。


DEMO


使い方はwScratchPad.jsとjQueryを合わせて読み込みます。

例としてソースは以下のようになります。

HTML - head
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/wScratchPad.js"></script>
<script type="text/javascript">
 $("#foo").wScratchPad({
  width: 210,
  height: 100,
  image: 'images/image.jpg'
  color: '#ff0000',
  cursor: 'images/cursor.png',
  size: 5
 });
</script>







※パスなどは環境に合わせて書き換えてください。














上記ソースのように記述すると、#fooが指定された要素にスクラッチカードのような機能を実装できます。 オプションでサイズ、表示される 画像、マスクの色、削る際のサイズなどを指定でき、カーソルの画像もオプションで変更することができます。 例えば、コインの画像を使用してマスク 色をシルバーとかにすれば、本当のスクラッチカードのようにすることもできますね。 また、どれぐらい削ったかを取得する機能もついており、70％以上削れたら何かを表示するだとか、50％削ったらマスクを解除するなんてこともできます。










詳しくは、「wScratchPadのチュートリアル」を確認してください。



キャンペーン系のサイトや、ゲームなどに使えると思うので、興味がある方はチェックしてみてください。







使い方の詳細やファイルのダウンロードは以下。







  







sample:batako_san









0%







sample:tsuru_ken









0%







sample:ima









0%








↓スマホのタッチに対応させたい方は方こちら。






jQueryでスクラッチカードを実現する wScratchPad  をスマホ対応にしてみた







【おすすめのオンライン画像加工アプリ】

HTML5のCanvasを使った実用的なグラフィックツールをまとめました。こちらもあわせてチェックしてみてください。




HTML5で作られた驚異のフォトエディターまとめ










投稿者



時刻:







0 件のコメント
                                    :
                                  





















ラベル:


                                              ,
                                            


                                              ,
                                            


                                              ,
                                            


                                              ,
                                            


                                              ,
                                            

















                                      

                                    










登録:

投稿
                                      (
                                      Atom
                                      )