アップデートしたLightviewが素晴らしい

2008年2月20日

様々なメディアファイルをLighboxのように表示できるLightview2.0が非常に素晴らしいのでご紹介したいと思います。

Lightview：www.nickstakenburg.com

扱えるファイル

• 画像
• 動画(Quicktime)
• FLASH(swf)
• AJAX
• iframe
• HTML(inline content)

このように非常にシンプルなUIで様々なメディアを扱えます。

準備と使い方

スクリプトファイルをこちらからDLします。

続いてヘッダーにスクリプトを読み込む

<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/lightview.js'></script>

画像単体で表示

hrefに拡大画像のURLと’lightview’のclassをつけます。

<a href='image.jpg' class='lightview'>My image</a>

画像にコメントを表示

<a href='leopard.jpg' title='A title' class='lightview' >Leopard</a>
<a href='gazelle.jpg' title='This image has a title :: And a caption' class='lightview'>Gazelle</a>
<a href='cheetah.jpg' title=":: I don't have a title, just a caption" class='lightview'>Cheetah</a>
<a href='rhino.jpg' title="Left in split characters will get stripped :: " class='lightview'>Rhino</a>

他のメディアを表示する

例はiframeですが、様々なメディアを表示することができます。

<a href='http://www.google.com' rel='iframe' title='Google :: :: fullscreen: true'
class='lightview' >Google</a>
<a href='http://www.yahoo.com' rel='iframe' title='Yahoo :: A caption :: width: 800, height: 600'
class='lightview' >Yahoo</a>

AJAXを使用する

header内でLightview.showをトリガーとして非同期通信が行えます。フォームなどを扱うときに便利ですね。

Lightview.show({
href: '/ajax/',
rel: 'ajax',
title: 'Login',
caption: 'Enter your username and password to login',
options: {
autosize: true,
topclose: true,
ajaxOptions: {
method: 'get',
onComplete: function(){ $('name').focus(); }
}
}
});