前回の質問の
http://oshiete.goo.ne.jp/qa/6602248.html
の続きです。
今1つだけ設置している自動スライドショーを、
2つ、3つと同HTML内に増やしていきたいのですが、参考にした
http://spaceforaname.com/filmstrip.html
こちらのサイトをみて
$('#photos').galleryView({
の部分や他にも共通するjs内の部分の名前を
$('#photos').galleryView2({
などに変更してみたのですが、いっこうに動いてくれません。
どのようにしたらこの自動スライドショーを複数設置することができるのでしょうか?
この自動スライドショー以外に似たようなものを探しましたが、
リンクができ、尚かつ各々の写真の下に文章を入れることができるという形の物が見つからず・・・。
非常に困っております。
どうかご回答お願い致します。
No.1
- 回答日時:
それって、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の方しか動きませんでした。
他に方法があございましたら、教えて頂きたいです。
お願い致します。
No.2
- 回答日時:
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.3ベストアンサー
- 回答日時:
>> 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してみるなんてことも考えて下さい。
ご回答ありがとうございます。
ご丁寧に説明して下さったおかげで、
無事2つとも動くようになりました。
"transition" を timerLabel にするのを誤って解釈しており、" "の間にtimerLabelを入れたのが恐らく原因だと思います・・・。
photos3としてスライダーを増やしても無事動きました。
前回に引き続き、本当に本当にありがとうございます。
とても助かりました。
ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ノートパソコン サブスクの音楽はパソコンに保存されない?スライドショーの音源にできない? 3 2022/09/24 16:54
- 写真・ビデオ iPhoneでアルバム共有アプリを探してます 1 2022/09/11 14:07
- その他(プログラミング・Web制作) google formsで回答者をスプレッドシートに記載する方法 1 2023/06/23 11:22
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- デスクトップパソコン デスクトップパソコンのお薦めを教えてください。 19 2022/10/25 09:21
- その他(パソコン・周辺機器) 2つのPCを行き来する 2 2022/06/15 01:59
- Web・クリエイティブ 創作活動について質問です。 ・自分が過去に虐められたり人間関係で悩んで部活やクラスで孤立した経験等を 2 2022/10/10 22:14
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
初心者です。gulpでコンパイル...
-
階層別の組織図の自動作成について
-
React hooksが値を返して配列変...
-
特定の文字列を複数抜き出した...
-
追加ボタンを押した際に ok ボ...
-
ジャバスクリプトについて。
-
GASでGoogleフォームの自動返信...
-
フロントエンドフレームワーク...
-
画面遷移を行わずに同一ページ...
-
セレクトを全て選択されていな...
-
ブックマークレットについて
-
①入力フォーム→②確認表示画面→③...
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
二次元配列を使って順位をだす...
-
iOSのみダブルタップが必要
-
jsで質問です。 displayプロパ...
-
var exports = exports || {}; ...
-
HTMLタグに複数のクラスを設定...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bxsliderで画像毎に表示時間を...
-
bxsliderで巻き戻しにする方法
-
タブをフリックでスライドでき...
-
JavascriptからPHPへのAjax通信...
-
Javascriptを使ってQRコード読...
-
Selenium4でボタンをクリックで...
-
要素内を常に一番下を表示させたい
-
jQueryを使いformでsubmitした...
-
同一ページ移動時ハンバーガー...
-
階層別の組織図の自動作成について
-
JavaScriptでtabindexの変更っ...
-
Googleマップに複数のピンを立...
-
SQLのmaxで求めた値を変数に代...
-
パソコンで動くjavascriptがス...
-
readyStateが4にならない原因
-
AjaxでJSONを受信すると、文字...
-
変数にドットをいれることはか...
-
IndexedDB を使ってファイルア...
-
Selenium Basicの件
-
インラインフレームを自動更新...
おすすめ情報