###colorboxのポップアップ位置を調整したい。
サイト内の画像表示にjQueryプラグインのcolorboxを使用しています。
画像をクリックすると、画面中央にポップアップされます。
PC、スマホ縦のときでは表示に特に問題はありませんでした。
###スマホを横に回転すると、画像が中央に来ない。
レスポンシブ対応として、リキッドデザインにしており、PCでは二列で画像を配置していたのをスマホでは一列になるように表示が変わるようにしているのみです。
縦で見ている時はポップアップが中央にくるのですが、横にした時には、ポップアップが上にあったり画面から見切れて表示されてしまいます。colorboxサイトを見ても、よくわからず、もしJavascriptでの統制の仕方があれば教えていただきたいです。
###該当のソースコード
HTML5
1<div class="photo" data-aos="fade-right"> 2 <figure class="side"> 3 <a class="gallery test" href="images/image01.jpg" title=""><img src="images/thumb03.jpg" alt="" /></a> 4 </figure> 5</div> 6 7<div class="photo" data-aos="fade-left"> 8 <figure class="side"> 9 <a class="gallery test" href="images/image02.jpg" title=""><img src="images/thumb04.jpg" alt="" /></a> 10 </figure> 11</div>
css3
1/*スマホ時*/ 2@media screen and (max-width:380px) { 3.photo{ 4margin-top:10%; 5} 6.photo img{ 7width:100%; 8} 9}
//colorbox $(function() { $(".gallery").colorbox({ rel:'slideshow', maxWidth:"90%", maxHeight:"90%", opacity: 1.0 }); }); $(document).ready(function(){ $(".test").colorbox({ maxWidth:"90%", maxHeight:"90%" }); }); //colorbox
###試したこと
Javascriptの組み方が分からず、停止中です。。。
どうぞよろしくお願いいたします。
あなたの回答
tips
プレビュー