画像を拡大表示

画像を拡大表示
Lightbox2よりjsファイルとcssファイルと画像ファイルをダウンロードします。
このファイルを以下のようにヘッダ部で読み込むことにより画像を拡大表示することが出来ます。

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
次にアンカータグでサムネイル画像と拡大画像を指定します。

<a href="bt.gif" rel="lightbox"><img src="bt_thumb.gif" /></a>
以下、例です。
ソース
<html>
<head>
<title></title>
</head>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<body>

</body>
</html>
初版2008/11/20 :最終更新2008/11/20
HOME