Wordpressで画像をLightbox(LightView)風に表示する

公開日| 2009年12月08日 | コメントはまだありません。

WordPressで画像をLightbox風に表示するためのプラグインは、複数あります。
今回は、その中でも、LightViewをWordpress用プラグインを介して提供しているLightview for WordPressを紹介します。

例）

早速、インストールしてみましょう。

インストールは、通常のプラグイン同様、[プラグイン]-[新規追加]-[アップロード]から、先のダウンロード先からダウンロードしたZIPファイルを指定して、インストールします。
インストール後、プラグインを有効にします。

早速、使ってみましょう。

以下の手順でやってみます。

記事（エントリー）にLightBox(LightView)で表示したい画像をアップロード/挿入からアップロードします。
記事（エントリー）に画像を挿入します。
1. リンクURL：ファイルURLボタンをクリックしてURLを挿入します。
2. サイズ：サムネイルをクリックしてます。
3. 挿入ボタンをクリックします。

記事（エントリー）に以下のようなHTMLコードが出力されます。

<a href="http://blog.off-soft.net/wp-content/uploads/blog_off/2009/12/light_2.png"><img src="http://blog.off-soft.net/wp-content/uploads/blog_off/2009/12/light_2-150x150.png" alt="light_2" title="light_2" width="150" height="150" class="alignnone size-thumbnail wp-image-401" /></a>

最初の<a href=”http://….. タグにclass=”thickbox”を追加します。

<a href="http://blog.off-soft.net/wp-content/uploads/blog_off/2009/12/light_2.png" class="thickbox"><img src="http://blog.off-soft.net/wp-content/uploads/blog_off/2009/12/light_2-150x150.png" alt="light_2" title="light_2" width="150" height="150" class="alignnone size-thumbnail wp-image-401" /></a>

最後に記事（エントリー）を公開して完了です。

このプラグインは、lightviewの機能をWordpressで簡単につかえるようにしたプラグインで、他のLightBox系のプラグインに比べても、簡単な部類だと思います。

一度、試されるのも良いと思います。

また、ここで紹介した以外のlightviewの機能も使えますので、Lightview for WordPressを参照してください。

For a set of images:

<a href="foo.jpg" class="thickbox" rel="gallery[foobar]">foo</a>

<a href="bar.jpg" class="thickbox" rel="gallery[foobar]">bar</a>

For a QuickTime movie:

<a href="quicktime.mov" class="thickbox" title="">QuickTime</a>

For a Flash video with title and size limits:

<a href="flash.swf" class="thickbox" title="Title::::width:320,height:240">video</a>

For a webpage (iframe) with title and description, in fullscreen:

<a href="http://www.google.com" class="thickbox" title="Title::Description::fullscreen:true">Google</a>

さらに、オリジナルlightviewサイトなども参考にあると思います。

この記事を読んだ人は、こんな記事も読んでいます。:

コメントをどうぞ

翻訳

タグクラウド

execute remove フロントページ投稿ページトップページ install WIndows Note Convert META generator 日付 donwload file manage multibyte utf-8 unicode shiftjis euc console サイトマップ問題 ParmaLink Redirect パーマリンクはみ出る pre 幅テンプレートテーマタグクラウドマルチランゲージリダイレクト PHP(タグ) タグ table control HTML(タグ) コマンド国際化（翻訳） SQLite(タグ) MySQL(タグ) qTranslate プラグイン(タグ) Wordpress(タグ)

リンク

このサイトは？

Joomla!,WordpressなどCMSを使ったサイト構築、サイト管理からソフトウェアの使用方法、開発環境までのヒントを記述します。