Lightboxを追加してみたでござるの巻

28Apr

[PR]

Posted by in

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

21Dec

▲こんな画像クリックすると
背景黒くなってびろーんと伸びるこんなの。

なんか未来的でかっこいい表示するブログを見つけまして
どうするんだとソースを見てみたら「Lightbox」なんてものを知りまして。

いろいろ調べてみるとこのLightbox、作者が様々のようです。

そこで「Lightbox2」を導入してみた！

備忘録もかねて忍者ブログでやるための導入方法も書いてみます('ω')ゝ

まずダウンロードしたら圧縮フォルダなので解凍。
すると中身が

css
images
js
index.html

となっているので

まず「images」フォルダの中身を「image-1.jpg」、「thumb-1.jpg」以外全てブログ設定のファイルアップロードにあげときます。
次に「js」フォルダの中の「Lightbox.js」をメモ帳かなんかで開いて
こういう行を赤字で書き換えます

Configurationl
//
LightboxOptions = Object.extend({
    fileLoadingImage:        'http://file.（自分のブログのURL《http://を消して貼る》）/loading.gif',
    fileBottomNavCloseImage: 'http://file.（自分のブログのURL《http://を消して貼る》）/closelabel.gif',

    overlayOpacity: 0.8,
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
<a href="#" id="loadingLink">
        //                      <img src="http://file.（自分のブログのURL《http://を消して貼る》）/loading.gif">
        //                  </a>
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
<a href="#" id="bottomNavClose">
        //                      <img src="http://file.（自分のブログのURL《http://を消して貼る》）/close.gif">
        //                  </a>

これで「Lightbox.js」の編集は終わり。
あとは「js」フォルダの中身の「.js」ついてるのをぜんぶブログ設定のアップロードにあげときます。
もひとつ「css」フォルダの「lightbox.css」をアップロード。

次にブログ設定の「テンプレート設定/編集」で
<head>と</head>の間にﾃｷﾄｰに改行して

<link rel="stylesheet" href="http://file.（自分のブログのURL《http://を消して貼る》）/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://file.（自分のブログのURL《http://を消して貼る》）/prototype.js">
</script>
<script type="text/javascript" src="http://file.（自分のブログのURL《http://を消して貼る》）/scriptaculous.js?load=effects,builder">
</script>
<script type="text/javascript" src="http://file.（自分のブログのURL《http://を消して貼る》）/lightbox.js"></script>

この赤字全部を追記。

これで設定は終わり。
あとは記事を書くときに画像をはっつけるんですが
あらかた書いたあと「簡素版のエディタ」で

<a href="画像のアドレス" rel="lightbox" target="_blank">

という風にrel="lightbox"を追記するだけでこーなります。