LIFE IS LIKE A GROCERY CART.

主に日記&旅行記。ごくたまにWindowsとMacとフリーウェアの話題とか，muzieのTranceカテゴリの紹介とか。

FC2ブログでLiteboxを使う & rel属性なしでLiteboxを起動

2007年 01月 20日 (土) 15:20

Liteboxを導入。Liteboxて何？という方は下のサムネイル画像をクリックしてみてください。映えるし動くし，たまりません。また，グループ化すれば連続で画像を閲覧できます。

ことの始まりは友人のサイトを訪ねたらこんなことなっていたために「よしオレも！」と思っただけなんですが，これをFC2ブログで使うにはちょこっとカスタマイズしないといけません。というわけで自分用メモも兼ねてFC2ブログ専用改造法を書いておきます。

こちらのサイトを参考にさせていただきました。
小粋空間 : Litebox 1.0 をブログに適用する
 drk7.jp : Lightbox Plus で画像を同一画面にオーバーレイして表示
ありがとうございます。

1. ダウンロード

さてまずは Liteboxのサイトで，litebox-1.0.zipをダウンロードして，解凍します。ちなみに解凍するとき「拡張子が二重」とか文句を言われるかもしれませんが大丈夫です。

2. 準備

FC2ブログではフォルダ構造を維持できないので，使うファイルだけどこか適当に litebox-fc2 などフォルダを作って移動してしまいましょう。使うファイルとは以下の9ファイルです。

js / litebox-1.0.js
js / moo.fx.js
js / prototype.lite.js
css / lightbox.css
images / blank.gif
images / closelabel.gif
images / loading.gif
images / nextlabel.gif
images / prevlabel.gif

さて，中身の書き換えが必要です。

3. スクリプトとCSSの修正・必須段階

以下の赤太字の通りに litebox-1.0.js と lightbox.css をそれぞれ書き換えます。

3.1 "litebox-1.0.js"の修正（20行～）

//
//	Configuration
//
var fileLoadingImage = "./file/loading.gif";
var fileBottomNavCloseImage = "./file/closelabel.gif";
var resizeSpeed = 6;  // controls the speed of the image resizing (1=slowest and 10=fastest)
var borderSize = 10;  //if you adjust the padding in the CSS, you will need to update this variable

3.2 "lightbox.css"の修正（45行～）

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(nextlabel.gif) right 15% no-repeat; }

4. スクリプトとCSSの修正・応用段階

さて，上記の改造でもう使うことは可能なのですが，実はこのスクリプトは <a> に rel="lightbox" と書かれていないと動作しません。今までの記事を全部編集し直すとかやってられませんので，画像ファイルへのリンクであれば Litebox が動作するように litebox-1.0.js を改造しましょう。改造する箇所は2か所です。

4.1 "litebox-1.0.js"の修正（126行～）

// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
    var anchor = anchors[i];

    var relAttribute = String(anchor.getAttribute('rel'));

    // use the string.match() method to catch 'lightbox' references in the rel attribute
    if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
      anchor.onclick = function () {myLightbox.start(this); return false;}
    }
}

ここを，以下のように書き換えます。

// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
    var anchor = anchors[i];

    //var relAttribute = String(anchor.getAttribute('rel'));

    // use the string.match() method to catch 'lightbox' references in the rel attribute
    if (anchor.getAttribute('href') && anchor.getAttribute('href').match(/jpg$|gif$|png$/)){
      anchor.onclick = function () {myLightbox.start(this); return false;}
    }
}

4.2 "litebox-1.0.js"の修正（264行～）

// loop through anchors, find other images in set, and add them to imageArray
for (var i=0; i<anchors.length; i++){
    var anchor = anchors[i];
    if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
      imageArray.push(new Array(anchor.getAttribute('href'),
      anchor.getAttribute('title')));
    }
}
imageArray.removeDuplicates();
while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}

を以下のように書き換えます。

// loop through anchors, find other images in set, and add them to imageArray
for (var i=0; i<anchors.length; i++){
    var anchor = anchors[i];
    if (anchor.getAttribute('href') && anchor.getAttribute('href').match(/jpg$|gif$|png$/)){
      imageArray.push(new Array(anchor.getAttribute('href'),
      anchor.getAttribute('title')));
    }
}
imageArray.removeDuplicates();
while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}

これでjpeg，gif，pngファイルへのリンクは Litebox で開かれるようになります。ちなみにかなりやっつけ仕事なので不具合があるかもしれません。ご自分の責任でどうぞ。（そもそもjavascriptの知識といえば関数？メソッド？プロパティ？プロシージャってなんだっけ？みたいな感じですので…）

では，FC2ブログにログインして，ファイルをアップしましょう。

5. ファイルのアップロード

「ファイルアップロード」で，上記9ファイル

js / litebox-1.0.js
js / moo.fx.js
js / prototype.lite.js
css / lightbox.css
images / blank.gif
images / closelabel.gif
images / loading.gif
images / nextlabel.gif
images / prevlabel.gif

をすべてアップロードします。

6. テンプレートの修正

最後に，「テンプレートの設定」で，現在使用中のテンプレートを修正します。言わずもがなですが，バックアップ取っておくと吉かと。

まず，「HTMLの編集」にて，<head> ～ </head>間に以下の行を追加します。

<link rel="stylesheet" href="<%url>file/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<%url>file/prototype.lite.js"></script>
<script type="text/javascript" src="<%url>file/moo.fx.js"></script>
<script type="text/javascript" src="<%url>file/litebox-1.0.js"></script>

次に，<body>にonload要素を追加します。たとえばこんな感じです。

<body onload="initLightbox()">

テンプレートによってはすでに<body>タグに色々書いてあるかもしれませんが，> の直前に onload="initLightbox()"を入れればOKです。

できあがったら忘れずに「更新」ボタンを押してください。

お疲れさまでした，以上で作業完了です。私もよくわかってないので申し訳ないですが環境によってはうまくいかなかったりするかもしれません。後はくれぐれもタイプミスにはお気をつけください。コピペ推奨です。

1月24日追記：いくつか内容にミスがありましたので修正しました。申し訳ありませんでした。

FC2 BLOG | コメント(14) | トラックバック(2) | ▲

使わせていただいたところ・・

こんにちわ。rel属性要らないということで、これは便利だと導入してみましたが、どういうわけか一頁内にある画像が勝手にグループ化されて表示されてしまいました（グループ化していないにもかかわらず）。

他はばっちりなのに残念です。

ピノコ # kLCZl7R6 | 2007.05.26(土) 15:25 | [書き直し]

こんにちは。
そうですね。relを不要とするために，上記コードはrelを無視してリンク先の拡張子だけチェックするようにしています。つまり，乱暴に言えば，

relの内容が何であろうが，hrefの内容が "～.jpg" だったらliteboxで開く

という仕組みなわけです。このために，意図してグループ化することもできないし，全て同じグループとして解釈される，と不具合が出るようです。やっつけ仕事ですいません。

Naoki # 7d4KZ4JA | 2007.05.26(土) 16:02 | [書き直し]

(no title)

FC2への導入をあれこれ数時間試してましたが、ここを見たら3分で済みました(笑)
本当に感謝しています。
ありがとうございました。

you # - | 2007.07.07(土) 10:34 | [書き直し]

Re: (no title)

そう言っていただけると書いた甲斐がありました。
こちらこそご利用ありがとうございます。

Naoki # 7d4KZ4JA | 2007.07.08(日) 16:26 | [書き直し]

Nice site

Hello, Your site is great. Regards, Valintino Guxxi

Valintino # - | 2007.07.20(金) 03:19 | [書き直し]

Yes, in the good old U.S.A.

I'm back in the U.S.S.R Rae Halvdan.

Rae Halvdan # - | 2007.08.14(火) 08:50 | [書き直し]

I don.t believe it makes me real

when you say it's ove. Huda Swithun.

Huda Swithun # - | 2007.10.22(月) 05:19 | [書き直し]

m.. emm v3

hey.. why this page opening so slow?

Facydima # 9P4/cz86 | 2007.12.11(火) 04:05 | [書き直し]

thank you

nice work, brother

Jillygj # ahPPOTYE | 2008.03.19(水) 15:55 | [書き直し]

Online viagra prescription

Hello. I would like to present you my testimonial about online pills buying. Yes It's real!

My Viagra + Cialis order arrived within two weeks in perfect condition. The pills are phenomenal! I only use half of a pill at a time, and sometimes the effect is still noticeable the next morning! I've even tried a third of a pill once (I didn't split it very well) and I still felt the desired effect.

You can buy it here:
<a href=http://bestsdrugs.info/go.html>Canadian-Drug-Shop.com</a>
<a href=http://bestsdrugs.info/go.html><img>http://img122.imageshack.us/img122/743/1pictw2.gif</img></a>
1.Viagra Professional is a new generation extra-strength prescription medicine that is taken orally for the treatment of erectile dysfunction only in men, powerfully activating the natural blood flow, followed by hardness and expansion of your sexually...
2.Cialis Professional is a newly formulated and chemically improved prescription medicine that is taken orally for the treatment of erectile dysfunction only in men, extremely enhancing male sexual activity that is resulted in boosted penile potency, m...

and of course you can buy:
<a href=http://bestsdrugs.info/go.html>Canadian-Drug-Shop.com</a>
<a href=http://bestsdrugs.info/go.html><img>http://img169.imageshack.us/img169/4496/2picug0.gif</img></a>
3.Viagra Soft Tabs (Sildenafil) are quick-dissolving lozenges, used to treat male impotence. Proving its high quality and reliability, Viagra Soft has reduced the start time from 30 to 15 minutes with the same response time of 5 hours.
4.Cialis Soft Tabs (Tadalafil) are quick-dissolving tabs, used to treat male impotence. Having the shortest start time of 15 minutes, Cialis Soft remains its most long-lasting effects of 36 hours among all the world-known ED products. The neutral react...

Have a nice day and look at viagra slogans:
The top 10 were:
10. Viagra, Whaazzzz up!
9. Viagra, The quicker pecker picker upper.
8. Viagra, Like a rock!
7. Viagra, When it absolutely, positively has to be there overnight.
6. Viagra, Be all that you can be.
5. Viagra, Reach out and touch someone.
4. Viagra, Strong enough for a man, but made for a woman.
3. Viagra, Home of the whopper!
2. Viagra, We bring good things to Life!
And the unanimous number one slogan:
1. Viagra, This is your peepee, this is your peepee on drugs.
Very nice. I think so ;)

TAGS:
uk viagra kamagra
medicare coverage of viagra
cheap drug retin viagra wellbutrin
natural viagra
edinburgh viagra mmr find search
cheapest viagra prices us licensed pharmacies
viagra sideffects
pics of generic viagra
cheap discount pill sale viagra viagra
viagra 6 free samples
generic viagra pill
penegra generic viagra silagra penegra cumwithuscom
uk generic viagra
free viagra alternative
expiration date viagra
cheap viagra kamagra
best buy buying online viagra viagra
is the viagra cpinic for real
viagra lawyers
viagra overnight
viagra uk suppliers
erect penis for sexual low viagra
prescription viagra without
1cialis levitra sales viagra
secondary pulmonary hypertension viagra
buy side viagra xanax
bio viagra
viagra tips
viagra compare price
buy viagra online without prescription
viagar levitra alternatives
viagra max dose
womem use viagra
viagra poems
female viagra review
discount viagra pills
rx viagra
cialis viagra board
order viagra online no rx prescription
which works better cialis or viagra

Pn-viagra # I.qVA1bU | 2008.03.19(水) 18:12 | [書き直し]

刳瑾瑩琺ⅱ辮轢鱶碵痳髀諤鴉

廷瘰鈬碚繻� 體鴈�! �萵繿鰲龠碌纒闔驟鱶鱚諷� 騾蜥� n2.blog6.fc2.com.
� 瘤譛�� 譫瘉鱚諷� 琺ⅱ辮轢鱶碼. 寰� 鞐髑袱艢鴾 � 騾蜥�, 痳� 褌鴈韲竡 � 肆鴾辣跪笂 <a href=http://www.stagedown.com>stagedown.com - electronic, lyrics, Hole, 礦粤鉅謌陋琺ⅱ辮轢鱶硴﨣竦齒� � 纖� 跋釿� �竡</a>
呀� 闔髓�迯蠇釶邇硅纃�, 瘤譛�� 驪� 邇碼� � 鞐韆鱚鴉﨣琺驎鉤鈞轢譫瘤� 礪齣.
� 黷萵諷辷繻 �� 鞐髑袱艢鴾, � 鴈�, 轢鈔邇� 蒟踈茆袱譛逶� 鞳髏骼� 關鉞芬�� 鋏纃� 瘤譛�� 釶邇硅纃�.
羅鰰� 籥邇珞跏辷髓鞐�� 驗繼琺� 蓁鱚竦瑶蕈碌纒驟鞨蔡鈞, 褌鴈顋� � 辷� 闔�礦謌髴 - �� 鉈諤蜊礦粤�, 鴈韶纃�-鴃�辮, 邇碼� �頌�, � 粳� 鱚�, 褞� 鴈譛褌驫瑾萵瑩� - 邇碼� 鞳謌茆 � 關�踵跏髑誾袱跏轢邇碆� 關鈬褞� <a href=http://www.p1ay.us>p1ay.us - ambient,idm, limp bizkit, Rock, 驫瑾瑩� 礦粤鉅謌陋</a>, 鰰� �� stagedown.com �硅�纈� 鱚閻顫 �珮赭邇� 癈齏鉋瑜鴦奛� 跂粫� 蓐閻韆�.

dmitrysmrnov # 7eBE5Mz6 | 2008.03.26(水) 15:23 | [書き直し]

rhcfamv fysv

erwqghfx clbfxuknq wbgno fslycajnt dfpagk fwqixjsk wkeg

isay tkqamxs # - | 2008.05.02(金) 09:29 | [書き直し]

dtwzbok zyumb

ywpblkexg akonfczri doxnpfv rmwxgisy mkfjtdh wztsvmq todqrkyji <A href="http://www.tayefu.wmleoyz.com">aupemdotl enabkvtg</A>

nguizxy xtor # - | 2008.05.02(金) 09:32 | [書き直し]

Toyota dealer

Hi!!!This Dancing with the Cars features race-prepared Scion tCs that will compete in the 2008 Toyota Grand Prix of Long Beach Toyota Pro/Celebrity Race. The cars, seen here during a practice session at Willow Springs Raceway in the California desert, will hurtle around the famous and challenging Toyota Grand Prix of Long Beach race course April 19, driven by a volatile mix of 18 celebrities and professional racing drivers.
<a href="http://toyota-inform.741.com/toyota-center.html">toyota center</a> You might think that mixing these two categories of drivers in a 10-lap sprint around the 1.97-mile TGPLB circuit is a bit like trying to mix oil and water. Its not. It痴 a whole lot more like mixing fuel and spark. And the result is likely to be an explosion of action and fun.
Good bay!!! :)

toyotas # gEXqK3CY | 2008.05.06(火) 17:36 | [書き直し]

コメント投稿

トラックバック

このエントリへのトラックバックはこちら
http://n2.blog6.fc2.com/tb.php/150-6e271d89

Litebox1.0導入しました。

NaokiさんのLIFE IS LIKE A GROCERY CART.の FC2ブログでLiteboxを使う & rel属性なしでLiteboxを起動http://n2.blog6.fc2.com/blog-entry-150.htmlを参考にLiteboxを導入してみました。なんだそれと思った方は適当な

2007.01.31(水) 18:03 ぬるオタのチラシの裏

色々・・・。

今日は暖かく春の陽気でちょっと暑かった位の陽気で春なんだなぁ～と思いながらまったりと過ごしていました。今年は桜が咲くの早そうですね～。てことで昨日紹介しようとしていたサイトを備忘録として紹介したいと思

2007.03.04(日) 22:25 日々適当なBLOG!!

プロフィール

Author : Naoki
名古屋在住大学生。
現在稼働中のマシンは3台 : 自作DOS/V (Win2000)，MacBook Black (MacOS X Tiger)，Mac mini (MacOS X Panther)。
CASIO EXILIM EX-Z600を愛用中。

長編記事

最近のトラックバック

月別アーカイブ

友達申請フォーム

この人と友達になる

ブログ内検索

RSS

FC2カウンター

ホームページアフィリエイトレンタルサーバー FC2ブログ FC2ID