Fancybox 3 Gallery using ModX Gallery Plugin

1) Load fancybox 3 files and jquery and implement script

 <script>
    $(document).ready(function(){
       $(".gallery-thmb a").fancybox();
    });
    </script>

Optional-- if u have multiple galleries under one page the Parent Resource. If its just one gallery go to step 3

    [[getResources? 
         &parents=`[[*id]]` 
          &tpl=`subpageTpl`
          &includeTVs=`1` 
          &includeContent=`1` 
          &showHidden=`1` 
          &sortby=`{"publishedon":"DESC"}`
           &limit=`99`]]

3) The subPageTpl. Put this on the Gallery page (in a chunk)

 
<div class="container">
  <p class="h1">[[+pagetitle]]</p>
      [[+content]]
        <div class="row gallery-albums">
          [[Gallery? &album=`[[+tv.gallery]]` &thumbWidth=`190` &thumbHeight=`130` &thumbTpl=`galleryPageThumbTpl` &imageWidth=`1000` &imageQuality=`100`]]
     </div>  
</div>

The Gallery Page Thumb Tpl

<div class="gallery-thmb">
    <a href="[[+image]]" data-fancybox="gallery" data-caption="[[+pagetitle]]">
      <img src="[[+thumbnail]]" alt="[[+name]]">
        <div class="icn-zm"><img src="images/icon_zoom.png"></div>
    </a>
</div>

Some Awesome CSS for the Thumbnails

.gallery-thmb{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-ms-flex-direction:row;
	flex-direction:row;
    -webkit-box-pack:left;
    -ms-flex-pack:left;
    justify-content:left;
}

.gallery-thmb > a {border:2px solid #ffffff;overflow: hidden;position: relative;margin:9px;}
.gallery-thmb a > img {
  -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);
}
.gallery-thmb a:hover > img {-webkit-transform: scale3d(1.1, 1.1, 1.1);transform: scale3d(1.1, 1.1, 1.1);}
.gallery-thmb a:hover .icn-zm > img {opacity: 1;}
.gallery-thmb > a .icn-zm {
  background-color: rgba(0, 0, 0, 0.1);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 0.15s ease 0s;
  transition: background-color 0.15s ease 0s;
}
.gallery-thmb > a .icn-zm > img {
  left: 44%;
  margin-left: -10px;
  margin-top: -10px;
  opacity: 0;
  position: absolute;
  top: 44%;
  -webkit-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}
.gallery-thmb > a:hover .icn-zm {background-color: rgba(0, 0, 0, 0.5);}