ギャラリーだけでなくいろいろと活用できそうです。トップページにこれあるとインパクトありますね。
jQueryプラグイン『diamonds.js』
『diamonds.js』の使い方
ヘッダー内に
|
1 |
<link rel="stylesheet" type="text/css" href="diamonds.css" /> |
Bodyの閉じタグの前に
|
1 |
<script type="text/javascript" src="jquery.diamonds.js"></script> |
これら2つのファイルを読み込んで、HTMLを作成していきます。
簡単にですが、作成するとこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <title>TEST</title> <link rel="stylesheet" type="text/css" href="diamonds.css" /> <link rel="stylesheet" type="text/css" href="demo.css" /> </head> <body> <div class="diamondswrap"> <a href="#" class="item">Hello world</a> <a href="#" class="item">Hello</a> <a href="#" class="item">Hello</a> </div> <div class="footer">InfinityScope</div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.diamonds.js"></script> <script> $(".diamondswrap").diamonds({ size : 200, gap : 1, }); </script> </body> </html> |
demoでは、FlickrのAPIを使ってギャラリーを作成してたので、Instagramなどで作成しても出来そうですね。
オプションとして5つ用意されています
- size
- gap
- itemSelector
- hideIncompleteRow
- autoRedraw
CSSだけで作成しようとすると、すごくメンドイ大変だなと思うのですが、これだとサクッと作成できるのでいいですね。
Pingback: Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ | コムテブログ()