crocodile notebook

feedly feedburner google+ twitter facebook creative commons BY:2.1 プロフィール


wordpressにlightbox効果を加える場合にはプラグインを用いることが多いようですが、複数のjQueryを組み合わせる場合などもあるし、自分で調整できたほうが使いやすいのでボクは従来の方法を使っています。
ただし、以下の方法はプラグインのlightboxを使っていても同様にできると思います。

まずlightboxをjQuery lightBox plugin 0.5からダウンロードします。
解凍して出来上がった「jquery.lightbox-0.5.js」をテキストエディタで開いて「.gif」を検索します。
6行見付かるので、以下のように修正します。

imageLoading:’http://《blogのURL》/wp-content/themes/《テーマ名》/images/lightbox-ico-loading.gif’,
imageBtnPrev:’http://《blogのURL》/wp-content/themes/《テーマ名》/images/lightbox-btn-prev.gif’,
imageBtnNext:’http://《blogのURL》/wp-content/themes/《テーマ名》/images/lightbox-btn-next.gif’,
imageBtnClose:’http://《blogのURL》/wp-content/themes/《テーマ名》/images/lightbox-btn-close.gif’,
imageBlank:’http://《blogのURL》/wp-content/themes/《テーマ名》/images/lightbox-blank.gif’,
<img src=”http://《blogのURL》/wp-content/themes/《テーマ名》/images/lightbox-btn-close.gif”>

更新したファイルを含めた解凍して出来上がった全ファイルを ~/wp-content/themes/《テーマ名》/ にコピーします。
cssは ~/wp-content/themes/《テーマ名》/css にコピー
jsは ~/wp-content/themes/《テーマ名》/js にコピー
imagesは ~/wp-content/themes/《テーマ名》/images にコピー

次にjQuery本体を呼び込みます。
これは自分のサーバから呼び込んでも良いですが、キャッシュやバージョン管理の観点からgoogleのjsapiを利用するのが良いです。
以下をメインインデックスのテンプレートの<head>〜</head>の間にコピーします。

<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script>google.load(“jquery”, “1″);</script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/jquery.lightbox-0.5.js”></script>
<link rel=”stylesheet” type=”text/css” href=”css/jquery.lightbox-0.4.css” media=”screen” />
<script type=”text/javascript”>
$(function() {
$(‘a[rel^=lightbox]‘).lightBox();
});
</script>

(“jquery”, “1”)でバージョン1.*の最新版を呼び込みます。
現時点での最新は1.4.2ですが、今後もこのバージョンを使いたい場合は以下のように記述します。
<script>google.load(“jquery”, “1”);</script>

<script>google.load(“jquery”, “1.4.2”);</script>

最後に「Add lightBox」プラグインをインストールして有効にします。
このプラグインはリンク先が画像ファイルになっているaタグが画像ファイルを囲っている場合に、aタグにrel=lightbox[記事ID]を加えます。
ページ内に複数記事の画像が表示されていても記事IDでグループ化されますので安心です。

これで、画像アップロード時にrel=”lightbox”を入れなくてもlightbox効果を使う事ができ、画像へのリンクにしか効果が機能しないように制限できます。


jQuery+lightbox覚え書き

UPDATE: 2010.12.26
, , , ,




併せ読みに選ばれている
記事はこちらのようです

wordpressプラグインを12個使って運営しています

wordpressプラグインを12個使って運営しています

なにも目新しいところがないけど、当ブログで使ってるwordpressプラグインの一覧です。

prototype.jsと同じrelを使ってjQuery版lightbox0.5でグループ化する方法

prototype.jsと同じrelを使ってjQuery版lightbox0.5でグループ化する方法

jQueryのlightbox0.5はそのままだとrel属性のグループ化が出来なかったので、jquery.lightbox-0.5.jsを微修正した備忘録です

《プラグイン17選》WordPressでブログを始めたい方へ捧げます《テーマ4選》

《プラグイン17選》WordPressでブログを始めたい方へ捧げます《テーマ4選》

WordPressでブログを始めようとしてる人、始めたけどもう少し手を加えたい人。 そうした方の参考になればと思い、ボクが活用しているプラグイン17本を纏めてみました。 あわせて今気になってるテーマを4つご紹介。

本が好きな人、読書量を増やしたい人、本を知りたい人に向けたブログ『pigeon bookstock』

本が好きな人、読書量を増やしたい人、本を知りたい人に向けたブログ『pigeon bookstock』

[PR記事] 書籍を紹介するブログをWordPressで作りました。 今回利用したWordPress Tipsを簡単にご紹介します。

Facebookのソーシャルプラグイン風のTwitterソーシャルプラグイン

Facebookのソーシャルプラグイン風のTwitterソーシャルプラグイン

twitterのフォロワーリストをfacebook風ソーシャルウィジェットのようなレイアウトでブログに掲載するjQueryプラグインです。 カスタマイズも容易なので使いやすいですよ。

wordpressサイトがパンダアップデートの影響を避けられるかもしれない5つの方法

wordpressサイトがパンダアップデートの影響を避けられるかもしれない5つの方法

パンダアップデートの影響に巻き込まれたような気が多分にしてきたので、回復実例を参考に対策を施しました。 wordpress向けrobots.txtの設定実例も記載しています。