Blog | Gallery

2010年07月02日

Seesaaに jQuery lightBox plugin を導入


画像を拡大表示するのに見ばえをよくしたいと思い
jQuery lightBox plugin を使うことにしました。
以下、jQuery lightBox pluginの導入の仕方をメモしておきます(バージョン 0.5)
 ※)今回jQuery lightBox 導入にあたりLarkspur 大洋への連祷編さんを
 大いに参考にさせていただきました。

■ダウンロードと設置
jQuery lightBox pluginを公式サイトからダウンロード。
必要なファイルは以下になります。
 
 1. js フォルダの内のjquery.lightbox-0.5.js
 2. cssフォルダ内のjquery.lightbox-0.5.css
 3. images フォルダ内の全てのgifファイル


■gif ファイルと css をアップロード
まず images フォルダ内の全ての gif ファイルをファイルマネージャで
image ディレクトリにアップロード。


次に、css フォルダ内の jquery.lightbox-0.5.css を css ディレクトリにアップロード。
 ※)ディレクトリが存在しない場合は新たに作成します。
 (ディレクトリは任意のものでも構いません、私はわかりやすいように上記のように分けました)


■ jquery.lightbox-0.5.js を編集
アップロードが終わったたら、js フォルダの内の jquery.lightbox-0.5.js をテキストエディタで開き、さきほどアップロードした gif ファイルの読み込みの設定をします。
29行目の// Configuration related to imagesの以下
imageLoading:	'images/lightbox-ico-loading.gif'
imageBtnPrev: 'images/lightbox-btn-prev.gif'
imageBtnNext: 'images/lightbox-btn-next.gif'
imageBtnClose: 'images/lightbox-btn-close.gif'
imageBlank: 'images/lightbox-blank.gif'

の ' ' でかこまれた部分を絶対パスに変更します。

imageLoading: 'http://****/images/lightbox-ico-loading.gif'
imageBtnPrev: 'http://****/images/lightbox-btn-prev.gif'
imageBtnNext: 'http://****/images/lightbox-btn-next.gif'
imageBtnClose: 'http://****/images/lightbox-btn-close.gif'
imageBlank: 'http://****/images/lightbox-blank.gif'
Seesaaブログの場合、絶対パスはファイルマージャーの「HTML」のボタンで確認できます。
編集が終わったら、jquery.lightbox-0.5.js を js ディレクトリにアップロード。


■ JavaScript および css の読み込みと設定
その後、JavaScript、lightbox の css を使えるようにHTMLを編集。
<head>タグ内に以下を記述します。※)****の部分は適宜変更してください。

<link rel="stylesheet" href="http://****/css/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://****/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('a.lightbox').lightBox();
});
</script>



■いよいよlightboxで表示
後は、a要素内に <class="lightbox"> を追加すると画像をlightbox表示できます。同じa要素内に target="_blanck" がある場合は、はずしておいたほうがよいかもしてません。また、title="****" で左下に画像のタイトルを表示することができます。

 ※)Seesaaブログの場合
 マイブログ >> 設定 >> ブログ設定 >> 画像詳細ページを
 「表示する」から「表示しない」に設定変更する必要があります。

 ※)closeボタンの横にスクロールバーが表示されてしまう時は
 jquery.lightbox-0.5.cssの「#lightbox-container-image-data-box」を
 編集してください。

このjQuery lightBox 、css を編集することでかなり自由にカスタマイズができるようです。
でも、とりあえずはデフォルトのままでいいかな。



posted by zen at 20:59| Comment(1) | TrackBack(0) | TIPS | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
はじめまして。
とても参考になりました!ありがとうございます!!
特に、imageのURLを絶対パスにするという所でとても助かりました。
本当にありがとうございました。
Posted by タカ at 2012年07月12日 14:12
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

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


※画像の中の文字を半角で入力してください。

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

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