Wordpress用lightboxプラグイン作ってみた | 星光のつれづれ日記

WordPress用lightboxプラグイン作ってみた

シェアする

  • このエントリーをはてなブックマークに追加

もうちょっと前に導入した『Litebox plugin for WordPress』なんだけど、
このブログのテーマとは相性が悪いらしく、うまく動かなかった部分があったのに気付いた。

そして新しいプラグインを入れようといろいろと探して『Slimbox 2』なるものに出会う。
なんだけど、これはプラグインじゃなくてJavascriptって言うのだった。
ぶっちゃけ導入が面倒だし、英語だし困った。
んで導入するには『jQuery.js』って言うのも必要らしく、さらに大変。

そんなこんなで勢い余って全部まとめたプラグインにしてみた。
pluginsフォルダにぶち込んで有効化したら使えるはず。
自分の所では使えていると思う。
諸事情でいきなりバージョン1.3なのはご愛敬。
アップデート予定は無いよ。
各人で『Slimbox2.js』を上書きアップデートしてね。

Download

プラグインをダウンロードする

使い方

pluginsフォルダにアップロードして有効化するだけで使えます。

画像をうにょーんと表示するには下のように書く。

<a href="https://cdn.hosimitu.com/img/2009/05/p1000952.jpg" rel="lightbox" title="予想外の照り具合">
<img src="https://cdn.hosimitu.com/img/2009/05/p1000952.jpg" alt="予想外の照り具合" />
</a>

『a』タグの中に『rel=”lightbox”』を書けばうにょーん対象になるのですが、
デフォルトの機能で『rel=”lightbox”』を自動で追加するようにしてあるので有効化するだけでOK。
『a』タグの中に『title=”~~~”』って書けば画像開いたときの説明が入る。

表示サンプル

予想外の照り具合

こちらの記事も画像の表示に関して参考に。

注意

WordPressの環境によっては動かないかも知れない。
lightboxのプラグインは基本的にjQueryっていうスクリプトが使われてるんだけど、
動かない時はhead部分でまだ読み込まれていないかも知れない。
その場合は『slimbox.php』の19行目辺りのslimbox2.jsの上に以下を追加してpluginsフォルダにアップロードしてね。

<script src=\"http://www.google.com/jsapi\">
<script>
  google.load(\"jquery\", \"1\");
</script>

 
 
2009.12.22 追記
小さなバージョンアップをした。
特にアップデートをしなくても良い小さなもの。『rel=”lightbox”』を自動挿入する部分を綺麗にしただけ。
2009.6.26 追記
他の人が作った『slimbox2』のプラグインを発見。
WP-Slimbox2 Plugin
2009.2.26 追記
『slimbox1.6.4』バージョンのプラグインがあったw
Slimbox WordPress Plugin』(2017年5月5日リンク切れ確認)

コメント

  1. タカハシ より:

    はじめまして、こんにちは。
    最近テーマをMasinopってのに変更したら、WP lightbox 2が動かなくなって困ってました。いろいろやってあきらめかけてたら、こちらのサイトに辿り着いて、ダウンロードさせていただき、無事に動作するようになりました。
    ありがとうございます。日記でプラグインの紹介だけはしてますが、リンクは貼ってません。リンク貼ってもよろしいでしょうか?
    いろいろと助かりました、ありがとうございます。

  2. hosimitu より:

    お役に立ててなによりです。

    仕組みとしては<?php wp_head(); ?>の部分でプラグインを読み込みをして、
    読み込みされたプラグインが<head></head>内にlightboxの記述をしている感じです。

    あと名前がややこしいのは、作った当初『Slimbox WordPress Plugin』と同じ名前にしてたのですが、WPの基本機能のプラグインアップデートが面倒な事になったからです。
    この記事中の諸事情というのが名前かぶりです。

    リンクはぜひお願いします。

  3. toshibow より:

    はじめまして。
    まだまだWP初心者です。
    いろいろlightbox関係しらべては、実行したのですが
    ここのがドンピシャに動作しました!!
    今度、ブラグイン紹介エントリで
    hoshimitsuさんにリンクを張りたいと思います。
    本当にありがとうございました^^
    嬉しすぎて、おもわずコメントしてしまいました笑

  4. ryotarotakao より:

    lightbox2がなかなか起動せず、苦労していました。
    今回、ホシミツさんのプラグインを導入すると、有効にすればすぐに機能しました。
    大変助かりました。
    ありがとうございました。