【jQuery】画像のレイアウト調整に便利なプラグイン

今回紹介したいのは、【Photoset Grid】というjQueryプラグインです。

デモ

ソースコード

XHTML

<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>

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との連動も可能です。

本家のサイトはこちらになります。

WRITER

スターフィールド編集部

この著者の記事を見る