画像をシャッフルすることができるjQueryプラグイン「Shuffle Images」

Shuffle ImagesというjQueryプラグインを使えば、画像内でマウスカーソルを動かしながら画像をシャッフルすることができます。1つの画像内で様々な画像を見せることができるので、スペースを有効活用したい時なんかにもよさそうですね。普通に画像を表示しているだけじゃ物足りないという方にはオススメです。

[ads_center]

Shuffle Imagesの使い方

以下は実際のデモです。気になる方は、ぜひ試してみて下さい。

デモ

使い方もとてもわかりやすいと思います。jQueryとプラグインをhead内で読み込み、HTMLを以下のようにマークアップしていきます。

<div class="shuffle-me">
    <img src="images/1.jpg">
    <img src="images/2.jpg">
    <img src="images/3.jpg">
    <!-- ・・・中略・・・ -->
</div>

で、あとはプラグインを呼び出してあげます。

$(".shuffle-me").shuffleImages({
    trigger: "imageMouseMove",
    triggerTarget: false,
    mouseMoveTrigger: 50,
    hoverTrigger: 200,
    scrollTrigger: 100,
    target: "> img"   
});

トリガーにはimageMouseMove以外にも、imageHover、documentMouseMove、documentScroll、imageMouseMoveといったものが用意されています。

応用次第で色んな画像の見せ方ができそうですね。詳細は以下からどうぞ。

Shuffle Images