スライドのカスタマイズについて

質問

こんにちは。jsの知識が無く、いろいろやってはみたのですが、上手くいきません。力になって下さい。

下記のスライドを1ページ中に複数設置したい場合、どのように改造すれば良いですか？最大３つ設置したいです。よろしくお願いします。
http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption

#galleryを#gallery2とかにして増やすのですよね？でもその先が・・・よろしくお願いします。

回答No.1

fujillin · ベストアンサー

Simpleと銘打ってあるだけに、id=galleryで決め打ちでつくってあるみたいですね。

＞#galleryを#gallery2とかにして増やすのですよね？
てっとり早いのはその方法かもしれませんが、スクリプト内のgalleryを全て訂正し、かつfunction galleryの名前とそのなかのidも訂正しなければなりません。
それほど長いものでもありませんが、ほとんど同じものを2個つくるのも釈然としません。

1）idを引数にして、複数個に対応できるようにする
2）オブジェクト化して、複数個に対応する
みたいなのがよさそうです。　とりあえず簡単な1）のほうで…

*idを引数に変えただけなので、他の部分はもとのままです。
*オリジナルのコメント部分は省略しました。（掲示板には長いので）
*最初に　slideShow('#G1', 6);　のようにして必要個数分
　セッティングしてください。
（#G1 ← id、6 ← 表示切替の時間間隔（秒）となっています）

対応するソース部分は、例えば
　<div id="G1" class="gallery">　～～　</div>
みたいな要領。

*CSSも共通部分が多いので、id指定ではなくclass指定にして
　兼用するのがよろしいかと。
　↑の例ではid=galleryからclass=galleryに変えています。
　サイズなどが違う場合は、その部分だけid指定にするとか。

*なお、オリジナルに「Creative Commons Attribution 3.0 License」とありますので、よしなに。
http://creativecommons.org/licenses/

$(document).ready(function() {
slideShow('#G1', 6);
slideShow('#G2', 5);
});

function slideShow(id, time) {
$(id + ' a').css({opacity: 0.0});
$(id + ' a:first').css({opacity: 1.0});
$(id + ' .caption').css({opacity: 0.7});
$(id + ' .caption').css({width: $(id + ' a').find('img').css('width')});
$(id + ' .content').html($(id + ' a:first').find('img').attr('rel')).animate({opacity: 0.7}, 400);
setInterval(setfunc(id), time*1000);
}

function setfunc(i) {
return function() { gallery(i); };
}

function gallery(id) {
var current = ($(id + ' a.show')? $(id + ' a.show') : $(id + ' a:first'));
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $(id + ' a:first') :current.next()) : $(id + ' a:first'));
var caption = next.find('img').attr('rel');
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
current.animate({opacity: 0.0}, 1000).removeClass('show');
$(id + ' .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
$(id + ' .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
$(id + ' .content').html(caption);
}

お礼

fujillinさんへ

ありがとうございました！！出来ました。しかも、とってもスッキリとコンパクトに！
しかも、知識レスでも簡単に増やせて嬉しいです。ありがとうございました。

もし、よろしければ、もう少しお知恵をお貸し下さい。
設置したものの、JQueryのSpryTabbedPanels.jsの各タブの中に設置したので、タブを切り替えると、ちょっと反応が鈍いです。JQueryのドロップダウンメニューも使っているので、仕方が無いでしょうか？jsファイルを圧縮してみたのですが、変化が感じられません。何か方法があれば、ご伝授下さい。
よろしくお願いします。

補足

解決しました。

JQueryのバージョンをUPしたら重い感じが無くなりました。
ありがとうございました