スポンサーサイト
--.--.--.-- Posted in スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Lightbox2導入メモ
Wed.11.06.2008 Posted in 便利な物
2 comments 0 trackbacks
自分が苦労したものは紹介しておかないと気がすまない性格です。コンチクショウ。

Lightbox2ってなんぞやー??
と思った方はページ全部読み込んだ後で下の画像をクリックしてみてください。

 
同じページ内で画像を表示できるので、間違ってブラウザを閉じてしまったり、戻るボタンを押さずに済むのでネット閲覧にはもってこいの品です。

以下FC2ブログにおけるLightbox2導入メモφ(・ω・`)

導入までの流れをつらつらと書いております。
・・・が、チャレンジは自己責任でお願いします(o_ _)o))
エラーが起きても保障できませんので、チャレンジする猛者はバックアップをとるなりテスト用にブログを作るなどしてやってみてください。

まずはこちらかはら本体をDL→Lightbox2

使うファイル
(cssとjsフォルダのファイル全て)
・lightbox.css
・builder.js
・effect.js
・lightbox.js
・prototype.js
・scriptaculous.js

(imagesフォルダの中の以下のファイル)
・close.gif
・closelabel.gif
・loading.gif
・nextlabel.gif
・prevlabel.gif

close.gifは使ってないので要らない気もします。ウヒ。


 
ピンクの部分が書き換え必須部分。
英語のつづりを間違えてたら脳内修正かけてください

①gifファイルをアップロード
次のステップで必要になりますので、.gifファイルのURLが直ぐに分かるようにしておきましょう。


②cssとjsファイルの修正
修正するのはlightbox.csslightbox.jsの2つのみ。
該当するファイルをワードパットかメモ帳でモリッと開き、必要部分を探して書き直して上書き保存します。

※lightbox.css
(二箇所。 prevlabel.gif と nextlabel.gif をhttpから始まる絶対パスに変える)

#prevLink:hover, #prevLink:visited:hover { background: url(http://blog-imgs-●●.fc2.com/▲/▲/▲/◆◆◆◆/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://blog-imgs-●●.fc2.com/▲/▲/▲/◆◆◆◆/nextlabel.gif) right 15% no-repeat; }



※lightbox.js
(二箇所。 loading.gif と closelabel.gif をhttpから始まる絶対パスへ変える)

// Configurationl
//
LightboxOptions = Object.extend({
    fileLoadingImage:       'http://blog-imgs-●●.fc2.com/▲/▲/▲/◆◆◆◆/loading.gif',
    fileBottomNavCloseImage: 'http://blog-imgs-●●.fc2.com/▲/▲/▲/◆◆◆◆/closelabel.gif',


③修正したのも含めてcss、jsファイル全てアップロード
次のステップで必要になりますので、アップしたファイルのURLが直ぐに分かるようにしておきましょう。


④以下をテンプレートの< /BODY >直前に記入
(css、jsファイル共にhttpから始まる絶対パスに変更)

!--■■■らいとぼっくす■■■-->
script type="text/javascript" src="http://blog-imgs-●●.fc2.com/▲/▲/▲/◆◆◆◆/prototype.js">/script>
script type="text/javascript" src="http://blog-imgs-●●.fc2.com/▲/▲/▲/◆◆◆◆/scriptaculous.js?load=effects,builder">/script>
script type="text/javascript" src="http://blog-imgs-●●.fc2.com/▲/▲/▲/◆◆◆◆/lightbox.js">/script>
link rel="stylesheet" href="http://blog-imgs-●●.fc2.com/▲/▲/▲/◆◆◆◆/lightbox.css" type="text/css" media="screen" />
!--■■■らいとぼっくす■■■-->

青で書かれた頭の < は半角にかえてください\(^o^)/
Lightbox2本体の説明ではHEAD中に記入とあるのですが、そこに記入するとIEブラウザではエラーが出てブログ自体が見れなくなってしまう場合があります。
</BODY>直前でも問題は無いので、エラーを避けたい方はBODY内に記入してみてください。

あとは記事中の画像リンクで
<a href="http://blogs-imgs-●●.fc2.com/▲/▲/▲/◆◆◆◆/.jpg" rel="lightbox">画像</a>

↑みたいな感じにrel="lightbox"を書き加えるとリンク先に指定した画像がみにょーんと表示されます。

ちなみにグループ化機能もあり。
<a href="http://blog-imgs-●●.fc2.com/▲/▲/▲/◆◆◆◆/1.jpg" rel="lightbox[グループ名]">画像1</a>
<a href="http://blog-imgs-●●.fc2.com/▲/▲/▲/◆◆◆◆/2.jpg" rel="lightbox[グループ名]">画像2</a>
<a href="http://blog-imgs-●●.fc2.com/▲/▲/▲/◆◆◆◆/3.jpg" rel="lightbox[グループ名]">画像3</a>

連続して表示したい画像に rel="lightbox[グループ名]"を記入。
同じグループ名(半角英数字)をつければ画像の左右にカーソルを合わせるとPREV、NEXTが出てきてグループ化した画像が順次見れます。


・参考記事 初心者でもできる簡単FC2ブログの作り方

導入の流れはこちらで見やすく説明してくださってます。
ただ、FC2ブログの仕様変更で file で画像指定できなくなってしまっているのでhttpから始まる絶対パスで設定しなければなりません。
あと参考サイトさまの方では手順3で background: transparent url(file/images/blank.gif) を書き換えてますが、今のLightboxのバージョンには blank.gif なんて画像ファイル入って無かったので無視しても大丈夫だと思われます。
あとあとIEでのエラーが出てしまう時はHEAD内ではなくBODY内の最後にスクリプトを記入しなければならない事にもご注意ください。

Theme: ホームページ・ブログ制作 « コンピュータ

« ( ´・ω・)=3 | Home | プライベートモードのテスト投下。 »

comments

アレ? カルツ君が知的に見える・・・
ん、そうか。これはブログペットが書いたんだな。

普段のカルツは仮の姿です。
これが本気モードなのです(`・ω・)bシャキーン

ブログペットとかねぇよ!こんちくしょあ!!

コメントの投稿


管理者にだけ表示を許可する

trackback


この記事にトラックバックする(FC2ブログユーザー)

topBack to TOP

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。