46web

pone_web ワサコレ・スマホ・タブレット・パソコン・クルマ

TOP >> スポンサー広告 >> 【FC2】Lightbox v2.04 導入編 -1-TOP >> Web site >> 【FC2】Lightbox v2.04 導入編 -1-

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
※古い記事を試すときは自己責任で!

この記事にリンクを貼る


Trackback: -- |  Comment: --

【FC2】Lightbox v2.04 導入編 -1-

【FC2 BLOG♘用】
H.B.Cさんのサイトでも導入しているLightBoxをFC2ブログへ導入する方法を検索して
どうにかできるようになったのでその方法を残します。
<現在 Google Chome と safari では一部動作していません。おそらくページ内にある<iframe>が原因だと思われますが対策がありません。その他では動作すると思います。>

1.LightBoxのスクリプトをダウンロード

まずは Lightbox v2.04 をダウンロードしましょう。
http://www.lokeshdhakar.com/projects/lightbox2/


2.パスの変更が必要

普通のホームページで導入する場合、変更は必要ありませんがFC2ブログの場合はファイルの保管場所が違うので
その部分を変更する必要があります。
ダウンロードしたZipファイルを解凍します。
その中の、lightbox.js、lightbox.css を下記のように修正します。

ファイルの保存場所(your_blog)を自分のブログに合わせて変更します。
lightbox.js
変更前(49行目 50行目)
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

変更後(49行目 50行目)
fileLoadingImage: 'your_blog/loading.gif',
fileBottomNavCloseImage: 'your_blog/closelabel.gif',


lightbox.css
変更前(16行目 17行目)
#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; }

変更後(16行目 17行目)
#prevLink:hover, #prevLink:visited:hover { background: url(your_blog/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(your_blog/nextlabel.gif) right 15% no-repeat; }


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

index.html、image-1.jpg、thumb-1.jpg 以外のファイルを全てアップロードしてください。


4.BODYタグに下記ソースを追加

本来なら、<HEAD>~</HEAD>タグ内に追加するのですが、IEの不具合に対応するためにタグの最後に読み込ませます。
そのため、</BODY>の直前に追加します。
(その他、別アプリのソースを追加する場合でも下記の4行は必ず</BODY>直前にしてください)

追加するのは下記の4行です。
ファイルの保存場所(your_blog)を自分のブログに合わせて変更します。
<link rel="stylesheet" href="your_blog/lightbox.css" type="text/css" media="screen" />
<SCRIPT src="your_blog/prototype.js" type="text/javascript"></SCRIPT>
<SCRIPT src="your_blog/scriptaculous.js?load=effects,builder" type="text/javascript"></SCRIPT>
<SCRIPT src="your_blog/lightbox.js" type="text/javascript"></SCRIPT>


5.使用方法

記事内の画像リンクの中に rel="lightbox"を追加するだけです。

例えば下の画像のタグは(image.gifで「この画像で記事を書く」を選ぶと下記のリンクができます。)
<a href="your_blog/blog_import_4d510765afc9a.jpg" target="_blank">
<img src="your_blog/blog_import_4d510765afc9a.jpg" border="0" width="560" height="420" /></a>



<A>タグの中に rel="lightbox"を追加すると
<a href="your_blog/blog_import_4d510765afc9a.jpg" rel="lightbox" target="_blank">
<img src="your_blog/blog_import_4d510765afc9a.jpg" border="0" width="560" height="420" /></a>





複数の画像を連続して表示したい場合はrel="lightbox[好きな文字]"でひとつのグループにできます。

<a href="your_blog/blog_import_4d51074f8403f.jpg" rel="lightbox[20110206]" target="_blank">
<img src="your_blog/blog_import_4d51074f8403f.jpg" border="0" width="180" height="135" /></a>
<a href="your_blog/blog_import_4d5107491e948.jpg" rel="lightbox[20110206]" target="_blank">
<img src="your_blog/blog_import_4d5107491e948.jpg" border="0" width="180" height="135" /></a>
<a href="your_blog/blog_import_4d51074512a53.jpg" rel="lightbox[20110206]" target="_blank">
<img src="your_blog/blog_import_4d51074512a53.jpg" border="0" width="180" height="135" /></a>




タグ打ちがはじめての人にはハードルが高いかもしれませんが効果は絶大ですのでぜひ頑張ってください。 ※古い記事を試すときは自己責任で!

この記事にリンクを貼る


TOP > スポンサー広告 > 【FC2】Lightbox v2.04 導入編 -1-TOP > Web site > 【FC2】Lightbox v2.04 導入編 -1-

この記事に対するコメント

コメントの投稿

Secret

トラックバック

トラックバックURL
→http://recoboo.blog28.fc2.com/tb.php/20-0f3df337
この記事にトラックバックする(FC2ブログユーザー)

ブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。