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'}); });