質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

4203閲覧

「colorbox.js」でカレント表示を出したい

PotatoHead

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

1クリップ

投稿2016/10/18 07:33

###前提・実現したいこと
「colorbox.js」(http://www.jacklmoore.com/colorbox/)でinlineのカルーセル形式にしているのですが、
現在地表示(カレント表示)が数字のものしかなくて困っています。
実現したいのは●○○(黒丸が現在地)みたいなやつです。
そもそも実現できるかもわからないのでご教授いただきたいです。

###発生している問題

「1 of 3」のような表記しかできない。
どこを触っていいかわからない。。。

###該当のソースコード

html

1<div id="section01" class="section"> 2 <h2>同じドキュメント内のHTML(インラインHTML)の呼び出し</h2> 3 <p class="btn"><a class="inline" href="#inline01">インラインHTMLその1</a></p> 4 <p class="btn"><a class="inline" href="#inline02">インラインHTMLその2</a></p> 5</div> 6 7<!--下記からモーダルの中身--> 8<div style="display:none"> 9 <div id="inline01"> 10 <p>コンテンツ</p> 11 </div> 12 13 <div id="inline02"> 14 <p>コンテンツ</p> 15 </div> 16</div>

javascript

1$(function(){ 2 $(".inline").colorbox({ 3 rel:'group', 4 inline: true 5 }); 6});
退会済みユーザー👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

はじめまして!
私もcolorBoxを利用しておりますが、こんな機能あったんですね、知りませんでした。。。

探した限り丸型のページコントローラはオプションにはなさそうだったので、無理やり作ってみました。
このせいで誤作動等起こしてしまったら申し訳ないですm(_ _)m

HTML

1<!-- CSS --> 2<style> 3#controller_box { 4 position: absolute; 5 bottom: 5px; 6 text-align: center; 7 width: 100%; 8} 9#controller_box span { 10 display: inline-block; 11 margin: 0 3px; 12 cursor: pointer; 13} 14</style> 15 16<!-- HTML --> 17<div id="section01" class="section"> 18 <p class="btn"><a class="inline" href="#inline01">インラインHTMLその1</a></p> 19 <p class="btn"><a class="inline" href="#inline02">インラインHTMLその2</a></p> 20 <p class="btn"><a class="inline" href="#inline03">インラインHTMLその3</a></p> 21</div> 22 23<div style="display:none"> 24 <div id="inline01" class="inline_content"> 25 <p>コンテンツ1</p> 26 </div> 27 <div id="inline02" class="inline_content"> 28 <p>コンテンツ2</p> 29 </div> 30 <div id="inline03" class="inline_content"> 31 <p>コンテンツ3</p> 32 </div> 33</div>

Javascript

1$(function(){ 2 $(".inline").colorbox({ 3 rel:'group', 4 inline: true, 5 width: "600px", 6 height: "400px" 7 }); 8 9 // [image 1 of 3]の表記を消しちゃいます 10 $("#cboxCurrent").remove(); 11 12 // ページコントローラになる●を作ってあげます 13 // 各idは後ほど配列から該当する要素を探すkeyとして利用するため、"to_0"~"to_2"にしています(数字から始まるid/classはNGなので適当に"to_"から始めてます) 14 $("#cboxContent").append("<div id='controller_box'><span id='to_0' class='controller'>○</span><span id='to_1' class='controller'>●</span><span id='to_2' class='controller'>●</span></div>") 15 16 // 各コンテンツを配列に格納し、後ほど参照する配列を作ってあげます 17 var content = $(".inline_content") 18 var contentArr = [] 19 $.each(content,function(i){ 20 contentArr.push(content[i]) 21 }) 22 23 // ●をクリックしたときの処理 24 // 1つめの●をクリック→配列の1つ目の要素を表示 25 $(document).on("click",".controller",function(){ 26 $(".controller").text("●") 27 $(this).text("○") 28 var pageNum = $(this).attr("id").split("_") 29 pageNum = Number(pageNum[1]) 30 $("#cboxLoadedContent").children(".inline_content:first").replaceWith(contentArr[pageNum]) 31 }) 32}); 33});

おそらく display:block ⇄ display:none で表示/非表示を切り替えても良いのでしょうが、
colorBoxの動きを見ているとdetach()か何かで要素を削除してから表示/非表示の処理をしてるっぽかったので、
なるべくプラグインに沿った作りにしてみました。

投稿2016/10/18 09:16

編集2016/10/18 09:46
MaShiRo_H

総合スコア328

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

PotatoHead

2016/10/19 01:10

ご回答ありがとうございます! 最初はcolorboxの中にbxsliderを入れてたんですが誤作動起こしまくりで…汗。 jsまで丁寧に書いていただきありがとうございます! たしかにちゃんと動いてくれたのですが、今回作るのはcolorbox内のコンテンツの高さがバラバラでして、、、。そこが関係しているのか黒丸で移動した後に左右の矢印ボタンを押すと誤作動を起こしてしまいます。。。 黒丸カレントの挙動を左右ボタンの挙動と同じにすることって難しいですかね。。。
guest

0

こちらに追記させていただきますねm(_ _)m

左右の矢印ボタンはcolorBoxのオプションのものですよね。
恐らくオリジナルのドットのコントローラとオプションの矢印のコントローラそれぞれ異なる動きで表示/非表示の処理をしているのできちんと動かないんじゃないかなと思います。
(もし誤作動の内容が見当違いでしたらすみません...)

オプションの矢印にこだわりがないのであれば、それもこっちで作ってあげた方が管理は楽かもしれませんね。

HTML

1 2<style> 3#controller_box { 4 position: absolute; 5 bottom: 5px; 6 text-align: center; 7 width: 100%; 8} 9#controller_box span { 10 display: inline-block; 11 margin: 0 3px; 12 cursor: pointer; 13} 14 15/* 追記 */ 16.controller_arrow { 17 cursor: pointer; 18} 19#to_prev { 20 position: absolute; 21 top: 50%; 22 left: 10px; 23} 24#to_next { 25 position: absolute; 26 top: 50%; 27 right: 10px; 28} 29</style> 30 31<!-- HTML --> 32<!-- href変えてます --> 33<div id="section01" class="section"> 34 <p class="btn"><a class="inline" href="#inline_0">インラインHTMLその1</a></p> 35 <p class="btn"><a class="inline" href="#inline_1">インラインHTMLその2</a></p> 36 <p class="btn"><a class="inline" href="#inline_2">インラインHTMLその3</a></p> 37</div> 38 39<!-- id変えてます --> 40<div style="display:none"> 41 <div id="inline_0" class="inline_content"> 42 <p>コンテンツ1</p> 43 </div> 44 <div id="inline_1" class="inline_content"> 45 <p>コンテンツ2</p> 46 </div> 47 <div id="inline_2" class="inline_content"> 48 <p>コンテンツ3</p> 49 </div> 50</div> 51

Javascript

1 2$(function(){ 3 $(".inline").colorbox({ 4 rel:'group', 5 inline: true, 6 width: "600px", 7 height: "400px" 8 }); 9 10 $("#cboxCurrent").remove(); 11 12 $("#cboxContent").append("<div id='controller_box'><span id='to_0' class='controller'>○</span><span id='to_1' class='controller'>●</span><span id='to_2' class='controller'>●</span></div>") 13 14 // 追記 15 $("#cboxContent").append("<span id='to_prev' class='controller_arrow'>◀︎</span><span id='to_next' class='controller_arrow'>▶︎</span>") 16 17 var content = $(".inline_content") 18 var contentArr = [] 19 $.each(content,function(i){ 20 contentArr.push(content[i]) 21 }) 22 23 $(document).on("click",".controller",function(){ 24 $(".controller").text("●") 25 $(this).text("○") 26 var pageNum = $(this).attr("id").split("_") 27 pageNum = Number(pageNum[1]) 28 $("#cboxLoadedContent").children(".inline_content").replaceWith(contentArr[pageNum]) 29 }) 30 31 // 追記 32 $(document).on("click",".controller_arrow",function(){ 33 var currentNum = $("#cboxLoadedContent").children(".inline_content").attr("id").split("_") 34 currentNum = Number(currentNum[1]) 35 var index; 36 if ( $(this).attr("id") == "to_next" ) { 37 if ( currentNum < 2 ) { 38 index = currentNum+1 39 } else { 40 index = 0 41 } 42 } else { 43 if ( currentNum == 0 ) { 44 index = 2 45 } else { 46 index = currentNum-1 47 } 48 } 49 $("#cboxLoadedContent").children(".inline_content").replaceWith(contentArr[index]) 50 }); 51}); 52

idやhrefも少し変更しているのでご注意ください><

投稿2016/10/19 01:49

編集2016/10/19 01:50
MaShiRo_H

総合スコア328

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

PotatoHead

2016/10/19 02:36

わー!!すごいです!ちゃんと動きました!感動です(T_T) すいません、聞いてばっかで申し訳ないんですが、 カレント表示と矢印って連動させることって出来ますか?? 現状両者とも動作は完璧なんですが矢印を押したときに一緒にカレント表示も動いてほしいんですが、、、。ほんとごめんなさい。。。よろしければまた教えてください(T_T)
MaShiRo_H

2016/10/19 02:40

あ、そこ今書いてました! 最後から3行目の後に下記追記してあげれば、動くと思いますm(_ _)m ... $("#cboxLoadedContent").children(".inline_content").replaceWith(contentArr[index]) // 追記 $(".controller").text("●") $("#to_"+index).text("○") }); });
PotatoHead

2016/10/19 03:43

うわー!ありがとうございます!!ちゃんと動きました!! ありがとうございます。 最後に個人的な都合の話なんですが、、、 colorboxを同ページで普通に拡大させるために使っているんですがそこにも矢印とカレント表示が出てしまっておりまして、、、。 できれば今回作ったものだけにカレント表示+矢印を表示させたいのですが回避方法はありますでしょうか??(if文?ですかね、、、)
PotatoHead

2016/10/19 05:11

度重なる質問に答えていただき本当にありがとうございました!!! 無事に想定通りのコンテンツを完成させることができました(T_T) 恐らくまた、違う壁が出てくると思いますのでその時はまた何卒よろしくお願い致しますm(_ _)m 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問