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


1258691_50996273


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

編集したら、[jquery.lightbox-0.5.js]もアップロードします。

§3 ヘッダー部分の編集

アップロードが完了したら、ヘッダー部分(<head>〜</head>)に以下を挿入します。
[アップロード先]部分は先ほど確認したアップロード先に置き換えて下さい。

§4 使い方

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

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

















チャーム本店



価格.com ブロードバンド

価格.com 自動車保険









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