画像を拡大表示
画像を拡大表示
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>
Information
