忍者ブログ
風の吹くまま気の向くまま。。。
gooリサーチモニターに登録!
×

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

まずは下の写真をクリックしてみて下さい。



すてきでしょ~
ということで早速実装しました。


参考サイト記事
ニンブロラボ. LightBoxをいれてみました
小粋空間: Litebox 1.0 をブログに適用する

まずLitebox- Same great taste, less caloriesでサイト後方にある
Downloadlitebox-1.0.zipのリンクをクリックしてダウンロードします。

つぎにダウンロードしたlitebox-1.0.zipを右クリックしてでてきたプルダウンメニューの中の「すべて展開」をクリック。解答ウィザードが立ち上がるので、次へ→次へ→完了すると解凍されます。

使うファイルは下の分だけ、後のものはサンプル画像だからいらない。
lightbox.css
blank.gif
closelabel.gif
loading.gif
nextlabel.gif
prevlabel.gif
litebox-1.0.js
moo.fx.js
prototype.lite.js
赤いファイル以外は自サイトにアップロードします。
残り lightbox.css litebox-1.0.js は開いて中を少し変えます。

litebox-1.0.jsの修正

下のように書かれてるとこを探します。
(前回紹介したTeraPadかファイルの上で右クリックしてでてきたプルダウンメニュー内の「プログラムから開く→ワードパッド」で開くでもOK)
//
// Configuration
//
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/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
赤いところを
//
// Configuration
//
var fileLoadingImage = "アップロードしたloading.gifのURL";
var fileBottomNavCloseImage = "アップロードしたcloselabel.gifのURL";
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
にします。
(アップロードした画像をクリックすると別ウィンドウが出てくるんで、でてきたウィンドウ内の画像を右クリックすると画像のURLが出てくるからそれをコピペ。)

できたら上書き保存して自サイトにアップロードします。

lightbox.cssの修正

下のように書かれてるとこを探します。
#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 { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(アップロードしたprevlabel.gifのURL) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(アップロードしたnextlabel.gifのURL) right 15% no-repeat; }
にします。
(アップロードした画像をクリックすると別ウィンドウが出てくるんで、でてきたウィンドウ内の画像を右クリックすると画像のURLが出てくるからそれをコピペ。)

できたら上書き保存して自サイトにアップロードします。

そして自サイトHTML内の<hard>~</hard>内に
<link rel="stylesheet" href="アップロードしたlightbox.cssのURL" type="text/css" media="screen" />
       間に別のタグがはさまっててもOKの部分
<script type="text/javascript" src="アップロードしたprototype.lite.jsのURL"></script>
<script type="text/javascript" src="アップロードしたmoo.fx.jsのURL"></script>
<script type="text/javascript" src="アップロードしたlitebox-1.0.jsのURL"></script>
にします。

もひとつ<body>と書かれてるところを
<body onload="initLightbox()">
にします。

以上で完成!

記事を書くときのタグは以下。
単一表示
<a href="http://domain/path/to/images/hogehoge.jpg" rel="lightbox"><img src="http://domainpath/to/images/hogehoge_thumb.jpg" border="0" /></a>
グループ
<a href="http://domain/path/to/images/hogehoge1.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge1_thumb.jpg" border="0" /></a>
<a href="http://domain/path/to/images/hogehoge2.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge2_thumb.jpg" border="0" /></a>
<a href="http://domain/path/to/images/hogehoge3.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge3_thumb.jpg" border="0" /></a>
赤いとこはサンプル画像のURLなので、アップした画像URLに書き換えて使う。

これで画像入りの記事書くときはよさげになる~。

PR
この記事にコメントする
 
お名前
タイトル
メール
URL
文字色
絵文字 Vodafone絵文字 i-mode絵文字 Ezweb絵文字
コメント
パスワード   
この記事にトラックバックする
[12]  [11]  [10]  [9]  [8]  [7]  [6]  [5]  [4]  [3]  [2
カレンダー
08 2017/09 10
S M T W T F S
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
天気予報
天気
ほかの天気予報とはひと味違いMyページが持てるし、知りたいところの地図をクリックしていくと、 市町村までみることができる
時刻
名言
プロフィール
HN:
ちかこ
性別:
女性
職業:
フリーター
趣味:
ゲーム、マンガ、懸賞
自己紹介:
暑さに弱く寒さに弱い
見た目健康そうな
いかず後家
ADMIN | ENTRY
NARUTO
AmazonStore
by amanatu
ブログ内検索

Linklist
Customize in Ninja Blog
IMAGE
ニンブロラボ.
TMP*blog
時の館-フリーFlash時計
カバラ数秘術
A Trial Product's 素材置き場
小粋空間
あわせて読みたい
あわせて読みたい
最新CM
最新TB
    RSS
    バーコード
    Counter
    忍者ブログ [PR]
      ▲このページの先頭へ
    • seo