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

webかたつむり

ウェブデザインを勉強中

jQuery "modal window" その4

  • 指示されたscriptと、違う記述するのは気持ちが悪いので先生に相談してみると、解決方法がわかりました。
  • とりあえずscriptはfancyBoxのHPに記載されているとおりに戻す。

$(document).ready(function() {
$(".fancybox").fancybox();
});

  •  問題はhtmlのグループ名にありました。
  • data-group="untitledFire"と記述した箇所を、data-fancybox-group="untitledFire"に修正すると、問題なく動きました!
  • 「fancybox_overlay.png」 このファイルはウィンドウの背景用の素材ですが、透過のないグレー(#7777777)に変更した。

 

<ul>
<li><a href="img/text.jpg" class="fancybox" data-fancybox-group="untitledFire"><img src="img/s_pic01_gray.jpg"></a></li>
<li><a href="img/pic02.jpg" class="fancybox" data-fancybox-group="untitledFire"><img src="img/s_pic02.jpg"></a></li>
<li><a href="img/pic03.jpg" class="fancybox" data-fancybox-group="untitledFire"><img src="img/s_pic03.jpg"></a></li>
<li><a href="img/pic04.jpg" class="fancybox" data-fancybox-group="untitledFire"><img src="img/s_pic04.jpg"></a></li>
<li><a href="img/pic05.jpg" class="fancybox" data-fancybox-group="untitledFire"><img src="img/s_pic05.jpg"></a></li>
<li><a href="img/pic06.jpg" class="fancybox" data-fancybox-group="untitledFire"><img src="img/s_pic06.jpg"></a></li>
<li><a href="img/pic07.jpg" class="fancybox" data-fancybox-group="untitledFire"><img src="img/s_pic07.jpg"></a></li>
<li><a href="img/pic08.jpg" class="fancybox" data-fancybox-group="untitledFire"><img src="img/s_pic08.jpg"></a></li>
<li><a href="img/pic09.jpg" class="fancybox" data-fancybox-group="untitledFire"><img src="img/s_pic09.jpg"></a></li>
<li><a href="img/pic10.jpg" class="fancybox" data-fancybox-group="untitledFire"><img src="img/s_pic10.jpg"></a></li>
<li><a href="img/pic11.jpg" class="fancybox" data-fancybox-group="untitledFire"><img src="img/s_pic11.jpg"></a></li>
<li><a href="https://www.youtube.com/embed/lvHQbDp13BY" class="various fancybox.iframe"><img src="img/s_pic12.jpg"></a></li>
</ul>