画像をカッコよく表示させるプラグイン jQuery lightBox plugin の使い方です。
FC2ブログで使用する場合として記述していますが、他サイトの場合も同様の作業を行えば問題ありません。
※FC2ブログでは使用しているテンプレートにもよりますが、記事一覧(TOPページ)ではプラグインが効かないケースがあるようです。
§1 jQuery lightBox pluginの入手
プラグインはここからダウンロードできます
→jQuery lightBox pluginのダウンロード
§2 jQuery lightBox pluginをアップロード
jQuery lightBox pluginを入手したら、必要なファイルを管理サイトへアップロードします。
この中で必要なファイルは
・[css]フォルダ内のファイル全て
・[images]フォルダ内のファイル全て
・[js]フォルダ内の[jquery.js]、[jquery.lightbox-0.5.js]
です。
[FC2ブログ管理]→[ファイルアップロード]からアップロードします。
[jquery.lightbox-0.5.js]以外をまずアップロードします。
ファイルのアップロードが完了したら、[ファイル一覧]の[ファイル情報]から、ファイルのアップロード先を確認しておいて下さい。(次の作業で必要になります)
アップロード先の例) http://blog-imgs-30.fc2.com/a/b/c/blog/〜
[jquery.lightbox-0.5.js]はアップロードする前にチョット編集します。
各イメージファイル(縲鰀.gif)のパスを先ほど確認した[アップロード先]に置き換えて下さい。
1 2 3 4 5 6 |
// Configuration related to images imageLoading: '[アップロード先]/lightbox-ico-loading.gif', imageBtnPrev: '[アップロード先]/lightbox-btn-prev.gif', imageBtnNext: '[アップロード先]/lightbox-btn-next.gif', imageBtnClose: '[アップロード先]/lightbox-btn-close.gif', imageBlank: '[アップロード先]/lightbox-blank.gif', |
編集したら、[jquery.lightbox-0.5.js]もアップロードします。
§3 ヘッダー部分の編集
アップロードが完了したら、ヘッダー部分(<head>〜</head>)に以下を挿入します。
[アップロード先]部分は先ほど確認したアップロード先に置き換えて下さい。
1 2 3 4 5 6 7 8 |
<script type="text/javascript" src="[アップロード先]jquery.js"></script> <script type="text/javascript" src="[アップロード先]jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="[アップロード先]jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript"> $(function() { $('a[@rel*=lightbox]').lightBox(); }); </script> |
§4 使い方
画像をプラグインで表示するには以下のように<a>タグに「rel=”lightbox”」を記述するだけです。
1 2 3 |
<a rel="lightbox" href="http://blog.com/images/MyImage.jpg"> <img src="http://blog.com/images/MyImage.jpg" alt="MyImage" /> </a> |