今回初めて、colorboxを使うことになったのですが、うまく表示されずに困っています。
PCだと中央に表示されるのですが、
iphoneやipadで見ると上下は真ん中ですが、左右がズレて左端に小さく表示されてしまいます。
現在のコードは以下です。
lang
1<script> 2$(function() { 3 $(".photo").colorbox({ 4 rel:'slideshow1', 5 slideshow:true, 6 slideshowSpeed:3000, 7 maxWidth:"90%", 8 maxHeight:"90%", 9 opacity: 0.7 10 }); 11}); 12</script> 13 14<div class="gallery"> 15<ul> 16 <li><a href="images/001/img_02.jpg" class="photo"><img src="images/001/img_02.jpg"></a></li> 17 </li> 18 <li><a href="images/001/img_03.jpg" class="photo"><img src="images/001/img_03.jpg"></a></li> 19 </li> 20 <li><a href="images/001/img_04.jpg" class="photo"><img src="images/001/img_04.jpg"></a></li> 21 </li> 22 <li><a href="images/001/img_05.jpg" class="photo"><img src="images/001/img_05.jpg"></a></li> 23 </li> 24 <li><a href="images/001/img_06.jpg" class="photo"><img src="images/001/img_06.jpg"></a></li> 25 </li> 26</ul> 27</div>
自分で調べてみて2通り試してみましたが、
おそらく自分の記述方法に間違いがあるようで、改善されませんでした。
(1)変わらず左に寄ってしまいます。
lang
1<script> 2$(document).ready(function() { 3 $('.photo1').colorbox({ 4 onComplete: function() { 5 window.resizeTo(640, 480); 6 $.colorbox.position(0); 7 } 8 }); 9}); 10</script>
(2)height:"90%"は効いていてcolorboxの高さは90%になりましたが、
width:"99%"は効いていないようで、幅30%ぐらいのサイズで変わらず左端に表示されます。
そして、ボックスの上部に画像が表示されています。
lang
1<script> 2 $(window).on("resize load" , function(){ 3 4 if( parseInt( $(window).width() ) < 740 ){ 5 //スマホ 6 $(".photo1").colorbox({ 7 iframe:true, 8 width:"99%", 9 height:"90%", 10 onComplete: function() { 11 setTimeout(function(){ 12 $.colorbox.position(0); 13 },1000); 14 } 15 }); 16 } else { 17 $(".photo1").colorbox({ 18 rel:'slideshow1', 19 slideshow:true, 20 slideshowSpeed:3000, 21 maxWidth:"90%", 22 maxHeight:"90%", 23 opacity: 0.7 24 }); 25 } 26 }); 27</script>
自分の記述が間違っているのだと思うのですが、どう直したらいいのか解らず困っています。
他の方法などでも中央に表示させる方法はあるでしょうか?
どなたかご教授ください。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/23 08:45