チラシの裏・・・

カレンダー 

プロフィール 

たぁ

検索フォーム 

メールフォーム 

名前:
メール:
件名:
本文:

カテゴリ 

ギレン総帥に聞け! 

ホーム 全記事一覧 << 前の記事 次の記事 >>

 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--/--/-- --:--|スポンサー広告

 

Lightbox Plus
画像をホップアップ表示させるスクリプト。
Lightboxの機能追加verで画像のはみ出し等を防いでくれます。
どんなものかは画像をクリックして貰えば解ると思います。

画像拡大時、画面より大きい場合左上に拡大ボタン出ます。


折角なのでfc2での設置
Lightbox Plusから下記のものを落とし追記後アップロードします。

lightbox_plus.js メインスクリプト
lightbox.css lighbox.css を少し改変
overlay.png 透過率 50% の PNG イメージ
loading.gif ロード用のアニメーション GIF イメージ
expand.gif 拡大ボタン用イメージ
shrink.gif 縮小ボタン用イメージ
blank.gif ブランクイメージ
close.gif 右上に置かれるクローズボタン用イメージ
zzoop.gif 効果画像の例(特殊効果付けない場合は要らない)

基本的に弄るのは2箇所。
まずはlightbox_plus.jsを開き下記を追記(一番最後の方)
addEvent(window,"load",function() {
var lightbox = new LightBox({
loadingimg:'file/loading.gif',
expandimg:'file/expand.gif',
shrinkimg:'file/shrink.gif',
effectimg:'file/zzoop.gif',
effectpos:{x:-20,y:-20},
effectclass:'effectable',
closeimg:'file/close.gif'
});
});

後はテンプレート→HTMLの編集で~ 内に下記を追加
<script type="text/javascript" src="file/lightbox_plus.js">
↑表示出来ないので全角にしてます。

このままでも毎回画像のリンクにrel="lightbox"を追加すれば機能するのですが、此方を参考にrel="lightbox"追加無しで機能する様にしてみました。
改変ソースがアップされてるので照らし合せて修正してもそんな手間ではないのですが、fc2用に書き変えたのがコレね。
上記を使えばHTMLの編集とアップロードで完了です。

※バーの方が見た目に好みなんで、ここではloading.gifをlightboxのモノを使ってます。
2006/05/30 11:55|ネットとかTB:0CM:2

コメント

rel="lightbox"追加無し
でもいけるんですね。
酔っ払ってないときに試してみます。
333 #-|2006/05/30(火) 23:37 [ 編集 ]


fc2用に書き変えたlightbox_plus.js使ったらHTMLの追記するだけでokです。
Lightbox Plusのおまけのページにも面白いのありますよ(^^)
たぁ #-|2006/05/31(水) 08:49 [ 編集 ]

コメントの投稿

管理者にだけ表示を許可する


トラックバック
トラックバックURLはこちら
http://moonover.blog3.fc2.com/tb.php/445-d994ef80

ホーム 全記事一覧 << 前の記事 次の記事 >>

最近の記事+コメント 

最近のコメント

リンク 

ゲーマータグ 

最新の為替 


Copyright(C) 2006 戯言 All Rights Reserved.
Powered by FC2ブログ. template designed by 遥かなるわらしべ長者への挑戦.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。