jQuery 版の Lightbox 系スクリプトの Slimbox 2 は、付属のスクリプトを使うと、 Flickr の写真のページへリンクが張られた写真の表示も出来るので使い方を。Slimbox 2 v2.04と jQuery v1.4.2で確認。
slimbox-2.04/extra/flickr.js が Flickr からの埋め込み写真を Slimbox 2 で表示させるためのスクリプト。flickr.js のコメントによると、
- Flickr のサムネイルを自動で Slimbox に対応させる
- Flickr の写真のページへのリンクがあるすべての画像が対象になる
rel="lightbox"は追加しなくていい- クリックでミディアムサイズの画像を表示する
- リンクの
titleか、画像のaltをタイトルとして表示する - タイトルには、 Flick の写真のページへのリンクが追加される
とのこと。
slimbox2.js など通常読み込むファイルに加えて、flickr.jsも読み込む。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<script type="text/javascript" src="js/flickr.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />不要なら、 slimbox2.js の
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)の所のロード処理を削除しても問題ない。
html は、Flickr の Shere this で取れる html のままでいい。
<a href="http://www.flickr.com/photos/51979237@N04/4868471305/" title="20100808_01 by hrykozw, on Flickr"><img src="http://farm5.static.flickr.com/4121/4868471305_f93510149e_s.jpg" width="75" height="75" alt="20100808_01" /></a>
<a href="http://www.flickr.com/photos/51979237@N04/4869085578/" title="20100808_02 by hrykozw, on Flickr"><img src="http://farm5.static.flickr.com/4119/4869085578_290e7d675d_s.jpg" width="75" height="75" alt="20100808_02" /></a>これで slimbox 2 で写真が表示されるようになる。
リンクに ref="lightbox" を入れなくていいということだけど、入れても効かないので、写真を複数のグループには出来なかった。