jquery.colorbox.jsで外部htmlをグループ化する方法

久々にjQueryのモーダル系プラグインColorboxを使う場面があった。
今回のリクエストは、外部htmlをモーダルで表示して、さらに画像のようにグループ化してギャラリー表示するというもの。

公式サイト
http://www.jacklmoore.com/colorbox/

jQuery Colorboxを読み込む

<link rel="stylesheet" href="css/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>

htmlがこんな感じだとする

<a href="contents1.html" class="colorbox01">1番目のコンテンツ</a>
<a href="contents2.html" class="colorbox01">2番目のコンテンツ</a>
<a href="contents3.html" class="colorbox01">3番目のコンテンツ</a>

jQueryでこんな風に書く

$(function() {
  $(".colorbox01").colorbox({rel:'group01'});
});