- 2009-03-18 (水) 4:54
- jQuery
画像・swf・flv・動画ファイル・動画サイト・自サイト内の別ページなどを lightbox 風に表示するための jQuery用プラグイン、それがlightpop.js。
lightbox 風のオーバーレイするポップアップ表示はこれだけで十分なだな?と個人的に思ってます。
超便利なものをつくってくれて、導入も簡単でWebデザイナーにはうれしいjQueryプラグインです。
提供元サイトのサンプルページはこちら
◆対応しているファイル形式
- 画像ファイル(jpg,gif,pngなど)
- .3gp -> Quicktime Player
- .asf -> Windows Media Player
- .avi -> Windows Media Player
- .mp4 -> Quicktime Player
- .mpg -> Windows Media Player
- .mov -> Quicktime Player
- .rm -> Realplayer
- .swf -> Flash 8 plugin
- .flv -> Flash 8 plugin(※フリーの FLV プレイヤー JW FLV Player の導入が必要)
- .wmv -> Windows Media Player
- .html
◆対応している動画サイト
- YouTube
- Metacafe
- LiveLeak.com
- Google Video
- SPIKE Powered By IFILM
- Dailymotion
- Super Deluxe
- ニコニコ動画(RC2) (サムネイル表示になります)
■使用方法
jquery.lightpop-0.7.5.zipとjQuery JavaScript Libraryを入手して、
HTMLの<head>内に以下コードを記述。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightpop-0.7.4.js"></script>
あとはJavascriptコードで適用させたい要素に対して、以下のそれぞれの記述してやれば、動作します。
<script type="text/javascript">
$(function() {
// <a href="http://hogehoge/" rel="lightbox"> な要素
$('a[rel*=lightbox]').lightpop();
// <a href="http://hogehoge/" class="lightpop"> な要素
$('a.lightpop').lightpop();
// 画像ファイルへのリンク
$('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop();
// YouTube へのリンク
$('a[href*=.youtube.com/watch]').lightpop();
});</script>
上記のコードは、HTMLのその属性の記述にrel=”lightbox”の記述でもいいし、class=”lightpop”でもいいし、または、<a href=”画像ファイル”>のときに適用するなど選べるってことみたいです。
画像やYoutube以外のファイル(htmlや他動画サイト)の指定方法はこちらのサンプルページで掲載されてます。
自分はswfに適用したかったので、HTML内に上記コードを書いて(外部jsファイルにしてもいいけど)、以下の適用するタグで
<a href="ファイルパス/sample.swf?width=320&height=240" title="ここの文字がキャプション表示されます。" class="lightpop">swfサンプル</a>てやったらできました。感動?☆
widthとheightの後の数値は、そのswfの縦と横の幅の指定です。
詳しい使用方法やその他の指定などはlightpop.js本家の提供元サイトさんを見てください。動作サンプルもそのサイトにあります。
Popularity: 90% [?]
関連記事
- Newer: CSS初期設定
- Older: [Webデザイン]国内Webデザインギャラリーサイト
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://www.web-milk.com/articles/jquery/jquery%e5%a4%9a%e7%a8%ae%e3%83%a1%e3%83%87%e3%82%a4%e3%82%a2%e5%af%be%e5%bf%9c%e3%81%ae%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%83%ac%e3%82%a4%e8%a1%a8%e7%a4%ba%e3%83%9d%e3%83%83%e3%83%97%e3%82%a2.html/trackback
- Listed below are links to weblogs that reference
- [jQuery]多種メデイア対応のオーバーレイ表示ポップアップ”lightpop.js” from Webデザイナーメモ｜Webmilk
