fancyboxの使い方（html）

プラグイン

2020/07/09

head内へCSS設置

&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" /&gt;

1	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

JavaScript ファイルの読み込み（body タグの直前等で読み込む。）

&lt;script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"&gt;&lt;/script&gt;

1	<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

htmlの記述

&lt;ul class="list-4-column galleryList"&gt;
  &lt;li&gt;
    &lt;a href="img/gallery/1.jpg" data-fancybox="group" data-caption="プライベートオフィス（1、2人用）"&gt;
      &lt;div class="trimming-photo"&gt;
        &lt;img src="img/gallery/1.jpg"&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="img/gallery/2.jpg" data-fancybox="group" data-caption="プライベートオフィス（2、3人用）"&gt;
      &lt;div class="trimming-photo"&gt;
        &lt;img src="img/gallery/2.jpg"&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;

<li>

</div>

</a>

</li>

<li>

</div>

</a>

</li>

</ul>