複数の自動スライドショー(jQuery)の設置方法

質問

前回の質問の
http://okwave.jp/qa/q6602248.html
の続きです。

今１つだけ設置している自動スライドショーを、
２つ、３つと同HTML内に増やしていきたいのですが、参考にした
http://spaceforaname.com/filmstrip.html
こちらのサイトをみて
$('#photos').galleryView({
の部分や他にも共通するjs内の部分の名前を
$('#photos').galleryView2({
などに変更してみたのですが、いっこうに動いてくれません。

どのようにしたらこの自動スライドショーを複数設置することができるのでしょうか？
この自動スライドショー以外に似たようなものを探しましたが、
リンクができ、尚かつ各々の写真の下に文章を入れることができるという形の物が見つからず・・・。

非常に困っております。
どうかご回答お願い致します。

回答No.3

my-- · ベストアンサー

>> No.2 お礼

#photos1の方がちゃんと動いてるなら、#photos2はまるまるそのコピーですからhtmlの記述に問題はないです。

問題がどこにあるか、ひとつひとつ確認しながらいきましょうか。
問題を特定するため手を加えていない新しいjquery.galleryview-1.1.jsを用意して下さい。

その1：

// 行頭付近
(function($){
var count = 0; // 追加
$.fn.galleryView = function(options) {
var opts = $.extend($.fn.galleryView.defaults,options);
var timerLabel = 'transition' + (count += 1); // 追加
var id;
...

"transition" を　timerLabel に

"transition"の記述はjquery.galleryview-1.1.jsに9箇所あります。
二重引用符の付いた transition を二重引用符ごと二重引用符のない timerLabel に確実に置き換えます。

ここで動作を確認。とりあえずこれだけで#photos1、#photos2両方が自動でスライドしてくれるはずです。

「その1で#photos1、#photos2両方が自動でスライドしたか？スライドしないか？」
両方が自動でスライドしないなら、以下の修正は意味がないです。

その2：

"animation_pause" を　"animation_pause" + timerLabel に確実に置き換えます。
"animation_pause"の記述はjquery.galleryview-1.1.jsに2箇所あります。

ここで動作を確認。ここではエラーがないかだけ確認して下さい。

その3：

ボタン操作の修正です。

$('img.nav-next')... 4箇所あります
$('img.nav-prev')... 4箇所あります
$('.nav-overlay')... 2箇所あります
$('.nav-next')... 2箇所あります
$('.nav-prev')... 2箇所あります

これらの要素検索の範囲を絞り込む記述を加えます。

$('img.nav-next', j_gallery)...
$('img.nav-prev', j_gallery)...
$('.nav-overlay', j_gallery)...
$('.nav-next', j_gallery)...
$('.nav-prev', j_gallery)...

すべて確実に置き換えます。

「その3でボタン操作が正常に動作するようになったか？動作しないのか？」

どうにもお手上げなら、動かないファイル一式をどこかにUPしてみるなんてことも考えて下さい。

お礼

ご回答ありがとうございます。

ご丁寧に説明して下さったおかげで、
無事２つとも動くようになりました。

"transition" を　timerLabel にするのを誤って解釈しており、"　"の間にtimerLabelを入れたのが恐らく原因だと思います・・・。

photos3としてスライダーを増やしても無事動きました。
前回に引き続き、本当に本当にありがとうございます。
とても助かりました。
ありがとうございました！

回答No.2

my--

jquery.galleryview-1.1.jsに変更を加えないと複数設置できないみたいですね。
なんとなく上手くいった変更手順です。

"transition"
"animation_pause"

jquery.galleryview-1.1.jsからこのふたつの文字列を探して下さい。
これは名前みたいなものですが、複数設置した場合も毎度同じものが割り当てられてしまいます。
以下はカウンタ変数を使ってそれぞれに違った名前が割り当てられるようにするための変更です。

// 行頭付近
(function($){
var count = 0; // 追加
$.fn.galleryView = function(options) {
var opts = $.extend($.fn.galleryView.defaults,options);
var timerLabel = 'transition' + (count += 1); // 追加
var id;
...

"transition" を　timerLabel に
"animation_pause" を　"animation_pause" + timerLabel にすべて書き換えます。

次に

$('img.nav-next')...
$('img.nav-prev')...
$('.nav-overlay')...
$('.nav-next')...
$('.nav-prev')...

これらの要素検索の範囲を絞り込む記述を加えます。

$('img.nav-next', j_gallery)...
$('img.nav-prev', j_gallery)...
$('.nav-overlay', j_gallery)...
$('.nav-next', j_gallery)...
$('.nav-prev', j_gallery)...

これもすべて書き換えて下さい。jquery.galleryview-1.1.jsの変更は以上です。

変更はかなりの箇所になります。くれぐれも慎重に。
動くことは適当に確認しましたが、当然無保証です。動作確認は納得いくまで自身で行って下さい。

お礼

前回に引き続きご回答ありがとうございます。

教えて下さったように全て書き換えたのですが、
htmlに記述するのを

<script type="text/javascript">
jQuery(document).ready(function($) {
$('#photos1').galleryView({//自動スライドショー
filmstrip_size: 6,
frame_width: 144,
frame_height: 160,
background_color: 'transparent',
nav_theme: 'dark',
border: 'none',
show_captions:true,
caption_text_color: 'black'
});
$('#photos2').galleryView({//自動スライドショー
filmstrip_size: 6,
frame_width: 144,
frame_height: 160,
background_color: 'transparent',
nav_theme: 'dark',
border: 'none',
show_captions:true,
caption_text_color: 'black'
});
});
</script>

<div id="photos1" class="galleryview">
...
</div>
<div id="photos2" class="galleryview">
...
</div>

にしたところ、上のphotos1のみしか動きませんでした。

htmlの記述が間違っているのでしょうか？
誠に申し訳ございませんが、ご回答お願い致します。

回答No.1

yyr446

それって、galleryView()を複数作るんじゃなくてセレクターを変えて別のgalleryViewオブジェクトにするだけだと思うんですけど（試してませんが）

<script type"text/javascript>
$(function(){
$('#photos1').galleryView({
....
$('#photos2').galleryView({
....
});
</script>

<ul id="photos1">
<li><img src="A.jpg" title="A"></li>
<li><img src="B.jpg" title="B"></li>
....
</ul>

<ul id="photos2">
<li><img src="X.jpg" title="X"></li>
<li><img src="Y.jpg" title="Y"></li>
....
</ul>

お礼

ご回答ありがとうございます。

教えて下さったように
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#photos1').galleryView({
filmstrip_size: 6,
frame_width: 144,
frame_height: 160,
background_color: 'transparent',
nav_theme: 'dark',
border: 'none',
show_captions:true,
caption_text_color: 'black'
});
$('#photos2').galleryView({
filmstrip_size: 6,
frame_width: 144,
frame_height: 160,
background_color: 'transparent',
nav_theme: 'dark',
border: 'none',
show_captions:true,
caption_text_color: 'black'
});
});
</script>

<div id="photos1" class="galleryview">
....
</div>
<div id="photos2" class="galleryview">
....
</div>
としたのですが、
photos1の方しか動きませんでした。

他に方法があございましたら、教えて頂きたいです。
お願い致します。