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

質問

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

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

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

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

回答No.3

my-- · ベストアンサー

まとめ

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--

>>No.3まとめ

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

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

});

ごめん「var」抜け。

お礼

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

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

回答No.2

my--

>>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--

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

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を持たすことは難しいでしょうか。

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