fancyboxの設定

jQueryプラグイン「fancybox」は画像だけでなく、YoutubeやGoogle mapの埋め込みも対応している。

旧バージョン　無償
Fancybox - Fancy jQuery lightbox alternative

新しいバージョン　商用利用の場合は有料
http://fancyapps.com/fancybox/

画像を表示してグループ化する記述
aにクラス名とグループ名を付ける。rel属性の代わりにdata-fancybox-group属性を使っている。HTML5ではa要素の中に「rel」「name」属性を使うとエラーになってしまうため。

<li><a class="fancybox" data-fancybox-group="gallery1" href="img/lightBox01.png"><img src="img/lightBox01s.png" alt="#"></a></li>