Home > [カスタマイズ]画像スライドショー > LightBoxをいれてみました

LightBoxをいれてみました

画像のポップアップをクールに表示します。

▼サンプル


*画像はゆんフリー写真素材集から使用させていただきました。
*忍者ブログだけに手裏剣をチョイス(ぇ

▼本家?
Lightbox JS
Lightbox JS v2.0
Litebox- Same great taste, less calories

▼参考記事
小粋空間: Litebox 1.0 をブログに適用する

ほぼ小粋空間さんの記事でいけます。

[2006/10/18 追記]
・・・が、念のため忍者ブログでスムーズに導入できるように記載しておきます。

アーカイブのダウンロード

以下のサイトの Download から litebox-1.0.zip をダウンロードします。
Litebox- Same great taste, less calories

解凍したファイルの中から以下の9ファイルを使用します。
litebox-1.0/css/lightbox.css
litebox-1.0/images/blank.gif
litebox-1.0/images/closelabel.gif
litebox-1.0/images/loading.gif
litebox-1.0/images/nextlabel.gif
litebox-1.0/images/prevlabel.gif
litebox-1.0/js/litebox-1.0.js
litebox-1.0/js/moo.fx.js
litebox-1.0/js/prototype.lite.js


lightbox.css の修正

lightbox.cssの画像の指定箇所
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/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(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

を以下に変更します。
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(http://file.******.blog.shinobi.jp/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(http://file.******.blog.shinobi.jp/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://file.******.blog.shinobi.jp/nextlabel.gif) right 15% no-repeat; }

赤文字の******はご自分のブログのものを記述します。

litebox-1.0.js の修正

//
// Configuration
//
var fileLoadingImage = "http://file.******.blog.shinobi.jp/loading.gif";
var fileBottomNavCloseImage = "http://file.******.blog.shinobi.jp/closelabel.gif";

赤文字はこちらも同様。

ファイルのアップロード

小粋空間: Litebox 1.0 をブログに適用するでは、ディレクトリを作成してアップロードしていますが、忍者ブログはディレクトリを作成できません。

なので、ここは通常通り以下のファイルをアップします。
lightbox.css
blank.gif
closelabel.gif
loading.gif
nextlabel.gif
prevlabel.gif
litebox-1.0.js
moo.fx.js
prototype.lite.js


テンプレートの編集

HTMLテンプレートの<head>~</head>内に以下を追記します。
<link rel="stylesheet" href="http://file.******.blog.shinobi.jp/lightbox.css" type="text/css" media="screen" />
   ・
   ・
  (略)
   ・
   ・
<script type="text/javascript" src="http://file.******.blog.shinobi.jp/prototype.lite.js"></script>
<script type="text/javascript" src="http://file.******.blog.shinobi.jp/moo.fx.js"></script>
<script type="text/javascript" src="http://file.******.blog.shinobi.jp/litebox-1.0.js"></script>


次に <body> に onload を追加します。
<body onload="initLightbox()">

もし、既に他のスクリプトで onload を指定している場合は、セミコロン( ; )の後に追記します。
<body onload="他のスクリプトのonload指定();initLightbox()">

セミコロン( ; )がなければ自分で追記して、その後ろに initLightbox() を記述します。

タグの書き方

例えばこのブログの場合、
管理画面 > ファイルマネージャ より、この記事の手裏剣の画像のところで『記事を書く』をクリックすると
<a href="http://file.shinobibloglab.blog.shinobi.jp/20060920_01.jpg" target="_blank"><img src="http://file.shinobibloglab.blog.shinobi.jp/Img/1158721365/" border="0" alt="" /></a>

が表示されますが、これを以下に変更します。
<a href="http://file.shinobibloglab.blog.shinobi.jp/20060920_01.jpg" rel="lightbox"><img src="http://file.shinobibloglab.blog.shinobi.jp/Img/1158721365/" border="0" alt="" /></a>


ひとつの記事に複数の画像を掲載する場合は、例えば記事番号を付加してやることで lightbox で表示したまま画像のスライド表示ができます。
例)この記事の場合記事番号は 44 なので、画像のタグの部分全てに rel="lightbox[44]" を記述。

それと title をつけることによって画像の下にタイトルが表示されます。

▼サンプル
下記のように記述した場合、
<a href="http://file.shinobibloglab.blog.shinobi.jp/20060920_01test.jpg" rel="lightbox[44]" title="1枚目の画像"><img src="http://file.shinobibloglab.blog.shinobi.jp/Img/1161159734/" border="0" alt="" /></a>
<a href="http://file.shinobibloglab.blog.shinobi.jp/20060920_02test.jpg" rel="lightbox[44]" title="2枚目の画像"><img src="http://file.shinobibloglab.blog.shinobi.jp/Img/1161159749/" border="0" alt="" /></a>


↓こうなります。
続きの画像がある場合、表示された画像の右側にマウスオーバーすると NEXT が表示されクリックすると次の画像へ。
前の画像がある場合、表示された画像の左側にマウスオーバーすると PREV が表示されクリックすると前の画像へ。




ブログパーツ等の Flash を PNG 背景画像の下に隠す

※BlogPetやmeromero parkなどについては下に隠れません。
以下の記事の対応が必要になります。

▼参考
小粋空間: Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す

BlogPetのみの対応でよさそうです。
meromero parkは貼り付けるコードの中で下に隠れるように既になっています。
(2006/10/18現在)

Comments:17


Xandlla URL 2009-10-05 (月) 13:59

お忙しいところ、早速対応していただきありがとうございます。
scriptaculous.jsの部分を試してみたら、できました!
表示位置がズレるのは、そもそも私が組んでいるテンプレのせいだと思います。
というのも、以前相談させて頂いたリンク先サムネイルでも似たような症状が出ていたので・・・
これを機に、新しいのを組もうかな~と考えております。

FF11をプレイしていたことがおありだったのですね!なんだか勝手に親近感が湧いてきてしまいましたw
ありがとうございました。

stubborn_brain 2009-10-07 (水) 00:01

できたようでなによりです:-)

フフフ

Xandlla URL 2009-10-04 (日) 18:10

こんにちは。
ブログにLightboxを導入しようと調べていてたどり着きました。
以前にもリンク先サムネイルの件でお世話になりました(覚えてはいらっしゃらないとは思いますが^^;)その節はありがとうございました。大変参考になりました。

ニンブラボ様のこちらの記事や、や小粋空間様で紹介されているのはLightbox1のようなので、いくつかjsファイル等が最新版の2.04と違っていたので
skullbox:notebook様のこの記事(http://skullbox.under.jp/note/e101.html)も参考にしました

一応CSS、lightbox.jsを書き換え、htmlにも追記までできたと思うのですが、どうもうまくいきません。
IEだとエラーと出るし、Firefoxだとそもそも無反応で泣きたくなってきます・・・

お忙しいとは思いますが、手がかりだけでも教えていただけたら嬉しいです。よろしくお願いします。

stubborn_brain 2009-10-05 (月) 10:14

Xandllaさん、こんにちはー。
私は途中で一度引退しながらFenrirサーバでFF11をやってました!2006年に完全に引退しちゃいましたけど。
やー、なつかしい:-)

リンク先サムネイルの件はコメントを見直して思い出しました;-p

で、lightboxの件ですが、
v2.04のサンプルページに設置方法が記載されていましたが、
http://www.huddletogether.com/projects/lightbox2/#example

scriptaculous.jsのところの記述が違っているのでは?

<script type="text/javascript" src="http://file.xandlla.blog.shinobi.jp/scriptaculous.js?load=effects,builder"></script>

↑赤文字部分を追加しました。

これだとFirefoxでは正常に表示されました。
IE8も動作はするものの表示位置がおかしいような気がしますが…ちょっとそこまでの対応は調べきれておりません。すいません。
お試しください。

murmur URL 2008-04-28 (月) 14:29

早速のご指示をありがとうございました。感激! 見直したつもりでも・・・、こんなことでお手を煩わしてしまって申し訳ない気持ちです。まだ、ブログ等初心者でつまずきながらのこれからになりそうですが、このことを忘れずに、いいページ作りに励みます。

stubborn_brain 2008-04-28 (月) 15:55

いえいえ、できたようでなによりです:-)
自分で書いたものを自分で確認するときってそういうものです;-p
『こんなところは間違えてないだろう』みたいな感じでチェックが甘くなって、スクリプトや設定やらをすごくじっくりチェックしちゃう…みたいな(笑)
私もそうですもんorz

なので、どう見ても/何回見ても自分ではどこがおかしいかわからない!って場合は誰か他の人に見てもらうのが一番よかったりします;-p

murmur URL 2008-04-28 (月) 00:29

はじめまして。現在ブログ作成に奮闘中のmurmurと申します。liteboxを使いたくて、小粋空間様他いろいろなページを巡り、こちらにたどり着きました。内容がとても分かりやすくすぐに試みてみましたが、画像はクリックで大きくなるものの通常パターンです。何度も見直してミス等は修正したつもりですが解決できずに、行き詰っています。また、これは関係ないかもしれませんが、ページは正常に表示されるものの下のバーに「ページでエラーが発生・・」と出ます。お忙しいとは思いますが、お手すきの時にでも解決方法をご指導いただけませんでしょうか。よろしくお願いします。

stubborn_brain 2008-04-28 (月) 10:35

はじめまして。
ブログを拝見致しました。

prototype.lite.js をリンクしているところですが、『protoptype.lite.js』と、余計な p が入っています。
この記述ミスが原因で動作していないようです。
この余計な p を削除すると動作しますよ:-)

あと、画像をリンクするところで、target="_blank" と rel="lightbox" の両方を書いていて、このままでも動作するんですが、私的には target="_blank" は削除してもいいんじゃないかな~と思います。
rel="lightbox" を書いておけば動作しますので。

以上、お試しください。

更紗 URL 2007-08-16 (木) 09:36

自分ではまったくうまくいかず、どこを編集してよいものか、さまよっていたら、ニンブロラボさんの記事をみつけました!

すっごくわかりやすい説明書きだったので、自分のブログでも、実装できるようになりました!!

本当にありがとうございます。
これからも、ニンブロラボさんのブログ愛読します♪

stubborn_brain 2007-08-16 (木) 11:25

お役に立てたようでなによりです:))
「忍者ブログ用」に書いている記事ですが、他のブログサービスでも読み替えていただければなんとか使えますかね~;-p

zoe URL 2007-05-12 (土) 17:15

ほんとうにありがとうございました。
違うバージョンを読み込んでいました。
これで今日はぐっすり眠れそうです。
ありがとうございました!

stubborn_brain 2007-05-13 (日) 12:53

できたようでなによりです:)
お役に立てたようで私もうれしいです:D

zoe URL 2007-05-12 (土) 15:47

いつも参考にさせていただいております。
lightboxを導入しようとニンブロ様のサイトに記載されている方法で試してみましたが画像をクリックすると普通に拡大画像が表示されます。
かっこよく表示されません。
あとオブジェクトを指定してくださいというエラーもでます。
記述も見直しいろいろなサイトを巡ってみたのですが解決できませんでした。
どこかおかしな所がありましたらお暇な時で結構ですのでアドバイスお願いいたします。

画像はタイトルがdの記事の画像で試しています。よろしくお願いいたします。

stubborn_brain 2007-05-12 (土) 17:09

こんにちは。
拝見させていただきました。

イメージファイルはアップロードしているようですが、スクリプトファイルがアップされていません。
prototype.lite.js
moo.fx.js
litebox-1.0.js

スクリプトファイルがないと動きませんので・・・。

あと、cssファイルも<head>~</head>内で記載されていません。;
lightbox.css
#ファイルはアップされているようです。

ご確認ください。

URL 2007-01-04 (木) 17:33

早々のご教授誠にありがとうございます。
スクリプトをいじるのは自信が無かったのでHTML及びCSSを変更しました(不恰好な変更ですが^^;)。おかげさまでわたしの環境では無事全面表示されるようになりました。

stubborn_brainさんの「自分でやろうとしてますか?」に非常に感銘を受けたので自己解決を目指し様々なブログさんを巡って熟読したつもりでいましたが、解決法が出ていたんですね。探求力がまだまだ足りないことを痛感しました。お手を煩わせてしまい申し訳ありません。お導きありがとうございました。

これからもニンブロラボさんをわたしのバイブルとして拝見させていただきます(素敵なパパのほうもこっそり拝見しています^^)。ありがとうございました。

stubborn_brain 2007-01-05 (金) 12:13

私の環境でも全画面で黒背景が表示されました。

「自分でどこまでやった。その結果これがわからない」ってのが明確であればこちらも回答しやすいのでとてもありがたいものなのです:)

今回の対処法は自分で試したわけではないのでちょっと申し訳ないな~と思っていましたが、うまくいったようでなによりでした:))

URL 2007-01-03 (水) 18:55

はじめまして。最近忍者ブログデビューし、ニンブロラボさんのカスタマイズ法をどんどん取り入れさせていただいています。説明がとても丁寧で分かりやすく、感謝しきりです。
しかし今回、このLightBox導入でいよいよ自己解決が出来ない状態になってしまい、恐縮ですが質問させていただくことにしました。

見ていただければ分かるかと思いますが、LightBoxで画像をポップアップさせた際、黒の半透過背景が画面いっぱいにならず、スクロールバーの少し手前で切れてしまうのです。
cssファイルやJavaScriptファイルはニンブロラボさんのご説明通り画像URL部分しか弄っておりません。LightBox1.0から2.02へ変更しましたが、1.0の時からこの現象は起きており、2.02に変更した現在も継続中です。

何とか自分で解決したく、LightBoxを導入なさっている様々なブログさんを巡ってみたりもしたのですが、解決には至りませんでした。
大変恐縮ですが、可能ならご教授いただければと思い、質問させていただきました。
お忙しいところ申し訳ありませんが宜しくお願い致します。

stubborn_brain 2007-01-04 (木) 10:19

はじめまして。
ブログ拝見させていただきました。

たしかにIEで見るとオーバーレイが画面全体になっていませんね。
Firefoxでは大丈夫でした。

これはIEのみに起こる現象のようです。
対処法としては、

▼スクリプトを変更
ebi's diary(2006-01-05)
http://ebi.dyndns.biz/diary/20060105.html#p03

こちらではスクリプトを変更して対応していますが、バージョンが違うと適用できないかもしれません。

▼CSSを変更
あとかたもなく: 画像をカッコよく見せてみよう!Part2(Litebox 1.0)
http://pub.ne.jp/tsuchan/?entry_id=307861

こちらのコメント欄にありますが、body部の margin を 0px にすることで解決するかもしれません。
ただ、お使いのまめのさんのテンプレートのCSSは、body部の margin を上下左右とも 20px とっているため、これを 0px にした場合は表示がおかしくなる可能性もあります。
その場合はどこかで帳尻を合わせる必要がありますね。

私の方では試してはないのですが、ちょっとやってみていただけますでしょうか。

tama URL 2006-10-14 (土) 15:09

ほんとうにほんとうに
ありがとうごさいます!!!
なにからなにまでお手数と
ご迷惑ばかり掛けてばかりで頭を地面にこすりつけ、ニンブロラボさんの方に足を向けて寝るなんてとは絶対出来ません!!
住所がわかればなにか菓子折りでも贈りたいです!!
ほんとうにありがとうごさいます!!!

stubborn_brain 2006-10-16 (月) 11:27

うまくできたようでなによりです。
私もいろんな意味でホッとしました・・・;p

tama URL 2006-10-14 (土) 14:06

やってみましたところサイトが開けません。
litebox-1.0.jsファイルをアップすると必ず開けなくなってしまうのです。
ニンブロラボさんに直してもらったと通りにURLを直したのですが。。。

stubborn_brain 2006-10-14 (土) 19:52

まずちょっとmetaタグがおかしいので、
<metahttpequiv="ContentType"content="text/html;charset=UTF-8" />
<meta httpequiv="ContentStyleType"content="text/css" />
<metahttpequiv="ContentScriptType"content="text/javascript" />

↑これを、↓こう修正します。

<meta httpequiv="ContentType"content="text/html;charset=UTF-8" />
<meta httpequiv="ContentStyleType"content="text/css" />
<meta httpequiv="ContentScriptType"content="text/javascript" />


次に </body> のすぐ上に記載してある

<script type="text/javascript">
<!--
initLightbox();
//-->
</script>

を削除します。

既に<body>に onloadをつけているので</body>のすぐ上にはいりません。

tama URL 2006-10-14 (土) 11:54

litebox-1.0.js修正箇所
上から一つ目
http://file.ninnjyatama.blog.shinobi.jp/loading.gifimarge/loading.gif
上から二つ目
http://file.ninnjyatama.blog.shinobi.jp/closelabel.gifimage/colseladel.gif
としてみました

stubborn_brain 2006-10-14 (土) 13:17

こちらの正しいURLは以下です。

http://file.ninnjyatama.blog.shinobi.jp/loading.gif

http://file.ninnjyatama.blog.shinobi.jp/closelabel.gif

これでやってみてください。

tama URL 2006-10-14 (土) 11:54

lightbox.css修正箇所
上から一つ目
http://file.ninnjyatama.blog.shinobi.jp/blank.gifimarges/blank.gif
上から二つ目
http://file.ninnjyatama.blog.shinobi.jp/prevlabel.gifimarges/prevlabel.gif
上から三つ目
http://file.ninnjyatama.blog.shinobi.jp/nextlabel.gifimarges/nextlabel.gif

stubborn_brain 2006-10-14 (土) 13:16

これらの正しいURLは以下です。

http://file.ninnjyatama.blog.shinobi.jp/blank.gif

http://file.ninnjyatama.blog.shinobi.jp/prevlabel.gif

http://file.ninnjyatama.blog.shinobi.jp/nextlabel.gif

ブラウザで直接アクセスすると画像が表示されますよ。

tama URL 2006-10-14 (土) 11:50

どうしてもわからないので再度コメントさせてください。(ずうずうしくてすみません)
このコメントを入れている「 LightBoxをいれてみました」記事のサンプル表示のように
写真を記事に載せたく思っています。
それでこの記事「 LightBoxをいれてみました」に載っていた小粋空間さんのサイトでlightboxの導入方法を参考にさせて頂き、且つニンブロラボさんのとこでHTML記述はご指摘頂いた通りニンブロラボサイトのソースを見て訂正したのですが
ファイルlightbox.cssとlitebox-1.0.jsの修正箇所のところがどう修正していいかわかりません。
前回(/)は必要ないといわれておられたのではずしました。
はずすと修正箇所imarge/..となるのですが
これをアップロードするとサイト自体が開かなくなってしまいました。
書き方を間違えているのでしょうか?
ですので今は削除して試行錯誤している最中なのですが、ここの修正はどう修正したらよいのでしょうか?
後、記事内にニンブロラボさんのサンプル表示のようにするにはタグをどう書けば表示されるようになるのですか?
ご迷惑をお掛けしますが、どうしても使ってみたいと思いコメントしてしまいました。
どうか宜しくお願いします。

stubborn_brain 2006-10-14 (土) 13:20

まずはアップロードしたファイルのURLを正しく把握することです。

例えばこのブログの場合、
管理画面 > ファイルマネージャ より、この記事の手裏剣の画像のところで『記事を書く』をクリックすると

<a href="http://file.shinobibloglab.blog.shinobi.jp/20060920_01.jpg" target="_blank"><img src="http://file.shinobibloglab.blog.shinobi.jp/Img/1158721365/" border="0" alt="" /></a>

が表示されます。
このうち、手裏剣画像のURLは、
http://file.shinobibloglab.blog.shinobi.jp/20060920_01.jpg
です。

images/ も ../ もありません。
ためしに http://file.shinobibloglab.blog.shinobi.jp/20060920_01.jpg に直接アクセスすると画像が表示されます。

アップロードしたファイルのURLはこの通りです。

で、記事の中で画像をLightBoxを使って表示するには

<a href="http://file.shinobibloglab.blog.shinobi.jp/20060920_01.jpg" rel="lightbox"><img src="http://file.shinobibloglab.blog.shinobi.jp/Img/1158721365/" border="0" alt="" /></a>

こうします。どこが違うかはご確認ください。

うはっ・・・なんだかコメントへの返信というより、一つの記事ができそうだわ;p

tama URL 2006-10-13 (金) 23:41

なにやら気分を害してしまったようですみませんでした。
なにぶん不得手なもので
こちらのサイトに迷惑をかけてしまうまでは思いもよらず、いたく反省しております。
すみませんでした。
コメントに返事を頂いたのも加えてやってみたのですが、やはり私では出来ませんでした。
一応報告しておきます。
重ねてすみませんでした。
失礼します。

stubborn_brain 2006-10-14 (土) 09:44

いえ、気分を害したわけではなくて、記事をきちんと読みましょう、と。
記事の通りにしたか何度も確認してみましょう、と。

記事を見ながらカスタマイズをするときに最後までできる人というのは、
1.記事をきちんと読んで記事の通りに修正できている
2.できない場合、状況を人にうまく説明できる
です。
1はいいですよね。記事の通りやれていればできるはず。

できなかったとき、『こういう状況になった』もしくは『自分はここまでやった。ここがわからない』と人に説明できれば、言われたほうもわかりやすいです。
このあたりは
http://shinobibloglab.blog.shinobi.jp/Entry/17/
ここでも書いています。
説明ができない場合でもURLがあればサイトに行って確認することもできます。

ただ、「できません」「わかりません」と言われてもこちらも困ってしまいます・・・。。

URLも記載いただいてますが、記事がまったくないためにどのように記事を書こうとしてるのか不明です。
設置がうまくできていたとしても記事に書く際の指定が間違っていたらできないですよね。

また、現在はアップロードしたCSSやjsファイルを削除しているようですが、HTML内にはまだ指定している箇所があります。
ファイルを削除した場合は指定している部分を削除した方がよろしいかと思います。

tama URL 2006-10-12 (木) 19:49

ニンブロラボさんとこの記事を参考に小粋空間さんとこでにらめっこしてやったんですが見事に失敗。
cssファイル修正するところを
http://file.ninnjyatama.blog.shinobi.jp/blank.gif/
http://file.ninnjyatama.blog.shinobi.jp/prevlabel.gif/
http://file.ninnjyatama.blog.shinobi.jp/nextlabel.gif/
jsファイル修正するとこを
loading.gif/
にして
テンプレートの修正(hred部分)
(略)を除いて貼っただけ

テンプレートの修正(スクリプト起動の追加)
bodyのとこに onload="initLightbox()"と書きました

記事に書く際
この意味がいまいちよくわかってないんですが、サンプル画像を試しに
やって見たんですが失敗しまして表示されませんでした。
ニンブロラボさんはどうやってしているのか教えてもらえないでしょうか?

stubborn_brain 2006-10-13 (金) 12:33

>ニンブロラボさんはどうやってしているのか教えてもらえないでしょうか?

どうやってと言われても記事に、

> ほぼ小粋空間さんの記事でいけます。
> 忍者ブログでの導入での注意点は一箇所。

このように記載している通り、特別なことはしていません。
ほぼ小粋空間さんの記事の通りで、忍者ブログでの注意点は一つだけです。

あと、
>http://file.ninnjyatama.blog.shinobi.jp/blank.gif/
>http://file.ninnjyatama.blog.shinobi.jp/prevlabel.gif/
>http://file.ninnjyatama.blog.shinobi.jp/nextlabel.gif/
>loading.gif/

これ、最後のスラッシュ( / )はいりませんよね。
スラッシュがあるのとないのとでは違う意味になります。

また、URLを記載していただいてたのでサイトを確認させていただきました。
ファイルの指定が全て間違えています。
*****
<link rel="stylesheet" href="http://domain/path/to/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://domain/path/to/js/prototype.lite.js"></script>
<script type="text/javascript" src="http://domain/path/to/js/moo.fx.js"></script>
<script type="text/javascript" src="http://domain/path/to/litebox-1.0.js"></script>
*****
ここの『http://domain/path/to/js/』はこのまま記述するのではなく、
小粋空間さんも書いていますが
「ご自身のブログのURLに修正します」です。

なのでtamaさんの場合なら『http://file.ninnjyatama.blog.shinobi.jp/』では?

記事を見ながらカスタマイズをしたとして、それでもできない場合の原因は
1.記事が間違えている
2.記事の通りにカスタマイズできていない
のどれかです。

1の場合もたまにはありますが、ほとんどの原因は2です。
まずは、記事を流し読みするのではなく、よく読んでみることをおすすめします。

suna77777 URL 2006-09-22 (金) 00:04

どうも。こんばんは~。
Lightbox、非常にいい感じですね~。

うちもそのうち入れようと思いつつもおざなりになってた事の一つだったりしますが、角丸なんかもしたいし、この際AJAXで色々と遊んでみたい気たっぷりです~。

stubborn_brain 2006-09-22 (金) 10:39

こんにちはー。
ですねぇ、Ajaxでいろいろ遊んでみたいですねぇ。
suna77777さんとこもよく拝見させていただいております。
今後ともよろしくお願いします。

Comment Form

Trackback+Pingback:3

TrackBack URL for this entry ※トラックバックは管理人の承認後に表示されます。
http://shinobibloglab.blog.shinobi.jp/TrackBack/44/
Listed below are links to weblogs that reference
LightBoxをいれてみました from ニンブロラボ.
Trackback from Memo for a Moment 2007-01-03 (水) 10:45

litebox 写真をカッコよく表示

lightbox2.0の軽量版にあたるliteboxを導入してみた。 つまづきそうな所は、、、 link,scriptタグのsrcを書き換えlightbox.css,litebox-1.0.jsの画像へのパス設定 ポップアップで表示された画像はグループ指定( rel= (more…)

Trackback from kisatonomori blog 2006-10-18 (水) 20:17

LightBox

いつ機能を入れたのかわかるようにメモ そんなに使わないかもしれないんだけど かっこいいので こちらを参考に私もLightBox入れてみました 最初読んでいて面倒かなと思ったけど やってみたらかなり簡単です 小粋空間さんのところに書いてる青い字の部分 lightbox.css の修正部分http://domain/path/to/と litebox-1.0.js の修正部分/path/to/ は 忍ブロでは http://file.*****.blog.shinobi.jp(ファ... (more…)

Trackback from ニンブロラボ. 2006-10-18 (水) 17:36

LightBox導入の詳細説明追記

忍者ブログに設置する用に詳しくしました。 LightBoxをいれてみました 。。。。。ふぅー・・・。 (more…)

Home > [カスタマイズ]画像スライドショー > LightBoxをいれてみました

Recent Comment
Recent Trackback
Links
ニンブロラボ. を登録 by BlogPeople
track word


awasete
あわせて読みたい
e.t.c...
タブブラウザ Sleipnir 公式ページ(上級者向け)

Get Firefox




ブログ



Feeds
Admin