###前提・実現したいこと
「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ページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答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総合スコア328
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総合スコア328
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/19 02:40
2016/10/19 03:43
2016/10/19 04:29
2016/10/19 05:11
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/19 01:10