質問編集履歴

3

修正

2018/01/19 07:19

投稿

rrr6
rrr6

スコア8

test CHANGED
File without changes
test CHANGED
@@ -17,12 +17,6 @@
17
17
 
18
18
 
19
19
 
20
-
21
- ```
22
-
23
- エラーメッセージ
24
-
25
- ```
26
20
 
27
21
 
28
22
 

2

誤字

2018/01/19 07:19

投稿

rrr6
rrr6

スコア8

test CHANGED
File without changes
test CHANGED
@@ -1,13 +1,3 @@
1
- webサイトを作成しているのですが、ギャラリー的な形で画像をいくつか載せています。
2
-
3
- 画像にはjQueryプラグインのcolorboxを使用しており、画像を選択すると拡大して表示するようになっております。
4
-
5
-
6
-
7
- レスポンシブ対応をしているのですが、colorboxの拡大表示のとき、スマホの画面を縦表示のときは中心に来るのですが、横にした時に、中心に画像が来ません。
8
-
9
- スマホで横にしたときにも中央に拡大画像を表示するようにしたいのですが、どのように設定すればよろしいでしょうか。
10
-
11
1
  ###colorboxのポップアップ位置を調整したい。
12
2
 
13
3
  サイト内の画像表示にjQueryプラグインのcolorboxを使用しています。

1

コード入力

2018/01/19 07:18

投稿

rrr6
rrr6

スコア8

test CHANGED
@@ -1 +1 @@
1
- colorboxのスマホ横回転対応について
1
+ colorboxのポップアップ位置を調整したい。(スマホ横回転時)
test CHANGED
@@ -7,3 +7,129 @@
7
7
  レスポンシブ対応をしているのですが、colorboxの拡大表示のとき、スマホの画面を縦表示のときは中心に来るのですが、横にした時に、中心に画像が来ません。
8
8
 
9
9
  スマホで横にしたときにも中央に拡大画像を表示するようにしたいのですが、どのように設定すればよろしいでしょうか。
10
+
11
+ ###colorboxのポップアップ位置を調整したい。
12
+
13
+ サイト内の画像表示にjQueryプラグインのcolorboxを使用しています。
14
+
15
+ 画像をクリックすると、画面中央にポップアップされます。
16
+
17
+ PC、スマホ縦のときでは表示に特に問題はありませんでした。
18
+
19
+
20
+
21
+ ###スマホを横に回転すると、画像が中央に来ない。
22
+
23
+ レスポンシブ対応として、リキッドデザインにしており、PCでは二列で画像を配置していたのをスマホでは一列になるように表示が変わるようにしているのみです。
24
+
25
+ 縦で見ている時はポップアップが中央にくるのですが、横にした時には、ポップアップが上にあったり画面から見切れて表示されてしまいます。colorboxサイトを見ても、よくわからず、もしJavascriptでの統制の仕方があれば教えていただきたいです。
26
+
27
+
28
+
29
+
30
+
31
+ ```
32
+
33
+ エラーメッセージ
34
+
35
+ ```
36
+
37
+
38
+
39
+ ###該当のソースコード
40
+
41
+ ```HTML5
42
+
43
+ <div class="photo" data-aos="fade-right">
44
+
45
+ <figure class="side">
46
+
47
+ <a class="gallery test" href="images/image01.jpg" title=""><img src="images/thumb03.jpg" alt="" /></a>
48
+
49
+ </figure>
50
+
51
+ </div>
52
+
53
+
54
+
55
+ <div class="photo" data-aos="fade-left">
56
+
57
+ <figure class="side">
58
+
59
+ <a class="gallery test" href="images/image02.jpg" title=""><img src="images/thumb04.jpg" alt="" /></a>
60
+
61
+ </figure>
62
+
63
+ </div>
64
+
65
+ ```
66
+
67
+ ```css3
68
+
69
+ /*スマホ時*/
70
+
71
+ @media screen and (max-width:380px) {
72
+
73
+ .photo{
74
+
75
+ margin-top:10%;
76
+
77
+ }
78
+
79
+ .photo img{
80
+
81
+ width:100%;
82
+
83
+ }
84
+
85
+
86
+
87
+ ```
88
+
89
+ ```
90
+
91
+ //colorbox
92
+
93
+ $(function() {
94
+
95
+ $(".gallery").colorbox({
96
+
97
+ rel:'slideshow',
98
+
99
+ maxWidth:"90%",
100
+
101
+ maxHeight:"90%",
102
+
103
+ opacity: 1.0
104
+
105
+ });
106
+
107
+ });
108
+
109
+ $(document).ready(function(){
110
+
111
+ $(".test").colorbox({
112
+
113
+ maxWidth:"90%",
114
+
115
+ maxHeight:"90%"
116
+
117
+ });
118
+
119
+ });
120
+
121
+ //colorbox
122
+
123
+ ```
124
+
125
+
126
+
127
+ ###試したこと
128
+
129
+ Javascriptの組み方が分からず、停止中です。。。
130
+
131
+
132
+
133
+
134
+
135
+ どうぞよろしくお願いいたします。