2010年11月22日
『lightbox2』・・・
Kedamaです。
BLOG始めた頃から気になってました・・・
サムネイルをクリックすると・・・、写真が出てくる・・・、スライドショーみたいになる・・・
はい、 『Lightbox 2』導入です・・・
『Kedamaチャレンジ / BLOGカスタム / Lightbox 2 編』です・・・
まずはじめに・・・
『Lightbox2』を使用する場合、URLでアクセスできるファイル置き場が必要です。
ぼくはプロバイダ（OCN）の無料サーバーを利用しました。
最初FC2などの無料ブログで試しましたが、外部リンク出来ませんでしたので・・・
はい、上記サーバーの準備ができましたらスタートです。
では始めます・・・
①『Lightbox 2』のダウンロード
http://www.huddletogether.com/projects/lightbox2/
こちらのサイトです。
現在（2010年11月）のバージョンが2.04なんですけど、
これ難しいみたいです・・・（よくわかりません）
んで、Ver.2.03 が良いみたいなので・・・
えっと～、
ダウンロードURLの『2.04』 を 『2.03』に書き換えればダウンロード出来るらしい・・・・・・
はい、下記のURLです。（良いのかな～？勝手にリンク作っちゃった・・・）
http://www.lokeshdhakar.com/projects/lightbox2/releases/lightbox2.03.zip
（注：クリックするとダウンロードが始まります。自己責任でどうぞ・・・）
で、ダウンロードした圧縮ファイルを解凍すると・・・
こうなります
『Lightbox2』を使用する場合、URLでアクセスできるファイル置き場が必要です。
ぼくはプロバイダ（OCN）の無料サーバーを利用しました。
最初FC2などの無料ブログで試しましたが、外部リンク出来ませんでしたので・・・
はい、上記サーバーの準備ができましたらスタートです。
では始めます・・・
①『Lightbox 2』のダウンロード
http://www.huddletogether.com/projects/lightbox2/
こちらのサイトです。
現在（2010年11月）のバージョンが2.04なんですけど、
これ難しいみたいです・・・（よくわかりません）
んで、Ver.2.03 が良いみたいなので・・・
えっと～、
ダウンロードURLの『2.04』 を 『2.03』に書き換えればダウンロード出来るらしい・・・・・・
はい、下記のURLです。（良いのかな～？勝手にリンク作っちゃった・・・）
http://www.lokeshdhakar.com/projects/lightbox2/releases/lightbox2.03.zip
（注：クリックするとダウンロードが始まります。自己責任でどうぞ・・・）
で、ダウンロードした圧縮ファイルを解凍すると・・・
こうなります
②『Lightbox』を自分用に設定変更
『JS』フォルダ内の『lightbox.js』をテキストエディタなどで開きます。
この、64行と65行目
『JS』フォルダ内の『lightbox.js』をテキストエディタなどで開きます。
この、64行と65行目
64 ： var fileLoadingImage = "images/loading.gif";
65 ： var fileBottomNavCloseImage = "images/closelabel.gif";
この青文字部分に自分のサーバー（ファイル置き場）URLを追加
（例 ： http://◯◯◯.◯◯.jp など）
（例 ： http://◯◯◯.◯◯.jp など）
64 ： var fileLoadingImage = "サーバーURL/images/loading.gif";
65 ： var fileBottomNavCloseImage = "サーバーURL/images/closelabel.gif";
③アップロード
次に、サーバー（ファイル置き場）にアップロードです。
『images』フォルダ内の、『image-1.jpg』と『thumb-1.jpg』以外を全てアップロードします。
はい、こんな感じです。
次に、サーバー（ファイル置き場）にアップロードです。
『images』フォルダ内の、『image-1.jpg』と『thumb-1.jpg』以外を全てアップロードします。
はい、こんな感じです。
④ナチュラムのテンプレート変更
テンプレートの中に『< / h e a d >』タグがあります。1個だけですので、その前に下記を貼り付けます。
『トップページ』『個別記事』『アーカイブ』の３項目全部です・・・
（実際貼り付ける際は、◯を取ってください。）
（記事掲載上必要だったので・・・）
<◯script type="text/javascript" src="サーバーURL/js/prototype.js">
テンプレートの中に『< / h e a d >』タグがあります。1個だけですので、その前に下記を貼り付けます。
『トップページ』『個別記事』『アーカイブ』の３項目全部です・・・
（実際貼り付ける際は、◯を取ってください。）
（記事掲載上必要だったので・・・）
<◯script type="text/javascript" src="サーバーURL/js/scriptaculous.js?load=effects">
<◯script type="text/javascript" src="サーバーURL/js/lightbox.js">
<◯link rel="stylesheet" href="サーバーURL/css/lightbox.css" type="text/css" media="screen" / >
はい、これで設置完了です。
⑤記事投稿方法
まずはサンプルです。
はい、こちらのタグは・・・
（実際貼り付ける際は、◯を取ってください。）
まずはサンプルです。
はい、こちらのタグは・・・
（実際貼り付ける際は、◯を取ってください。）
<◯A HREF="サーバーURL/写真ファイル名" rel="lightbox[注1：任意の半角英数字]" title="写真左下のコメント"><◯img src="サーバーURL/写真ファイル名" 注2：width="97" height="80" alt="" ><◯/a>
注1：スライドショーのグループ名です。表示する写真すべてに同じ名前を付けます。例：[001]、[kedama]など
注2：この部分がサムネイル画像のサイズです。お好みで・・・
あとは表示したい写真枚数分だけ上記を続けて記述して、注1の[任意の半角英数字]を合わせるだけです。
はい、いかがでしょうか？
では、練習がてら・・・
（OLYMPUS E-300 ～ F ZUIKO 50mm F1.8 ）
ぼくのへたくそな写真でも・・・、雰囲気出ましたね～・・・
へたくそな写真でもそれなりに・・・
うまいひとの写真はもっとすてきに・・・
ですかね・・・
では、
はい、いかがでしょうか？
では、練習がてら・・・
（OLYMPUS E-300 ～ F ZUIKO 50mm F1.8 ）
ぼくのへたくそな写真でも・・・、雰囲気出ましたね～・・・
へたくそな写真でもそれなりに・・・
うまいひとの写真はもっとすてきに・・・
ですかね・・・
では、
PMA ～ KEDAMA
Posted by Kedama at 08:54│Comments(2)
│ぶろぐいじる
この記事へのコメント
こんにちは～
う～む Lightbox あちこちで見てはいたんですけど
ちょっとやってみたいかも。
写真キレイですね～
バックのボケ具合も良いですね～
デジイチ、持ってはいるんですけどあまり使ってません（汗）
50mm F1.8 もあるんですけどねぇ。
キャノンの「まき餌」と名高い￥9,000円を切るレンズ（笑）
キャンプやスキーはいつもコンデジです、・・・。
デジイチ使わなきゃ（汗）
BOSE 良いなぁ～
う～む Lightbox あちこちで見てはいたんですけど
ちょっとやってみたいかも。
写真キレイですね～
バックのボケ具合も良いですね～
デジイチ、持ってはいるんですけどあまり使ってません（汗）
50mm F1.8 もあるんですけどねぇ。
キャノンの「まき餌」と名高い￥9,000円を切るレンズ（笑）
キャンプやスキーはいつもコンデジです、・・・。
デジイチ使わなきゃ（汗）
BOSE 良いなぁ～
Posted by ぶ〜パパ at 2010年11月22日 13:12
TO：ぶ～パパさん
どうもです。
Lightboxやってみますか～！ 設置は簡単でしたよ
この記事コピペですぐ出来ますよ～
キャノンの『まき餌』聞いたことあります。
食いついたら泥沼のレンズ沼・・・って（笑）
ぼくのは古いマニュアルレンズで3000円くらいです
ぼくもデジイチはあまり使いません・・・
iPhoneばっかりです・・・、むずかしくって・・・（笑）
BOSEはこのシリーズが好きでして・・・
パイプオルガンなどの管共鳴の原理で・・・
「ウェーブガイド・スピーカー・テクノロジー」ってやつ。
むかしは、AW-1～から全部持ってました・・・
もう処分しましたけど・・・（泣）
どうもです。
Lightboxやってみますか～！ 設置は簡単でしたよ
この記事コピペですぐ出来ますよ～
キャノンの『まき餌』聞いたことあります。
食いついたら泥沼のレンズ沼・・・って（笑）
ぼくのは古いマニュアルレンズで3000円くらいです
ぼくもデジイチはあまり使いません・・・
iPhoneばっかりです・・・、むずかしくって・・・（笑）
BOSEはこのシリーズが好きでして・・・
パイプオルガンなどの管共鳴の原理で・・・
「ウェーブガイド・スピーカー・テクノロジー」ってやつ。
むかしは、AW-1～から全部持ってました・・・
もう処分しましたけど・・・（泣）
Posted by Kedama
at 2010年11月22日 15:58
at 2010年11月22日 15:58※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
画像一覧 
