Movable Type 備忘録

 popEye with jQuery

  • Nov232008
  • Vote:
    http://bizcaz.com/archives/2008/11/23-182745.php
  • Categories: jQuery
  • Tags:
  • Social Bookmark

こんにちわ^^

犯人が出頭したそうですね。良かったです。
動機が保健所にペット殺されたからと供述してるようですが･･･意味分かんね（。－ω－）

さて、そんな話は置いといて jQuery の popEye というプラグインを使ってみましたのでご紹介。
なお、写真画像には「ジョットの鐘楼」のフリー写真さんところからお借りしました。イタリアの風景画です。

サンプルを表示できませんでした。

このプラグインのすっごいなぁと思ったところは、サムネイル画像幅の最小サイズに合わせてギャラリー幅を変更してるところです。 オプションで幅／高さ指定することが可能なのですが、特に指定もせず表示されたのであれ!? と思って試しに画像幅が異なるものを表示してみたら、最小幅に合わせて幅が変更されてました。
なので、各自でおおよそ決まったサムネイル幅にさえしておけば、あとは勝手に調整してくれるようです。便利、便利 (●´∀｀●)

popEye プラグインは以下のページから入手することができます。

注意点

使い方自体は特に難しくないのですが、ちょと癖があるというかいくつか注意点があります。

  1. JavaScript のロードはページ下の方で･･･

    ほとんどの人が JavaScript の記述を HTML ヘッダ内に含めると思います。でもこれだとうまく表示されず、先ほどちょと触れたようにサムネイルの最小幅に合わせることからなのか、JavaScript のロードはページ下、もしくはマークアップ直後で行った方がいいです。
    配布元のデモページでもやっぱりページ下で行ってました。

    ただし、stageW、stageH オプションを指定すれば問題ありません。上記はあくまでもデフォルトな場合のお話です。

  2. マークアップが固定されてる

    セレクタで指定された子要素として ul による画像一覧にしてないと上手く動作しません。具体的には以下のようなマークアップになります。

    1. <div id="popeye_box" class="clear">
    2. <div id="popeye1" class="popeye">
    3. <ul>
    4. <li><a href="画像1 URL"><img src="サムネイル1 URL" alt="画像説明" /></a></li>
    5. <li><a href="画像2 URL"><img src="サムネイル2 URL" alt="画像説明" /></a></li>
    6. <li><a href="画像3 URL"><img src="サムネイル3 URL" alt="画像説明" /></a></li>
    7. </ul>
    8. </div>
    9. </div>

    上記サンプルではこのようなマークアップになってるのですが、popEye のセレクタに popeye1 を指定してますので、その子要素の ul を検索してギャラリー表示してますのでご注意ください。

使ってみたところ、こんなかんじでしょうか。
ちなみに上記サンプルでは、写真の幅 460px ／高さ 560px に収まるよう加工してます。同様にサムネイルも幅 240px で統一してます。

使い方

基本的なマークアップは先ほど説明したようになります。
イメージの alt 属性には写真の説明を含めることでサンプルのようなちょっとした概要が表示されます (￣∇￣)b
以下は上記サンプルで使用してる popEye のコードになります。

popEye のコード

  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. var options1 = {
  4. easing: 'easeInOutCirc',
  5. direction: 'left',
  6. nlabel: 'next',
  7. plabel: 'prev',
  8. duration: 230
  9. }
  10.  
  11. $('#popeye1').popeye(options1);
  12. });
  13. </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)

#1: Posted by 哲やん @ November 23, 2008 [REPLY]
user-pic

いつもお世話になります。
丁寧なレクチャーありがとうございます。
1カラム化した別ブログで使ってみたいと思っています・・・でも、良い素材がない（笑）
カメラ新調しますので、そうしたら素材増えるかも。

 
#2: Posted by Author Profile Page bzbellから哲やんへの返信 @ November 23, 2008 [REPLY]
user-pic

>>1 哲やん さん

こんばんわ^^

わたしもこのプラグインはいいなって思いましたワクワク
分からないことありましたらご連絡ください。
配布元さんではサンプルは配布されてないのですが、わたしのでよければお渡ししますので･･･。
今後ともどうぞよしなにもじもじ

 
#3: Posted by 哲やん @ November 25, 2008 [REPLY]
user-pic

すみません。
お手数をおかけいたしますが・・・ください。

 
#4: Posted by Author Profile Page bzbellから哲やんへの返信 @ November 25, 2008 [REPLY]
user-pic

>>3 哲やん さん

こんばんわ^^

先ほど 哲やん さん宅に一式をお送りしました。
ご確認くださいましぺこり

 
#5: Posted by 哲やんからbzbellへの返信 @ November 26, 2008 [REPLY]
user-pic

>>4 bzbell さん
いただきました。ありがとうございました。
あとはMTにどうやって組み込むか・・・うーん、なかなか難しそうですね。
果たして私にできるかどうか・・・（笑）

 

 Post a Comment

 

コメント用フィード