Fancybox 3 Gallery using ModX Gallery Plugin

1) Load fancybox 3 files and jquery and implement script

       $(".gallery-thmb a").fancybox();

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


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

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

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>

Some Awesome CSS for the Thumbnails


.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);}


Get In Touch

Have a question? or perhaps spotted a problem?
Maybe you have something you would like to add. Drop us a line anytime!