colorboxを内側の画像サイズに合わせて可変させたい

Question

###colorboxを内側の画像サイズに合わせて可変させたい
jQuery初心者です。
ネット上の情報から見よう見真似でaタグにcolorboxを実装してみたのですが、内側の画像サイズに合わせてcolorboxを可変させる方法がわからなくて途方に暮れています。
※下記記述ではcolorboxに対して画像が左上合わせで配置されています。

元のソースコード

<link rel="stylesheet" href="colorbox/degign02/colorbox.css">
<script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="colorbox/jquery.colorbox-min.js"></script>
<script src="colorbox/jquery.colorbox-ja.js"></script>
<script>
	$(document).ready(function(){
		$(".icon li a").colorbox({iframe:true, innerWidth:"60%", innerHeight:"80%"});
	   });
</script>


<ul class="icon">
	<li>
		<a href="picture/pict01.jpg"><img src="icon/icon_pict01.png" alt="pict01" width="130px"></a>
	</li>
	<li>
		<a href="picture/pict02.jpg"><img src="icon/icon_pict02.png" alt="pict02" width="130px"></a>
	</li>
</ul>

試したこと

【1】
画像の縦と横の数値を読み込んでcolorboxをリサイズしようとしたのですが、自分の理解力が足りず、そもそもjQueryを読み込んでくれなくなってしまいました。
他にも色々試してみたのですが、どんどん文法的に正しいのかすらわからなくなってきました…。
何かアドバイスいただけましたら幸いです。

該当のソースコード

<link rel="stylesheet" href="colorbox/degign02/colorbox.css">
<script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="colorbox/jquery.colorbox-min.js"></script>
<script src="colorbox/jquery.colorbox-ja.js"></script>
<script>
$(document).ready(function(){
  $(".icon li a").colorbox({iframe: true, innerWidth: 60%, innerHeight: 80%,
    onComplete : function() {
      $('#cboxLoadedContent').children('iframe').on('load',function(){
        var $iframe = $(this);

        var W = Math.max.apply(null, $iframe.contents().find('body').find('div,header,footer,main,section').map(function (){
                  return $(this).outerWidth();
                }).get());
       
        var H = $iframe.get(0).contentWindow.document.body.clientHeight;

        $iframe.colorbox.resize({
          innerWidth: W,
          innerHeight: H,
        });
      });
    }
  });
});
};
</script>

【2】
苦肉の策でcolorboxをリサイズせずにレイアウトをメインで担うcssファイルから画像を中央配置に指定して誤魔化そうともしましたが、これも変化なし。
正直なところ【1】の解決案が初心者には難しいとは感じていますので、こちらの代替案が解決できればフォトショ等で画像サイズを編集しなおして各種設定を調整した方が賢明なのかな、と思っております。
colorbox内の画像の中央配置の方法も良ければご教授いただきたいです。

該当のソースコード

<link rel="stylesheet" href="colorbox/degign02/colorbox.css">
<script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="colorbox/jquery.colorbox-min.js"></script>
<script src="colorbox/jquery.colorbox-ja.js"></script>
<div class="colorbox-size"><script>
	$(document).ready(function(){
		$(".icon li a").colorbox({iframe:true, innerWidth:"60%", innerHeight:"80%"});
	   });
</script></div>



<ul class="icon">
	<li>
		<a href="picture/pict01.jpg"><img src="icon/icon_pict01.png" alt="pict01" width="130px"></a>
	</li>
	<li>
		<a href="picture/pict02.jpg"><img src="icon/icon_pict02.png" alt="pict02" width="130px"></a>
	</li>
</ul>

.colorbox-size{
	margin: 0 auto;
	max-width: 50%;
}

Comments

[m.ts10806]

>HTML上にcamvasを設置して

>href="camvas/
>href="camvas/

「camvas」ではありません。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas
ディレクトリは任意の名前が指定可能とはいえ、名前が決まっているものは間違えては今後別に事故が起き得ます。調整願います。
（意図的にそのように表記しているのなら説明があったほうが良いです）

[haru-ru]

こちらのスペルミスです。ご指摘感謝申し上げます。
お恥ずかしながら「canvas」という要素が存在することも初めて知りました。

今回は動画を扱ってのファイルではなく、これでは誤解を招きますので、
「href="camvas/」表記のディレクトリ名を「href="colorbox/」に変更いたしました。

Answer 1

幅を決めているからでは？

// $(".icon li a").colorbox({iframe:true, innerWidth:"60%", innerHeight:"80%"});
//                          ↓
   $(".icon li a").colorbox();

Comments

[haru-ru]

幅を指定しないとcolorboxが表示されないものと思っておりました…。

早速上記の方法で記述しなおしてみましたら、きれいにcolorboxを可変することができました。
jQueryの文法がどうにも苦手で途方に暮れておりましたので、たいへん助かりました。
この度はご教示いただきまして、本当ににありがとうございました。