Wordpressで画像をLightbox(LightView)風に表示する
公開日| 2009年12月08日 | コメントはまだありません。
WordPressで画像をLightbox風に表示するためのプラグインは、複数あります。
今回は、その中でも、LightViewをWordpress用プラグインを介して提供しているLightview for WordPressを紹介します。
早速、インストールしてみましょう。
インストールは、通常のプラグイン同様、[プラグイン]-[新規追加]-[アップロード]から、先のダウンロード先からダウンロードしたZIPファイルを指定して、インストールします。
インストール後、プラグインを有効にします。
早速、使ってみましょう。
以下の手順でやってみます。
- 記事(エントリー)にLightBox(LightView)で表示したい画像をアップロード/挿入からアップロードします。
- 記事(エントリー)に画像を挿入します。
- リンクURL:ファイルURLボタンをクリックしてURLを挿入します。
- サイズ:サムネイルをクリックしてます。
- 挿入ボタンをクリックします。
- 記事(エントリー)に以下のような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サイトなども参考にあると思います。
この記事を読んだ人は、こんな記事も読んでいます。:
コメント
コメントをどうぞ