画像をカッコよく表示するプラグイン jQuery lightBox plugin の使い方

画像をカッコよく表示させるプラグイン 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)のパスを先ほど確認した[アップロード先]に置き換えて下さい。

// 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',

// 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>)に以下を挿入します。
[アップロード先]部分は先ほど確認したアップロード先に置き換えて下さい。

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

$(function() {

$('a[@rel*=lightbox]').lightBox();

});

</script>

§4 使い方

画像をプラグインで表示するには以下のように<a>タグに「rel=”lightbox”」を記述するだけです。

<a rel="lightbox" href="http://blog.com/images/MyImage.jpg">
<img src="http://blog.com/images/MyImage.jpg" alt="MyImage" />
</a>

</a>

インターネットとかシロクマとか

画像をカッコよく表示するプラグイン jQuery lightBox plugin の使い方

§1 jQuery lightBox pluginの入手

§2 jQuery lightBox pluginをアップロード

§3 ヘッダー部分の編集

§4 使い方

シェアして頂けると嬉しいです

■コメントはお気軽にどうぞ

§1 jQuery lightBox pluginの入手

§2 jQuery lightBox pluginをアップロード

§3 ヘッダー部分の編集

§4 使い方

関連する記事

シェアして頂けると嬉しいです

■コメントはお気軽にどうぞ