RSS Link
September 20, 2009
画像や動画など、オーバーレイ表示できる jquery-lightpop を入れてみた。
ブログ記事内の画像や動画サービスの映像などを、ブラウザウィンドウ内にオーバーレイ表示させる jQuery.lightpop.js を導入してみました。
当初、LiteBox で画像のみ実現しようとしてたのですが、動画も出来ないかな？と検索かけたら lightpop に行き着き。。
サンプルページで試してみていたところ、LiteBox からも簡単に移行できてしまう様子で、もう入れるしかないでしょ！！…と、Script 関連の経験値はとっても低いのですが、テストページを作って遊んで、一気に導入してしまいました。
こんな画像の表示とか…
YouTubeの動画もオーバーレイでしかもお好みサイズで。
→ 大きなサイズ(853x480：YouTubeHDサイズ)で見る
→ もっと大きなサイズ(1024x576)で見る ※ディスプレイ解像度注意です。
→ YouTubeHD原寸(1280x720)で見る ※ディスプレイ解像度注意です。
※HD表示にならないときは切り替えてください。
このような感じでキレイに表示されるようになりました。
記事カラムの幅に縛られず、見栄えもとっても良くなりました。これは嬉しいです。
作者さま、感謝・感謝・感謝であります。
以下、初心者目線の導入手順です。
・ jQuery.lightpop.js ： こちらから最新版 jQuery.lightpop.js を拾ってくる。
f=f||"images/"; → f=f||"/js/images/";
- jquery-x.x.x.min.js → jquery.min.js
- jquery.lightpop-x.x.x.min.js → jquery.lightpop.min.js
- ftpでファイルを転送 jquery.min.js と jquery.lightpop.min.js、そして images フォルダごと /js ディレクトリへ。
<script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.lightpop.min.js"></script>
・最終行手前の</body>手前に下記を追加します。
<script type="text/javascript">
//<![CDATA[
// jQuery Lightpop
$(function(){
$('a[rel*=lightbox]').lightpop({overlayBgColor:'#333',overlayOpacity:0.9,contentBorder:'1px solid silver'});
$('a[href^=http://www.youtube.com/watch]').lightpop({overlayBgColor:'#333',overlayOpacity:0.9,contentBorder:'1px solid silver'});
});
//]]>
</script>
</body>
- lightpop作動時の背景色：#333 で、透過10% (overlayOpacity:0.9) としてみました。
- <a>タグ内に「rer=lightbox」がある場合に lightpop 適用(画像用)
- <a>タグ内に「http://www.youtube.com/watch」がある場合に lightpop 適用(YoutTube用)
- 画像とYouTubeしか入れてありませんが、他にも様々な機能があるようですので、詳しくは lightpop のページやサンプルのページを参照ください。
<a href="http://www.youtube.com/watch?v=xxxxxxxxxxx&hl=ja&autoplay=1&width=xxx&height=xxx" title="hogehoge"> imgタグや文字など </a>
- http:// ～ v=xxxxxxxxxxx ： YouTube の URI
- hl=ja ： 日本語表示
- autoplay=1 ： lightpop 起動で自動再生
- width=xxx/height=xxx ： 動画表示サイズ。(高さは動画+25px)
- title= ： lightpop画面左下にタイトルが表示されます。
- 画質指定の fmt=xx は試してみましたが、反映されませんでした。
<a href="/hoge/hoge.jpg" rel="lightbox" title="hogehoge"><img src="/hoge/hoge-thumb.jpg" border="0" alt="hogehoge" /></a>
- <a>タグ指定の画像 ： lightpopで表示する画像
- rel="lightbox" ： このタグでlightpop適用
- title= ： lightpop画面左下にタイトルが表示されます。
- <img>タグ指定の画像 ： 元から表示させるサムネイル画像
ローディング中のアニメGIFを改変しましたので、その画像のみ置いておきます。
lightpop-ico-loading.zip
過去記事の対応…どうしましょ。。。（汗
はじめまして。
『jquery-lightpop』を導入しようとしてこちらにたどり着きました。
上手くいかないので質問させてください。
-------------------------------------------------
.jsファイルのファイル名変更で
jquery-x.x.x.min.js → jquery.min.js
jquery.lightpop-x.x.x.min.js → jquery.lightpop.min.js
と有りますが、
私が拾ってきたのは
jquery.lightpop-0.8.5.1.js
jquery.lightpop-0.8.5.1.min.jsの二つです。
一つだけminが無いので違うのかな？
どうかご回答よろしくお願いします。
このエントリーのトラックバックURL:
トラックバックスパム対策のため、恐れ入りますがトラックバック元のコンテンツにこのぺージへのリンクを記載頂けますでしょうか。ご面倒とは思いますが、よろしくお願い致します。
本ページのURL :
