FC2にLightBox

FC2でLightBox使いたいって人用です。

lightbox.cssをエディタで開き

13行目付近のファイルアドレスを下の様に変更してください。
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:http://ファイルがあるアドレス/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://ファイルがあるアドレス/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://ファイルがあるアドレス/nextlabel.gif) right 15% no-repeat; }
次に、lightbox.jsのファイルをエディタで開いて
46行目付近にあるファイルアドレスを下記の様に変更します。
//  Configurationl
//
LightboxOptions = Object.extend({
    fileLoadingImage:        'http://ファイルがあるアドレス/loading.gif',
    fileBottomNavCloseImage: 'http://ファイルがあるアドレス/closelabel.gif',

FC2にログインし、ファイルアップロードを使って

lightbox.css
lightbox.js
prototype.js
scriptaculous.js
effects.js
loading.gif
nextlabel.gif
prevlabel.gif
builder.js
bullet.gif
close.gif
closelabel.gif
これらのファイル全てをアップします。
全てのファイルをアップし終えたら、テンプレートの設定を開きます。
HTMLの編集のところで<head></head>の部分を探し
<head></head>の適当な部分に下記を追加。
<!-- LightBox -->
<link rel="stylesheet" href="http://ファイルがあるアドレス/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ファイルがあるアドレス/prototype.js"></script>
<script type="text/javascript" src="http://ファイルがあるアドレス/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="ファイルがあるアドレス/lightbox.js"></script>
<!-- ここまで -->

これで設定は一応終わりです。

あとは通常通り日記を書くところで

画像をサムネイルで選択し表示させます。
通常でしたら
<a class="lightbox" href="http://画像のURL/ファイル名.jpg" target="_blank">
<img src="http://画像のURL/ファイル名s.jpg" alt="ファイル名.jpg" border="0" /></a>
と出てるはずです。
これを下記の様にtarget=”_blank”の部分をrel=”lightbox”と変更します。
title=”タイトル名”を付け足すことで画像にタイトルを表示させることが出来ます。
<a title="水槽" rel="lightbox" href="http://画像のURL/ファイル名.jpg">
<img border="0" alt="ファイル名.jpg" src="http://画像のURL/ファイル名s.jpg" /></a>

また、同じブログ内に画像を1枚以上セットするときに

全ての画像のリンクの部分の rel=”lightbox”の部分を
rel=”lightbox[タグ]”とすることで
画像を表示させたときにNEXTと出て、そのままスライド表示させることが可能です。

例)

1枚目の画像の rel=”lightbox[sakana]”
2枚目の画像の rel=”lightbox[sakana]”
3枚目の画像の rel=”lightbox[sakana]”
と言った感じです。名前は全て半角英数で指定します。

FC2にLightBox」への9件のフィードバック

  1. わざわざ僕のためにありがとうございます!!!

    むむむっっ!

    またまた手強そうですね(汗)
    頭がすっきりした状態の時に頑張ってみます!(^^;

    P.S

    もしかしてアドレス変更のメールは届いてないっすか?
  2. わもんさん
    おはよです。

    あっ

    そうだ、、メールで送れば良かったんだorz
    変更メール届いてますよ~!

    追加コメント!

    もし上記の中のアドレスで出来ないようでしたら

    http://blog-imgs-19-origin.fc2.com/i/s/o/isosaisyu/ のアドレスの
    -originを抜いて
    http://blog-imgs-19.fc2.com/i/s/o/isosaisyu/
    と、上で変更したCSSとjsの中のアドレスを変更して見てください。
    文字いっぱいですが、慣れれば簡単な作業ですんで
    頑張ってみてください!

    わからない部分があれば何なりと!

    判る範囲でお答えいたしますw
  3. うちはとりあえずhighslideでやってみました。
    動作は軽いけど、いちいちタグ入れるの面倒・・・(-_-;)
  4. つっちさん
    今見えてる部分のブログでは反映されてないんです?
    もしかしてログインしたとこの日記でやってるとか?

    んー・・

  5. あっ
    ちなみに
    wordpressのLightboxは
    タグとか必要ないですよ~
    写真を普通にUPするだけでOKですw
  6. つっちさん
    こんばんわ~

    おぉ~

    こうなるんですね~
    両方とも見れてます~
    そのタイプも中々いいですね~(*´ェ`*)

    メモ帳が面倒でBuilderに逃げた人間です(爆

    最近それが祟って痛い目見てますw
  7. 突然のご連絡申し訳ありません、Lightbox 2.04を導入しようと四苦八苦していたところこのブログ記事を見つけましてコメントさせて頂きました。
    導入してみたもののcloseの文字等が表示されません、画像は表示されるのですが…、ご助力頂けないでしょうか?
  8. ギリギリ廃人さん
    初めまして~
    んと、gifファイルとかは全部アップロードしました?
    でもってそのgifまでのパスをフルパスで
    lightbox.jsとlightbox.cssの中を変更しました?

    あと、FC2の場合ファイルアップロード先のアドレスが通常のアドレスと違うので、アドレスのミスと言うことも考えられるのですが

    すでにgifファイルがアップされてるのだとしたら
    一度それを日記なんかに表示させてみて
    アドレスを調べてみるといいと思います。
    http://blog-imgs-38.fc2.com/s/e/b/seburoc30a/ファイル名
    です。
    あぁでもjsがきちんと動いてるんだとしたらなんだろ・・
    cssとjsの中のアドレスさえきちんと変更されてて
    尚且つファイルもちゃんとアップされてるのだとしたら
    通常なら表示されるはずなんですが・・

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です