Fancybox3：如何在保留data-trigger属性的同时在单个页面上创建单独的画廊？

Question

我不确定在使用data-trigger属性时如何创建单独的画廊。在同一页面上，我希望能够对不同的视频和图像库按下不同的按钮。

这是代码...

<div id="porfolio-animation">
<div class="row">
    <h1 class="portfolio-headers">animation</h1>
    <img class="displayed">

    <a data-trigger="preview01" href="javascript:;"> 
    <img src="images/animation-btn.svg" width="100" height="100" alt="Animation portfolio">
    </a>

    <a href="https://vimeo.com/148636779" data-fancybox="preview01">
    </a>

    <a href="https://vimeo.com/227570106" data-fancybox="preview01">
    </a>

    <a href="https://vimeo.com/277458775" data-fancybox="preview01">
    </a>

<div class="portfolio-illo">

    <a data-trigger="preview02" href="javascript:;"> 
    <img src="images/illo-btn.svg" width="100" height="100" alt="Illustration portfolio">
    </a>

    <a href="images/fastfood_coffee_illo_web.jpg" data-fancybox="preview02">
    </a>

    <h1 class="portfolio-headers">illustration</h1>
</div>