Modx Gallery with Pagination inc. Fancybox

1) Install GetPage Extra, Gallery Extra, all Fancybox files (if required)

2) Add extra Snippet for Pagination, name it: GalleryItemPagination

<?php
// First instantiate the Gallery package
$modx->addPackage('gallery',$modx->getOption('gallery.core_path',$config,$modx->getOption('core_path').'components/gallery/').'model/');
$curItem = $modx->getOption('curItem',$scriptProperties,1);
if ($modx->getOption('checkForRequestVar',$scriptProperties,true)) {
    $getParam = $modx->getOption('getParam',$scriptProperties,'galItem');
    if (!empty($_REQUEST[$getParam])) { $curItem = (int)$_REQUEST[$getParam]; }
}
if (empty($curItem)) return '';
$album = $modx->getOption('album',$scriptProperties,1);
if ($modx->getOption('checkForRequestAlbumVar',$scriptProperties,true)) {
    $albumRequestVar = $modx->getOption('albumRequestVar',$scriptProperties,'galAlbum');
    if (!empty($_REQUEST[$albumRequestVar])) $album = $_REQUEST[$albumRequestVar];
}
// We pass the album name/ID to an &album property and find the gallery object
if (!is_int($album)) {
    $gallery = $modx->getObject('galAlbum',array('name' => $album));
    if ($gallery instanceof galAlbum)
        $album = $gallery->get('id');
}
$c = $modx->newQuery('galAlbumItem');
$c->innerJoin('galItem','Item');
$c->where(
    array(
        'album' => $album,
    )
);
$c->select(
    array(
        'galAlbumItem.*',
        'Item.*',
    )
);
$c->sortby('rank','asc');
$collection = $modx->getCollection('galAlbumItem',$c);
$items = array();
foreach ($collection as $i) {
    $items[] = $i->toArray();
}
$continue = true;
$i = 0; $prev = array(); $cur = array(); $next = array();
while ($continue) {
    $prev = $cur;
    $cur = $items[$i];
    if ($cur['id'] == $curItem) {
        $next = $items[$i+1];
        $continue = false;
    }
    $i++;
}
$first = $items[0];
$last = $items[count($items)-1];
$phs['galitem.cur.'] = $cur;
$phs['galitem.prev.'] = $prev;
$phs['galitem.next.'] = $next;
$phs['galitem.first.'] = $first;
$phs['galitem.last.'] = $last;
$modx->setPlaceholders($phs);
return '';

?>

3) Make chunk - getPageGallery

[[!getPage? &elementClass=`modChunk` &element=`galleryPage` &limit=`15` &pageVarKey=`page` &totalVar=`gallery.total`]]
<div class="container gallery-pagi nopad">
  <div class="row no-gutters">
    <div class="col-md-12">
      <ul>[[!+page.nav]]</ul>
    </div>
  </div>
</div>

4) Make chunk - galleryPage

<div class="row gallery-albums nopad no-gutters">
[[!Gallery? 
&limit=`[[+limit]]`
&start=`[[+offset]]`
&album=`Name Of Album`
&thumbHeight=`300`
&thumbWidth=`381`
&thumbTpl=`galleryPageThumbTpl` 
&imageWidth=`2000` 
&imageHeight=`2000` 
&imageQuality=`100`
]]
</div>

5) Make chunk - galleryPageThumbTpl
(if not wanting fancybox integration, remove the relevant classes from the < a >)

 

 <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>

6) Add these Calls to the Gallery Page

 
[[!Gallery? &album=`Name of Album` &thumbTpl=`x` ]]
[[$getPageGallery]]

7) A little CSS to get the Pagination Styles started (modify to suit)

 
.gallery-pagi ul {margin: 2em auto;text-align:center;list-style-type:  none;padding:  0;}
.gallery-pagi ul li {display: inline-block;margin: 0.8em 0;}
.gallery-pagi ul li a{color:#000;text-decoration:none;background:#e4e4e4;padding:10px 20px;margin: 5px;border:solid 2px transparent;}
.gallery-pagi ul li a:hover{color:#000000;text-decoration:none; background:#e4e4e4;border:solid 2px #207ec2;}
.gallery-pagi ul li a.active{color:#fff;text-decoration:none; background:#3075ae;padding:10px 20px;margin:5px;border:solid 2px transparent;}
.gallery-pagi #first,#last,#prev,#next {display:none;}/* To hide these buttons, need to modify the getPage template properties */

/*CSS FOR THE GALLERY - OPTIONAL */

.gallery-albums {display:-webkit-box;display:-ms-flexbox;display:flex;}
.gallery-thmb {-webkit-box-flex:1;-ms-flex:1 1 20%;flex:1 1 20%;}
.gallery-thmb > a {border: 1px solid #f3f3f3;/* border-radius: 3px; */display: block;overflow: hidden;position: relative;float: left;}
.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: 0;opacity: 0;position: absolute;top: 0;bottom:0px;right:0px;margin: auto;-webkit-transition: opacity 0.3s ease 0s;transition: opacity 0.3s ease 0s;background: #dc2032;padding: 5px;border-top-left-radius: 25px;}