カレンダー

11 | 2016/12 | 01
- - - - 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 29 30 31

広告



最近の記事

カテゴリー

DATE: CATEGORY:TECH


lightbox2を使ってみた。

実行例:
view

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

1.lightbox2 ダウンロード


以下のサイトから、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 lightbox javascript Ajax

Comment

コメントの投稿

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


トラックバック


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



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