回答編集履歴

3

諸々変更しました

2016/10/18 09:46

投稿

MaShiRo_H
MaShiRo_H

スコア328

test CHANGED
@@ -86,12 +86,6 @@
86
86
 
87
87
  $(function(){
88
88
 
89
- // [image 1 of 3]の表記を消しちゃいます
90
-
91
- $("#cboxCurrent").remove();
92
-
93
-
94
-
95
89
  $(".inline").colorbox({
96
90
 
97
91
  rel:'group',
@@ -106,11 +100,21 @@
106
100
 
107
101
 
108
102
 
103
+ // [image 1 of 3]の表記を消しちゃいます
104
+
105
+ $("#cboxCurrent").remove();
106
+
107
+
108
+
109
109
  // ページコントローラになる●を作ってあげます
110
110
 
111
- $("#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>")
111
+ // idは後ほど配列から該当する要素を探すkeyとして利用するため、"to_0"~"to_2"にしています(数字から始まるid/classはNGなので適当に"to_"から始めてます)
112
112
 
113
+ $("#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>")
114
+
115
+
116
+
113
- // あとで出し入れするためにセクションを配列に格納
117
+ // 各テンツを配列に格納し、後ほど参照する配列を作ってあげます
114
118
 
115
119
  var content = $(".inline_content")
116
120
 
@@ -124,9 +128,15 @@
124
128
 
125
129
 
126
130
 
131
+ // ●をクリックしたときの処理
132
+
127
- // クリックした●のidを配列の中身参照するkeyとして利用しています
133
+ // 1つめの●をクリック配列の1つ目の要素表示
128
134
 
129
135
  $(document).on("click",".controller",function(){
136
+
137
+ $(".controller").text("●")
138
+
139
+ $(this).text("○")
130
140
 
131
141
  var pageNum = $(this).attr("id").split("_")
132
142
 
@@ -135,6 +145,8 @@
135
145
  $("#cboxLoadedContent").children(".inline_content:first").replaceWith(contentArr[pageNum])
136
146
 
137
147
  })
148
+
149
+ });
138
150
 
139
151
  });
140
152
 

2

inline

2016/10/18 09:46

投稿

MaShiRo_H
MaShiRo_H

スコア328

test CHANGED
@@ -30,7 +30,9 @@
30
30
 
31
31
  #controller_box span {
32
32
 
33
+ display: inline-block;
34
+
33
- padding: 0 3px;
35
+ margin: 0 3px;
34
36
 
35
37
  cursor: pointer;
36
38
 

1

cursor: pointer追加

2016/10/18 09:26

投稿

MaShiRo_H
MaShiRo_H

スコア328

test CHANGED
@@ -31,6 +31,8 @@
31
31
  #controller_box span {
32
32
 
33
33
  padding: 0 3px;
34
+
35
+ cursor: pointer;
34
36
 
35
37
  }
36
38