CSSリファレンス、(X)HTML、Movable Type、その他Webサイト制作に関する役立つ情報を掲載します！

lightview.jsが何故素晴らしいかと言うと様々なメディアファイルをLighboxのように表示出来ちゃうんです！

扱える画像も「画像」「動画(Quicktime)」「FLASH(swf)」「AJAX」「iframe」「HTML(inline content)」と幅広く、使いこなせたらかなり便利なjsです。

デモページ・ダウンロード

• デモページ
• lightview.jsダウンロードページ

※ダウンロードは本家サイトからお願い致します。上記URLの下の方にダウンロード出来る所があります。

lightview.jsの使い方

head内にパスを記述する。

<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("prototype", "1.6.0.2");</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>

title内に指定したいコメントを入力。

他のメディアを表示する

<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>

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

AJAXを使用する

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(); }
	}
  }
});

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

(2008/06/ 6 10:41 AM)