Example



Documentation

jMerrygoroundは画像が3D空間にいるように配置するjQuery Pluginです。
画像の大きさや配置、アニメーションの方法まで様々な部分を呼び出すときに設定することができ、使う人のサイトに配置しやすいように作られています。

たとえば↑のExampleの場合は以下のようなコードになります。
また以下のセットが基本となるセットになります。
jMerrygoroundを使ってみてうまく表示されない、または崩れてしまう場合は以下のサンプルを参考にしてください。

サンプルコード

JavaScript

HTML

imgタグにwidth="100%"とheight="100%"を指定していますが、これは必須になります。

CSS

#imageWraper1セレクターではposition: relative;で相対位置を指定していますが、これもあったほうがよいでしょう。
imgをdisplay:none;にしていますが、これはjMerrygoroundが動きだすタイミングではまだ画像の位置がHTML要素順になってしまい画像のちらつきの原因になってしまうのを防いでいます。
display:none;で非表示になっていても、jMerrygoround側が画面位置を確定した後で表示します。

Options

各パラメータはjMerrygoround側でデフォルト値を持っているので何も設定しなくても動作します。
ただしcenterXやcenterYなどで配置する場所を調整する必要がありますが、とりあえず動作確認したい場合には不要です。
Parameter名 Defalut値 Description
radiusX 200 Merrygoround円の横半径になります。
radiusY 30 Merrygoround円の縦半径になります。
centerX 250 PositionのLeft座標値になります。この数値を小さくすれば左方向に、大きくすれば右方向にMerrygoround全体が移動します。
centerY 100 PositionのTop座標値になります。この数値を小さくすれば上方向に、大きくすれば下方向にMerrygoround全体が移動します。
width 140 画像が一番大きいところの横幅になります。
height 100 画像が一番大きいところの縦幅になります。
action click click、mouseover、mousedown,autoの中から選んで設定してください。
motion normal actionでclickを選択した場合にクリック動作を指定します。
デフォルトではnormal、spiral、shake、grow、delayが使えますが、開発者が自分で追加することも可能です。詳しくは以下の「Extention」をご覧ください。
duration 800 actionでclickを指定した場合に1回の動きの速度を設定します。
1000が1秒を表します。
easing swing actionでclickを設定した場合に動きのタイプを設定します。
ここの値を変えることで様々なモーションで動作するようになります。
jQuery Easing Pluginを使うことでさらにアニメーションを増やすことができます。
nextId #next actionでclickを指定した場合にMerrygoroundが次の場所へ移動するためのボタンIDになります。
prevId #prev actionでclickを指定した場合にMerrygoroundが前の場所へ移動するためのボタンIDになります。
targetElem img Merrygoroundさせるターゲットとなる要素を設定します。
$("#sample")で指定した要素の直下に画像が並んでいる場合はimgと指定します。
もし画像がアンカータグでラッピングされている場合はaと設定してください。
reflection false 画像に水面の反射のような効果を付ける場合にtrueを設定してください。

Demo

Extention

jMerrygoroundのClickアニメーションは開発者が追加することができます。
たとえばactionにclickを指定し、motionにnormalを指定した場合の実際のコードは以下のようになります。
このように$.fn.jMerrygoround.clickの後に適当な名前で関数を追加すると、motionが追加されます。
この関数が画像の個数分呼び出されます。
追加したmotionを適用するには、jMerrygoroundの引数のmotionに追加した関数名を指定してください。
Parameter名 Description
elem 一つの画像要素を持つjQueryオブジェクトです。
offset 画像が次に移動する場所のzIndex、opacity、left、top、width、heightが入っています。
index 画像のindexが入っています。

Download