webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

jQuery "modal window" その3

f:id:ohta-felica:20160603205124p:plain

 

 

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>

 

 

f:id:ohta-felica:20160603013457p:plain

 

 css

  • fancyboxのcssファイルは、画像のリンク部分だけ書き直す。
  • cssファイルから、1階層外に出て、それからimgフォルダに入る。
  • だから、「../img/ファイル名」、となる。

@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;
}

 option

  • youtubeの映像とリンクを貼るためにscriptを追加した。
  • その他細々とした修正をCSSに加えた。