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=”lightview”を追加します。

<a href="http://blog.off-soft.net/wp-content/uploads/blog_off/2009/12/light_2.png" class="lightview"><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="lightview" rel="gallery[foobar]">foo</a>

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

For a QuickTime movie:

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

For a Flash video with title and size limits:

<a href="flash.swf" class="lightview" 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="lightview" title="Title::Description::fullscreen:true">Google</a>

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

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

ブックマークへ追加:

Trackback URL

このコメントは管理人から承認された後、表示されます。

コメントをどうぞ

翻訳

タグクラウド

install WIndows Note Convert トップページ投稿ページ問題日付サイトマップフロントページ META remove multibyte utf-8 unicode shiftjis redirect manage generator donwload file マルチランゲージ国際化 width 幅テンプレートテーマ pre タグクラウドはみ出るリダイレクト ParmaLink Redirect パーマリンク table html タグプラグイン php コマンドヘルプ control SQLite MySQL プラグイン qTranslate WordPress

リンク

php とmysql が使えるおすすめ格安レンタルサーバー比較

このサイトは？

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

最近の記事