質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

7744閲覧

colorbox スマホやタブレットで中央に表示されない

korokorota

総合スコア40

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/05/25 01:53

今回初めて、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>

自分の記述が間違っているのだと思うのですが、どう直したらいいのか解らず困っています。
他の方法などでも中央に表示させる方法はあるでしょうか?

どなたかご教授ください。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

いくつか試せそうなところを探してみました。Colorbox のバージョンが万が一古い場合は最新版に差し替えて挙動を確認してみてください。ちなみに(2)はresizeイベント時に毎回 $( '.photo1' ).colorbox() を呼ぶので、ロードとリサイズは分けたほうが良いような気がします。

JavaScript

1$( function() { 2 if( $( window ).width() < 740 ){ // スマホ 3 $( '.photo1' ).colorbox( { 4 width : '90%' // マックスではなくwidthを指定する 5 , height : '90%' // 〃 heightを指定する 6 , right : '10%' // 左に寄るのが直るかどうか試す 7 , reposition : true // Colorboxの古いバージョンには入っていなかった気がする 8 /* 略 */ 9 } ); 10 } else { 11 /* 略 */ 12 } 13 $( window ).on( 'resize', function() { 14 $.colorbox.resize(); // reposition: true と同じだが効くか試す 15 } ); 16} );

【Colorbox - a jQuery lightbox】
http://www.jacklmoore.com/colorbox/


Lightbox系プラグインは画面の拡大縮小回転にうまく対応できていない物も有るので、他のものを探してみるのも手です。

【レスポンシブ対応されたLightbox系プラグイン・ライブラリ 10 | NxWorld】
http://www.nxworld.net/tips/10-responsive-lightbox-plugin-and-library.html

投稿2016/05/25 17:07

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

korokorota

2016/06/23 08:45

早々に回答いただいてたのに、しばらく確認できずにいて 本当に申し訳ありませんでした… まだ試していないのですが、取り急ぎお詫びとお礼まで。 とても丁寧にご教授いただき有り難うございました! これから早速試してみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問