様々なメディアファイルをかっこよく表示してくれるlightview.js

lightview

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

扱える画像も「画像」「動画(Quicktime)」「FLASH(swf)」「AJAX」「iframe」「HTML(inline content)」と幅広く、使いこなせたらかなり便利な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をトリガーとして非同期通信が行えます。フォームなどを扱うときに便利です。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article