2009年06月18日

jQuery版lightBoxを使う

jQuery lightBox plugin

以前の通常版"Lightbox"の設置方法とは別個に、
jQuery版"lightBox"の設置方法もメモ代わりに書くことにしました。
現在のバージョンは0.5です。

最初に公式サイトよりzipファイルをダウンロードして解凍。
準備としてとにかく必要なのが、以下のファイル

1.jsフォルダの内のjquery.lightbox-0.5.js
2.cssフォルダ内のjquery.lightbox-0.5.css
3.imagesフォルダ内の全てのgifファイル

ということで各ファイルをファイルマネージャでアップロード。
まずはcssファイルとgifファイルだけアップロード。
jsは後で編集するのでまだアップしません。

一応gifはimageディレクトリに、cssはcssディレクトリにアップ、
存在しない場合は新たに作成しておく。
アップした各gifファイルのURLを確認できるようメモする。

残ったjquery.lightbox-0.5.jsをテキストエディタで開く。
29行目のConfiguration related to imagesというコメントの下、

imageLoading:
imageBtnPrev:
imageBtnNext:
imageBtnClose:
imageBlank:

この5つの項目の右側にある' 'に囲まれた部分を、
先ほどアップしたgifのURLに変更する。
編集が済んだら保存して、任意のフォルダにアップロード。

Seesaaブログの場合は
「マイブログ-設定-ブログ設定-画像詳細ページ」の項目を
「表示する」から「表示しない」に設定変更しておく。

その後、HTMLを編集。
<head>タグ内に以下を記述します。

<link rel="stylesheet" href="http://Your Domain/jquery.lightbox-0.5.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" language="JavaScript" src="http://Your Domain/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('a.lightbox').lightBox();
});
</script>

Your Domainのところは環境に合わせて変更します。
jquery.jsは便利さ等も考えてGoogleから借りました。

後は $('a.lightbox') の括弧内の部分を、
How to useにあるような感じで任意に設定。
そのまま、クラスにlightboxを指定でもOK
この場合、使うには<a class="lightbox">という風にする。

特に同一ページ内でlightbox絡みのサムネイルが複数ある時、
かなり便利で面白いです。


タグ:Lightbox jquery
posted by garni at 18:12 | Comment(0) | TrackBack(0) | IT関連 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。