![[Mac＆Lovers]:Planting Field 2nd blog](https://mac.planting-field.com/wp-content/uploads/2020/02/PFブログタイトルセンター2nd用.png)
ネット巷で流行ってるlightbox js V2.0を導入してみました。
こんな感じになる。
v2.0の方がやっぱり格好いいね。
では、忘れないように導入メモを残しておこう。
１、lightbox js V2.0より、必要な構成ファイルをダウンロードする。
２，ダウンロードしたファイルの中にあるlightbox.jsとlightbox.cssのファイル部分を記しているパスを自分のサーバーに会わせて書き換える。FC2ブログの場合はimagesフォルダが無いのでfileフォルダーになります。相対パスだと間違いやすいので私は絶対パスで書き直しました。
書き直しの例としては私の使ってるfileですがこんな感じ
http://blog2.fc2.com/q/qozy/file/lightbox.js
http://blog2.fc2.com/q/qozy/file/lightbox.css
３，FC2のファイルアップロード機能を使いダウンロードしたファイルをアップロードします。（不要なhtmlファイルやサンプル画像は得に不要ですのでアップする必要はありません）
４，テンプレートの<head></head>内にjsとcssのリンクを記述する。こんなかんじ
<link rel="stylesheet" href="http://qozy.blog2.fc2.com/file/lightbox.css" type="text/css" />
<script type="text/javascript" src="http://blog2.fc2.com/q/qozy/file/prototype.js"></script>
<script type="text/javascript" src="http://blog2.fc2.com/q/qozy/file/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://blog2.fc2.com/q/qozy/file/lightbox.js"></script>
これで、設置は完了。
５，画像リンクを作るときにrel=”lightbox”を挿入する。こんな感じ
<a href="http://■■" target="_blank" rel="lightbox"><img src="http://" border="0"></a>
毎回のリンクにrel=”lightbox”を入れるのがめんどくさい方はLightbox v1.0を利用し、こっちの記事に記したような方法でrel=”lightbox”を入力しないでも使えるようにしてみてください。「Movable Type」を利用してブログを運営されている方は小粋空間さんの「Lightbox JS の rel 属性を自動付与する」に記してある他の方法でやればv2.0でも使えると思います、ここのブログのようなFC2やそれ以外のブログサービスの場合のrel=”lightbox”自動挿入or無効化のやり方は私には解りませんでした。
2006.5/29追記
rel=”lightbox”を入れるのがめんどくさい方用の修正方法を公開してくださっている方がいらっしゃいましたので紹介します。
blog@slightlyblueさんの「rel tag無しでLightbox JS v2.02」です。
この方法によりrel=”lightbox”を入れない状態でもjpg、png、gif拡張子の画像リンクファイルは無条件でlightboxが起動します。さらに通常通りrel=”lightbox[0123]”等とidを入力した画像分はちゃんとグループ化処理されます。
これはとってもありがたいので早速導入してみました。
コメント
SECRET: 0
PASS: c1c7706aea0ceab5cbb0bdbdb91bb985
ここで、まとめてコメントしちゃいます。
テンプレ、よりハードな感じかな？
折りたたみもスルッと出てきますね。
あ、マカーでIEなんて使う人いないと思うから大丈夫でしょう。
lightbox js V2.0はかっこいいね♪
僕もやってみたいけど 最近タイトルバック替えただけで 降参です。
あと、気になったんですが…Firefox1.0.7でqozy/unchinさんの「FC2Amazon正式対応」のエントリー見てみましたら 動くやつが右から左に流れて来るけど、左で止まりません。ぐるぐる回ってます。速度も速いし…何故でしょう？？
僕はSafariメインなのでいいですが、Fireの人はクリックできないですね。(^_^;)
一応報告まで。。
SECRET: 0
PASS: 81420c81298b9fed99bd50177debc67f
SenJ4さん
コメントどうもです〜！
テンプレ作りましたよ。ま、いつも通りの３カラムタイプですけどね、
Lightboxの構造さえ解っちゃえば意外と簡単ですよ導入は！
確かにAmazon記事のスクロールする奴Firefoxだと左を抜けて行っちゃいますね、私も確認してたんですけど、なんでしょうかね、
最近Macネタがあんまり無いのでブログカスタマイズに記事書く労力を使ってみました。
SECRET: 0
PASS: 74be16979710d4c4e7c6647856088456
gozyさん はじめまして。
lightbox js V2.0について質問させてください。
同じくfc2ブログを利用しています。
lightbox.jsとlightbox.cssの書き直しはできました。
prototype.jsはどこを書き直しているのでしょうか？
自分では見つけられなくて（スミマセン）
それとscriptaculous.jsも書き直しが必要ですか？
教えていただけると助かります。
お願いします＾＾
lightbox js V2.0
こないだ見かけたlightbox js V2.0とやらを導入。 クリックしてみる…