GalleryViewのカスタマイズについて

GalleryViewのカスタマイズについて

jqueryのプラグイン、GalleryViewを使っています。
http://spaceforaname.com/galleryview
デモ
http://spaceforaname.com/gallery-light.html

現状はデモ通りに使用していますが、左端にクリックしたサムネイルがきたときだけ、そのimgにclassを
付加させたいと思っています。しかしうまくいかず困ってます。
最新版はver2のようですが、仕様が変わっており、また作者による解説もないためデモと同じver1.1使用しています。

ご教授ください。よろしくお願いします。

No.3 ベストアンサー 回答者： my-- 回答日時： 2010/11/29 23:47

まとめ

jquery.galleryview-1.1.js
-------------------------------------------------
// 90行目あたり
enableFrameClicking();

// imgが移動
var img = $(j_frames[iterator]).find('img');
img.attr('class', 'hoge');
// ----------

});

-------------------------------------------------
// 106行目あたり
enableFrameClicking();

// 枠の方が移動してくる（img少数）時
img = $(j_frames[iterator]).find('img');
img.attr('class', 'hoge');
// ----------

});

-------------------------------------------------
// 120行目あたり

function showNextItem() {

// class名があれば削除（対象全走査）
j_frames.each(function(i){
var img = $(j_frames[i]).find('img');
if (img.attr('class')) img.attr('class', '');
});

$(document).stopTime("transition");

-------------------------------------------------
// 130行目あたり

function showPrevItem() {

// class名があれば削除（対象全走査）
j_frames.each(function(i){
var img = $(j_frames[i]).find('img');
if (img.attr('class')) img.attr('class', '');
});

$(document).stopTime("transition");

-------------------------------------------------
// 160行目あたり

$(this).click(function() {
$(document).stopTime("transition");

// class名があれば削除（対象全走査）
j_frames.each(function(i){
var img = $(j_frames[i]).find('img');
if (img.attr('class')) img.attr('class', '');
});

showItem(i);
iterator = i;

-------------------------------------------------
// 403行目あたり

has_filmstrip = j_frames.length > 0;

// 始動時のimg
if (has_filmstrip) $(j_frames[0]).find('img').attr('class', 'hoge');

if(!has_panels) opts.panel_height = 0;

-------------------------------------------------

No.4 回答者： my-- 回答日時： 2010/11/29 23:54

>>No.3まとめ

// 106行目あたり
enableFrameClicking();

// 枠の方が移動してくる（img少数）時
var img = $(j_frames[iterator]).find('img'); // var 追記
img.attr('class', 'hoge');
// ----------

});

ごめん「var」抜け。

この回答へのお礼

こちらでも動作確認し全く問題ありませんでした。

やりたいことを全部実装してもらって大変助かりました。
本当にありがとうございました。

お礼日時：2010/11/30 13:08

No.2 回答者： my-- 回答日時： 2010/11/29 21:55

>>No.1補足

jquery.galleryview-1.1.js
-------------------------------------------------
// 40行目あたり

/************************************************/
/*Plugin Methods*/
/************************************************/
function showItem(i) { // フラグ仮引数削除
//Disable next/prev buttons until transition is complete

-------------------------------------------------
-------------------------------------------------
// 90行目あたり
enableFrameClicking();

// class名（hoge）設定
// j_frames[iterator]は親要素
var img = $(j_frames[iterator]).find('img');
img.attr('class', 'hoge');

// if文削除
});

-------------------------------------------------
-------------------------------------------------
// 160行目あたり

$(this).click(function() {
$(document).stopTime("transition");

// class名があれば削除
var img = $(j_frames[iterator]).find('img');
if (img.attr('class')) { img.attr('class', ''); }
showItem(i); // フラグ無しで呼出し
// ----------

iterator = i;
-------------------------------------------------

始動まではclass無しですけど、それぞれ変更してみて下さい。

No.1 回答者： my-- 回答日時： 2010/11/28 22:02

以下に示す箇所にコード追加してみて下さい。

jquery.galleryview-1.1.js
-------------------------------------------------
// 40行目あたり

/************************************************/
/*Plugin Methods*/
/************************************************/
function showItem(i, flag /* click呼出しフラグ */) {
//Disable next/prev buttons until transition is complete

-------------------------------------------------
// 90行目あたり
enableFrameClicking();

// class名（hoge）設定
if (flag /* click呼出し */) {
// j_frames[iterator]は親要素
var img = $(j_frames[iterator]).find('img');
img.attr('class', 'hoge');
}
// ----------

});

-------------------------------------------------
// 120行目あたり

function showNextItem() {

// class名があれば削除
var img = $(j_frames[iterator]).find('img');
if (img.attr('class')) img.attr('class', '');
// ----------

$(document).stopTime("transition");

-------------------------------------------------
// 130行目あたり

function showPrevItem() {

// class名があれば削除
var img = $(j_frames[iterator]).find('img');
if (img.attr('class')) img.attr('class', '');
// ----------

$(document).stopTime("transition");

-------------------------------------------------
// 160行目あたり

$(this).click(function() {
$(document).stopTime("transition");

// class名があれば削除
var img = $(j_frames[iterator]).find('img');
if (img.attr('class')) { img.attr('class', ''); }
showItem(i, true); // フラグ付きで呼出し
// ----------

iterator = i;

-------------------------------------------------

左端に来たタイミング。抜けるタイミングで対象要素にアクセスできます。
あとは適当にどうぞ。

この回答への補足

回答ありがとうございます。
コードを追加したところ問題なく動きました。

追加で伺いたいのですが、左右の矢印を押したときや、サムネイルが自動でスクロールしているときにも、常に左端のimgにclassを持たすことは難しいでしょうか。

可能でしたらお願いします。

補足日時：2010/11/29 15:23