blog@nero-8

ブログ記事内の画像や動画サービスの映像などを、ブラウザウィンドウ内にオーバーレイ表示させる jQuery.lightpop.js を導入してみました。

当初、LiteBox で画像のみ実現しようとしてたのですが、動画も出来ないかな？と検索かけたら lightpop に行き着き。。
サンプルページで試してみていたところ、LiteBox からも簡単に移行できてしまう様子で、もう入れるしかないでしょ！！…と、Script 関連の経験値はとっても低いのですが、テストページを作って遊んで、一気に導入してしまいました。

こんな画像の表示とか…

YouTubeの動画もオーバーレイでしかもお好みサイズで。 → 大きなサイズ(853x480：YouTubeHDサイズ)で見る
→ もっと大きなサイズ(1024x576)で見る ※ディスプレイ解像度注意です。
→ YouTubeHD原寸(1280x720)で見る ※ディスプレイ解像度注意です。
※HD表示にならないときは切り替えてください。

このような感じでキレイに表示されるようになりました。
記事カラムの幅に縛られず、見栄えもとっても良くなりました。これは嬉しいです。
作者さま、感謝・感謝・感謝であります。

以下、初心者目線の導入手順です。

• 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>

<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

過去記事の対応…どうしましょ。。。（汗