2013/04/04
【jQuery】画像のレイアウト調整に便利なプラグイン
今回紹介したいのは、【Photoset Grid】というjQueryプラグインです。
ソースコード
|
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 26 27 28 29 30 31 | <html> <head> <meta charset="utf-8"> <title>photoset-gridサンプル</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://stylehatch.github.com/photoset-grid/jquery.photoset-grid.js"></script> <script type="text/javascript" src="http://stylehatch.github.com/photoset-grid/js/jquery.colorbox.js"></script> </head> <body> <h1>Photoset Grid Sample</h1> <div id="photoset-grid-basic" data-layout="3223" style="visibility: hidden;"> <img src="IMG_0368.jpg" /> <img src="IMG_0516.jpg" /> <img src="IMG_0922.JPG" /> <img src="IMG_0988.JPG" /> <img src="IMG_1017.JPG" /> <img src="IMG_1018.JPG" /> <img src="IMG_1019.JPG" /> <img src="IMG_1020.JPG" /> <img src="IMG_1021.JPG" /> <img src="IMG_1075.JPG" /> </div> <script> $('#photoset-grid-basic').photosetGrid({ onComplete: function(){ $('#photoset-grid-basic').attr('style', ''); } }); </script> </body> </html> |
説明
シンプルにdata-layoutという属性で毎行何枚の画像を表示したいのを指定すれば、自動に調整してくれるということです。
lightboxとの連動も可能です。
本家のサイトはこちらになります。
Author Profile
スターフィールド編集部
SHARE
