jQueryプラグインのPhotoSlider

jQueryを使用したスライドショーPhotoSlider。元ページは以下。

http://opiefoto.com/articles/photoslider

また、設置の説明などは以下が詳しい。

http://ascii.jp/elem/000/000/187/187279/

ただし、こちらの環境では、以下の修正が必要だったのでメモ。

jQuery 1.3以降を使用する場合の修正

jQuery 1.3からのセレクタ記述が変わったので、@slotと@imageidに関して"@"を削除すること。今回は1.4.2で動作確認。

画像に合わせたスタイルシートの変更

画像のサイズにあわせて、photoslider.cssも修正する必要あり。

• .photoslider_navのwidthの変更。
• .photoslider_thumbのwidthの変更。
• .photoslider_mainのheightの削除。

サムネイル幅が50px以上の場合の変更

サムネイルの幅が50px以上で、上記のサムネイルに関するcssの変更を行うとサムネイルが2段になってしまう。
それを回避するためにphotoslider.jsを修正しthumbWidthプロパティにてサムネイルの幅指定ができるようにした。

photoslider.jsの差分

$ diff -u photoslider.js.sv photoslider.js
--- photoslider.js.sv   2007-09-18 08:44:44.000000000 +0900
+++ photoslider.js      2010-03-03 10:43:08.000000000 +0900
@@ -21,6 +21,7 @@
        baseURL : '/articles/assets/slider/',
        thumbURL : 't_{ID}.jpg',
        mainURL : '{ID}.jpg',
+       thumbWidth : 72,

        duration: 3000, //how long do we look at each image?

@@ -113,7 +114,7 @@
                        this.data[key] = new Object();
                }

-               this.data[key]['thumbWidth'] = 72;
+               this.data[key]['thumbWidth'] = this.thumbWidth;
                this.data[key]['paused'] = true;
                this.data[key]['currentSlot'] = 0;
                this.data[key]['currentId'] = null;
@@ -202,7 +203,7 @@


                //click our first element
-               var firstThumb = $('#'+key+' .photoslider_thumb[@slot=0]');
+               var firstThumb = $('#'+key+' .photoslider_thumb[slot=0]');
                firstThumb.click();
        },

@@ -259,7 +260,7 @@
                //let's move our thumb into position
                if(this.data[key]['currentId'] != null){
                        //move the thumbnail back up
-                       SKEL.EFFECTS.Slide.animate($('.photoslider_thumb[@imageid='+this.data[key]['currentId']+']'),'top','20px','0px',500,SKEL.Transitions.quadOut);
+                       SKEL.EFFECTS.Slide.animate($('.photoslider_thumb[imageid='+this.data[key]['currentId']+']'),'top','20px','0px',500,SKEL.Transitions.quadOut);
                        //NOTE: we don't want to clear this interval incase the user clicks really fast (unless we kept track of every animation)
                }

@@ -408,10 +409,10 @@
        cycleImage: function(key){
                var slot = parseInt(parseInt(this.data[key]['currentSlot'])+1); //force this to be a number

-               var thumb = $('#'+key+' .photoslider_thumb[@slot='+slot+']').get(0);
+               var thumb = $('#'+key+' .photoslider_thumb[slot='+slot+']').get(0);
                if(thumb == null){
                        //perhaps we're at the end or don't have a valid slot, try slot 0
-                       thumb = $('#'+key+' .photoslider_thumb[@slot=0]').get(0);
+                       thumb = $('#'+key+' .photoslider_thumb[slot=0]').get(0);
                        if(thumb == null){
                                //there is no slot available, return
                                this.data[key]['paused'] = true;