jQuery.lightpop.js サンプル

jQuery用のプラグインjQuery.lightpop.jsのサンプルです。 使用方法・ダウンロードはこちらからどうぞ。

画像 サンプル

画像１
<a href="media/pict01.jpg" rel="lightbox" title="画像１">
<img src="media/pict01.thumbnail.jpg" alt="画像１">
</a>
画像２
<a href="media/pict02.jpg?width=320&height=240" rel="lightbox" title="画像２">
<img src="media/pict02.thumbnail.jpg" alt="画像２">
</a>
画像３テキストリンク
<a href="media/pict03.jpg" rel="lightbox" title="画像３">画像３テキストリンク</a>
画像４テキストリンク
<a href="media/pict04.jpg" rel="lightbox" title="画像４">画像４テキストリンク</a>
背景を白の透過画像にし、デザインされたフレーム画像で囲む。
$('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF',contentFrameType:'box'});

YouTube サンプル

オヤジの心に灯った小さな火 - 里田まい with 藤岡藤巻
<a href="http://www.youtube.com/watch?v=dt25pztvX-U" title="YouTube - オヤジの心に灯った小さな火">オヤジの心に灯った小さな火 - 里田まい with 藤岡藤巻</a>
Where the Hell is Matt? (2008) &fmt=22対応
<a href="http://www.youtube.com/watch?v=zlfKdbWwruY&width=640&height=360&fmt=22" title="YouTube - Where the Hell is Matt? (2008)">Where the Hell is Matt? (2008) &fmt=22対応</a>
背景を白の透過画像にし、銀色で幅1pxのボーダーで囲む。
$('a[href^=http://www.youtube.com/watch]').lightpop({overlayBgColor:'#FFF',contentBorder:'1px solid silver'});

YouTube 以外の動画共有サイト サンプル

Stupid Cops In Action! Video
<a href="http://www.metacafe.com/watch/979717/stupid_cops_in_action/" title="Stupid Cops In Action! Video" target="_blank">Stupid Cops In Action! Video</a>
Strange car
<a href="http://www.liveleak.com/view?i=1ab_1198225160" title="Strange car">Strange car</a>
Fire Fart
<a href="http://video.google.com/videoplay?docid=6304447980554417691&hl=en" title="Fire Fart">Fire Fart</a>
Future Weapons Kitty Cornershot
<a href="http://www.dailymotion.com/video/x3tubr_future-weapons-kitty-cornershot_videogames" title="Video Future Weapons Kitty Cornershot">Future Weapons Kitty Cornershot</a>
夢遊
<a href="http://www.nicovideo.jp/watch/sm1746299" title="ニコニコ動画(RC2)‐夢遊">夢遊</a>
$('a[href^=http://www.metacafe.com/watch], a[href^=http://www.liveleak.com/view], a[href^=http://video.google.com/videoplay], a[href^=http://www.dailymotion.com/video], a[href^=http://www.nicovideo.jp/watch]').lightpop();

動画ファイル サンプル

wmv サンプル
<a href="/wp-content/uploads/imgs/b/9/b980c8f1.wmv?width=320&height=240" class="video">wmv サンプル</a>
flv サンプル
<a href="media/video.flv?width=320&height=240" title="flv サンプル" class="video">flv サンプル</a>
$('a.video').lightpop();

Ajax 表示サンプル

Ajax 表示サンプル
<a href="sample_ajax.html?width=320&height=200" class="content">Ajax 表示サンプル</a>
$('a.content').lightpop({Contents:{iframeEnabled:false}});

特記事項

リンクタグの URL の後ろに width=640&height=480 のようにサイズをつけると、対象の画像or動画ファイルのサイズを指定できます。
例： <a href="http://example.com/hoge.jpg?width=640&height=480">

画像・動画サイトへのリンクについては、これを指定しなくても大丈夫ですが、動画ファイル・Ajax 表示 については指定するようにしてください。