Set multiple fancybox galleries on one page, but only display one thumbnail from each gallery as the initialiser

1) Set up your resources + galleries(with the gallery extra) and assign a template variable with a gallery name in the resource.

2) Set up a chunk with the getResources call

<div class="row gallery-albums">
[[getResources? &parents=`[[*id]]` &limit=`0` &includeTVs=`1` &sortby=`menuindex` &sortdir=`ASC` &tpl=`galleriesTpl` &showHidden=`1`]]
</div>

3) set up the 'galleriesTpl' chunk

<div class="col-sm-12 col-md-6 col-lg-4 nopad" id="bg[[+id]]">
[[Gallery? &album=`[[+tv.assignedGallery]]` &thumbWidth=`2000` &thumbHeight=`2000` &thumbTpl=`galleryThumbTpl` &imageWidth=`2000` &imageHeight=`2000` &imageQuality=`100`]]
</div>

4) setup the galleryThumbTpl

<div class="gallery-thmb">
   <a href="[[+image]]" data-fancybox="[[+tv.assignedGallery]]" data-caption="[[+pagetitle]]">
     <div style="background-image:url([[+thumbnail]]);"></div>
     <span>[[+pagetitle]]</span>
   </a>
</div>

5) thumbnail fanycbox settings and jquery to remove all images except the first one from every gallery

$(".gallery-thmb a").fancybox({
   buttons: [
    "zoom",
    "share",
    "slideShow",
    "fullScreen",
    //"download",
    "thumbs",
    "close"
  ],
 thumbs : {
    autoStart : false,
    axis      : 'y'
  }
});

$(".gallery-albums>div[id]>.gallery-thmb").not(":first-child").detach();

6) Style CSS to suit

.nopad{padding:0;}
.gallery-thmb {overflow:hidden;border: solid 1px #fff;}
.gallery-thmb a div {-webkit-transition: -webkit-transform 0.15s ease 0s;transition: -webkit-transform 0.15s ease 0s;transition: transform 0.15s ease 0s;transition: transform 0.15s ease 0s, -webkit-transform 0.15s ease 0s;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);padding: 10em 0;background-size: cover;background-repeat:  no-repeat;}
.gallery-thmb a:hover div{-webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);}
.gallery-thmb a span {border: #fff 1px solid;background-color: rgba(0, 0, 0, 0.1);bottom: 0;left: 0;position: absolute;right: 0;top: 0;margin: auto;padding: 4em 0;color: #fff;font-size: 3rem;text-align: center;text-transform: uppercase;-webkit-transition: background-color 0.15s ease 0s;transition: background-color 0.15s ease 0s;overflow:  hidden;}
.gallery-thmb a:hover span { background-color: rgba(0, 0, 0, 0.5); opacity: 1;}