【お知らせ】まとめて検索などの提供終了

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

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (4件)

まとめ



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;

-------------------------------------------------
    • good
    • 0

>>No.3まとめ



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

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

});

ごめん「var」抜け。
    • good
    • 0
この回答へのお礼

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

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

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

>>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無しですけど、それぞれ変更してみて下さい。
    • good
    • 0

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



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
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング