Movable Type 備忘録
popEye with jQuery
- Prev Page: MagicPreview with jQuery
- Next Page: BackgroundPosition with jQuery
こんにちわ^^
犯人が出頭したそうですね。良かったです。
動機が保健所にペット殺されたからと供述してるようですが･･･意味分かんね（。－ω－）
さて、そんな話は置いといて jQuery の popEye というプラグインを使ってみましたのでご紹介。
なお、写真画像には「ジョットの鐘楼」のフリー写真さんところからお借りしました。イタリアの風景画です。
このプラグインのすっごいなぁと思ったところは、サムネイル画像幅の最小サイズに合わせてギャラリー幅を変更してるところです。
オプションで幅／高さ指定することが可能なのですが、特に指定もせず表示されたのであれ!? と思って試しに画像幅が異なるものを表示してみたら、最小幅に合わせて幅が変更されてました。
なので、各自でおおよそ決まったサムネイル幅にさえしておけば、あとは勝手に調整してくれるようです。便利、便利 (●´∀｀●)
popEye プラグインは以下のページから入手することができます。
注意点
使い方自体は特に難しくないのですが、ちょと癖があるというかいくつか注意点があります。
JavaScript のロードはページ下の方で･･･
ほとんどの人が JavaScript の記述を HTML ヘッダ内に含めると思います。でもこれだとうまく表示されず、先ほどちょと触れたようにサムネイルの最小幅に合わせることからなのか、JavaScript のロードはページ下、もしくはマークアップ直後で行った方がいいです。
配布元のデモページでもやっぱりページ下で行ってました。ただし、stageW、stageH オプションを指定すれば問題ありません。上記はあくまでもデフォルトな場合のお話です。
マークアップが固定されてる
セレクタで指定された子要素として ul による画像一覧にしてないと上手く動作しません。具体的には以下のようなマークアップになります。
<div id="popeye_box" class="clear"><div id="popeye1" class="popeye"><ul><li><a href="画像1 URL"><img src="サムネイル1 URL" alt="画像説明" /></a></li><li><a href="画像2 URL"><img src="サムネイル2 URL" alt="画像説明" /></a></li><li><a href="画像3 URL"><img src="サムネイル3 URL" alt="画像説明" /></a></li></ul></div></div>
上記サンプルではこのようなマークアップになってるのですが、popEye のセレクタに popeye1 を指定してますので、その子要素の ul を検索してギャラリー表示してますのでご注意ください。
使ってみたところ、こんなかんじでしょうか。
ちなみに上記サンプルでは、写真の幅 460px ／高さ 560px に収まるよう加工してます。同様にサムネイルも幅 240px で統一してます。
使い方
基本的なマークアップは先ほど説明したようになります。
イメージの alt 属性には写真の説明を含めることでサンプルのようなちょっとした概要が表示されます (￣∇￣)b
以下は上記サンプルで使用してる popEye のコードになります。
popEye のコード
<script type="text/javascript">$(document).ready(function () {var options1 = {easing: 'easeInOutCirc',direction: 'left',nlabel: 'next',plabel: 'prev',duration: 230}$('#popeye1').popeye(options1);});</script>
青字を見て分かるように、DOM 読込み完了時に処理するハンドラを登録します。
赤字はオプションで任意に選択可能です、選択できるオプションは以下の通りです。
stageW
サムネイル画像を表示する矩形幅を指定します。デフォルトは先ほど説明したように各サムネイルの最小幅が適用されるようです。
stageH
サムネイル画像を表示する矩形高さを指定します。デフォルトはやっぱり可変です。
jclass
説明を読んでもよく分からないのですが、デフォルトの「popeye-hasjs」というクラス名称を任意のクラス名称に変更できるオプションのようです。
ちなみにデフォルトでは外枠( セレクタ )からのパディングとして使用してます。eclass
これも説明からはよく分からないのですが、デフォルトの「popeye-haspopped」というクラス名称を任意のクラス名称に変更できるオプションのようです。
デフォルトではサムネイルをクリックした時の拡大表示時のスタイルを適用してます。lclass
ローディング画像用のクラス名称を変更するためのオプションのようです。デフォルトの「popeye-isloading」になります。
direction
拡大表示時の表示方向を指定します。上記サンプルでは「left」を指定してますので左から右方向にアニメーションされます。「right」にすると右から左方向にアニメーションされます。デフォルトは「left」です。
duration
アニメーション表示時の間隔( ミリ秒 )を指定します。小さい値にするとすばやく表示され、大きい値だと優雅に表示されるようになります。デフォルトは「400」です。
easing
イージング( アニメーションの加速度 )を選択します。swing or linear を選択できます。デフォルトは swing になります。
また、こちらの jQuery Easing Plugin を併用することでいろんなイージングが選択できます。
上記ページの中ほどにサンプルがあるので、そちらでお試しすることができます。nlabel
NEXT ボタンの表示名を変更するオプションです。デフォルトは「next」です。
plabel
PREV ボタンの表示名を変更するオプションです。デフォルトは「previous」です。
oflabel
イメージカウント数表示名を変更するオプションです。上記サンプルだと 7 枚中 何番名の写真を表示してる･･･という表示の「of」に相当します。デフォルトは「of」です。
blabel
拡大表示ボタンの表示名を変更するためのオプションです。デフォルトは「enlage」になります。
clabel
拡大表示された画像にフォーカスすると、ツールチップが表示されます。その表示名称を変更するオプションです。デフォルトは「Click to close」になります。
緑字では上記赤字のオプションをパラメータとして渡してます。デフォルトのままでよければ何もオプションを指定する必要はありません。
以上です。
Trackback Pings(0)
No trackbacks found.
Comments(5)
-
#2: Posted by
から哲やんへの返信
@ November 23, 2008
[REPLY]
>>1 哲やん さん
こんばんわ^^
わたしもこのプラグインはいいなって思いました
分からないことありましたらご連絡ください。
配布元さんではサンプルは配布されてないのですが、わたしのでよければお渡ししますので･･･。
今後ともどうぞよしなに
- #3: Posted by 哲やん @ November 25, 2008 [REPLY]
すみません。
お手数をおかけいたしますが・・・ください。
-
#4: Posted by
から哲やんへの返信
@ November 25, 2008
[REPLY]
>>3 哲やん さん
こんばんわ^^
先ほど 哲やん さん宅に一式をお送りしました。
ご確認くださいまし
- #5: Posted by からbzbellへの返信 @ November 26, 2008 [REPLY]
>>4 bzbell さん
いただきました。ありがとうございました。
あとはMTにどうやって組み込むか・・・うーん、なかなか難しそうですね。
果たして私にできるかどうか・・・（笑）
いつもお世話になります。
丁寧なレクチャーありがとうございます。
1カラム化した別ブログで使ってみたいと思っています・・・でも、良い素材がない（笑）
カメラ新調しますので、そうしたら素材増えるかも。