コニファ・ロゴ

csstest:jquery-sortable-photos.jsを使って、ドラッグできる自動並び替え画像一覧

iQueryプラグインjquery-sortable-photos.jsを使って、ドラッグできる自動並び替え画像一覧です。 画像は縦横の比率を計算して、指定スペースに収まるようにひとつずつリサイズして並べてくれます。特定の画像をドラッグ&ドロップして 位置を変えることが可能で、その際もうまく収まるようにリサイズし直してくれます。

使い方は、jQueryのバージョン1.4以上とjQuery UIのバージョン1.8以上、それにjquery-sortable-photos.jsを読込み、次のスクリプトを設置します。

 $('.my-container').sortablePhotos({
	 selector: '> .my-item',
	 sortable: true,
	 padding: 2
 });

親要素divのクラス(この場合 '.my-container')と子要素のdivのクラス(この場合 '.my-item')を指定し、 この子要素ひとつの中にimgをひとつ入れたものを親要素の中に並べていくだけのいたって簡単な設定です。paddingの指定は、各画像間の空きです。

画像一覧サンプル

 

戻るボタン