かわいくポップするFancyBoxを使ってみた。

jQuery

かわいくポップするFancyBoxを使ってみました。
こんな感じ
http://moeten.info/flex/20090106_jQueryFancyBox/

せっかくなのでピンクでかわいくデザイン。
メインな部分

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.0.0.js"></script>
<script type="text/javascript" src="jquery.pngFix.pack.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<link rel="stylesheet" href="fancy.css" type="text/css" media="screen">
<script type="text/javascript">
    $(document).ready(function() {
    $("p#test3 a").fancybox({
        'hideOnContentClick': true,
        'zoomSpeedIn' :    300,
        'zoomSpeedOut':    300,
        'overlayShow' :    true
    });
});

グループ化はrelで簡単にできます。

<p id="test3">
      <a href="01.jpg" title="image1" rel="group1"><img src="01s.jpg" alt=""/></a>
    <a href="02.jpg" title="image2" rel="group1"><img src="02s.jpg" alt=""/></a>
    <a href="03.jpg" title="image3" rel="group1"><img src="03s.jpg" alt=""/></a>
</p>

リンク

ソースの丸ごとダウンロード
http://moeten.info/flex/20090106_jQueryFancyBox/20090106_jQueryFancyBox.zip
ソースはこちら

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.0.0.js"></script>
<script type="text/javascript" src="jquery.pngFix.pack.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<link rel="stylesheet" href="fancy.css" type="text/css" media="screen">
<script type="text/javascript">
    $(document).ready(function() {
    $("p#test3 a").fancybox({
        'hideOnContentClick': true,
        'zoomSpeedIn' :    300,
        'zoomSpeedOut':    300,
        'overlayShow' :    true
    });
});
</script>
<style type="text/css">
h1{
    color:#552ff8;
}
img{
    border:1px solid #ea38ff;
}
</style>
<title>New Web Project</title>
</head>
<body>
    <h1>fancyboxTest</h1>
       <p id="test3">
          <a href="01.jpg" title="image1" rel="group1"><img src="01s.jpg" alt=""/></a>
        <a href="02.jpg" title="image2" rel="group1"><img src="02s.jpg" alt=""/></a>
        <a href="03.jpg" title="image3" rel="group1"><img src="03s.jpg" alt=""/></a>
    </p>
</body>
</html>