html
<body>
<div id="container">
<ul>
<li><a href="img/pic01.jpg" class="fancybox" data-group="untitledFire"><img src="img/s_pic01.jpg"></a></li>
<li><a href="img/pic02.jpg" class="fancybox" data-group="untitledFire"><img src="img/s_pic02.jpg"></a></li>
<li><a href="img/pic03.jpg" class="fancybox" data-group="untitledFire"><img src="img/s_pic03.jpg"></a></li>
<li><a href="img/pic04.jpg" class="fancybox" data-group="untitledFire"><img src="img/s_pic04.jpg"></a></li>
<li><a href="img/pic05.jpg" class="fancybox" data-group="untitledFire"><img src="img/s_pic05.jpg"></a></li>
<li><a href="img/pic06.jpg" class="fancybox" data-group="untitledFire"><img src="img/s_pic06.jpg"></a></li>
<li><a href="img/pic07.jpg" class="fancybox" data-group="untitledFire"><img src="img/s_pic07.jpg"></a></li>
<li><a href="img/pic08.jpg" class="fancybox" data-group="untitledFire"><img src="img/s_pic08.jpg"></a></li>
<li><a href="img/pic09.jpg" class="fancybox" data-group="untitledFire"><img src="img/s_pic09.jpg"></a></li>
<li><a href="img/pic10.jpg" class="fancybox" data-group="untitledFire"><img src="img/s_pic10.jpg"></a></li>
<li><a href="img/pic11.jpg" class="fancybox" data-group="untitledFire"><img src="img/s_pic11.jpg"></a></li>
</ul>
</div><!--container-->
</body>
- fancyBox homepageからcopy & paste
<script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); }); </script>
- だとうまくいかない。赤字の箇所が必要。なぜ？
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").attr('rel', 'group1').fancybox();
});
</script>
css
@charset "utf-8";
/* CSS Document */
html, body, ul, li, a, img{
margin: 0;
padding: 0;
line-height: 1.0;
}
ul, li{
list-style-type: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
}
/*reset
---------------------------------------------------------------------------------------*/
body{
}
#container{
width: 1200px;
margin: 16px auto;
}
ul{
overflow: hidden;
}
li a img{
width: 25%;
height: auto;
float: left;
border: 4px solid #FFF;
box-sizing: border-box;
}
