最近の記事

カレンダー

01 | 2010/02 | 03
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 - - - - - -

広告



カテゴリー

スポンサードサイト


このエントリーを含むはてなブックマーク はてなブックマーク - lightbox2を使ってみた。 livedoorクリップ DATE: CATEGORY:TECH


lightbox2を使ってみた。

実行例:
view

せっかくなので、FC2ブログへの導入方法だけメモっときます。

1.ダウンロード
以下のサイトから、lightbox2をダウンロード。

lightbox2


2.ファイルの修正箇所検索。
ダウンロードしたアーカイブ内には、cssとimageとjsファイルが
入ってるんですが、その内のcssとjsファイル内で画像のURLを
指定している箇所があるので、そこを修正する必要があります。

具体的には以下の箇所。・・・だけだったと思う(^^;
# とりあえず、ファイルを開いて「images」で検索してみて、
# あたれば修正を疑う。。。って感じでいいかもw

lightbox.js

LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',


lightbox.css

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }



3.修正。
FC2ブログで画像をアップロードした場合のURLはほぼ固定なので、
調べて、絶対パスに置き換えてしまう。
例えば、こんな感じ。

'images/loading.gif' → 'http://***/***/loading.gif'

実際のURLは画像をアップロードしてみて、そのURLを確認すればOK。

3.アップロード
FC2の画像アップロードの機能を利用して、
css, images, jsファイルをアップロードする。

4.テンプレートに以下の内容を追記。
「テンプレートの設定」画面の中で、とタグの間に以下を追記。

<script type="text/javascript" src="http://****/****/prototype.js"></script>
<script type="text/javascript" src="http://****/****/effects.js"></script>
<script type="text/javascript" src="http://****/****/builder.js"></script>
<script type="text/javascript" src="http://****/****/lightbox.js"></script>
<link rel="stylesheet" href="http://****/****/lightbox.css" type="text/css" media="screen" />



※補足
lightbox2のホームページにはこんな感じで記載してあるんですが、
エラーになって動きませんでした。
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
調べると記載がおかしいとのこと。
(参考URL)
Lightbox2のエラー

とりあえず、設定はこれにて完了。

5.実際に使ってみる。
FC2ブログで「サムネイルで記事を書く」で画像を貼り付けてみるとこんな感じになる。
(上の実行例の場合)

<a href="http://blog-imgs-21.fc2.com/b/a/b/babyp/20080804234233.jpg" target="_blank"><img src="http://blog-imgs-21.fc2.com/b/a/b/babyp/20080804234233s.jpg" alt="view" border="0" /></a>


これを以下のように修正するだけ。

<a href="http://blog-imgs-21.fc2.com/b/a/b/babyp/20080804234233.jpg" rel="lightbox" target="_blank"><img src="http://blog-imgs-21.fc2.com/b/a/b/babyp/20080804234233s.jpg" alt="view" border="0" /></a>


具体的には、<a>タグのパラメータに「rel="lightbox"」を追加するだけ。

携帯から記事を書いた時に、勝手にaタグにlightboxを書く方法がほしいなぁ。。。
まぁ、そんなに更新せんけども(^^;

ではでは。


カテゴリ[TECH]の最新記事一覧

タグ : TECH lightbox javascript Ajax

Comment

コメントの投稿

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


トラックバック


この記事にトラックバックする



copyright © なんとなしの日記 all rights reserved.
内職☆在宅ワークの最強は?アフィリエイト!. 初心者だってカッコ良いホームページ作るぅ!
FC2ブログPowered by FC2ブログ