Ajaxサンプル：画像拡大 [Lightbox 2.0]|Ajax入門|Ajaxの基礎と応用の学習|StudyNet

HOME > lightbox2.0, 基本サンプル集 > Ajaxサンプル：画像拡大 [Lightbox 2.0]

Ajaxサンプル：画像拡大 [Lightbox 2.0]

Lightbox 2.0のサンプルを紹介します。

Lightbox2.0のインストール方法を参考にして、JavaScriptファイルとcssファイルを用意してください。小さな画像と大きな画像のセットを用意したら、以下のように<a>タグで書けば簡単にLightbox2.0を実装することができます。

[実行サンプル]

Lightbox2.0のサンプル

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript" src="js/prototype.js"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</script>

<title>Lightbox練習</title>
</head>
<body>
<h1>Lightbox練習</h1>
<p>
<a href='images/L_pic01.jpg' rel='lightbox[group1]' title='Green' >
   <img src='images/pic01.jpg' width='80' height='60' alt='' /></a>
<a href='images/L_pic02.jpg' rel='lightbox[group1]' title='Red' >
   <img src='images/pic02.jpg' width='80' height='60' alt='' /></a>
<a href='images/L_pic03.jpg' rel='lightbox[group1]' title='Yellow' >
   <img src='images/pic03.jpg' width='80' height='60' alt='' /></a>
</p>
</body>
</html>

ブックマーク登録：