Isotope and Fancybox Galleries on Blogdown

The Wowchemy theme (formerly Hugo Academic) can ‘tile’ irregularly shaped posts in a grid, using the Isotope Javascript library. In another post I describe how the ‘cascading card’ layout can be used in the Wowchemy’s pages widget (used for ‘posts’, ‘talks’ and ‘publications’). Wouldn’t it be nice to also use the Isotope library for galleries within a post?

Another Javascript library, fancybox can also be used for photo galleries. When a picture has a data-fancybox attribute, then clicking on that photo results in a ‘lightbox’ view of the photo. Photos with the same data-fancybox attribute can be seen in the same lightbox by clicking on the right/left arrows, or using cursor keys.

The example below is taken from my post on the topic of ‘equity’ after visiting Kenya in 2021/2022. The code shown below is encased in a ```{r} ... ``` code chunk.

htmltools::HTML(paste(
'<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"
/>', # for fancybox
'<script 
    src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js">
 </script>', # for fancybox
'<script 
    src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js">
 </script>', # for isotope
'<div 
   class="grid" 
   data-isotope=\'{
     "itemSelector": ".isotope-grid-item",
     "masonry": "{\"columnWidth\": \".grid-sizer\"}",
     "percentPosition": "true",
     "gutter": 0
   }\'
 >',
'  <div id="grid-sizer"></div>',
'  <div class="isotope-grid-item" style="float:left; width: 48%">',
'    <a data-fancybox="gallery" href="./20220114_mothersandchildren.jpg">',
'      <img src="./20220114_mothersandchildren.jpg" style="margin:0px 0px">', 
       # default CSS top/bottom margin is not zero
'    </a>',
'  </div>',
'  <div class="isotope-grid-item" style="float:left; width: 48%">',
'    <a data-fancybox="gallery" href="./20220114_consult.jpg">',
'      <img src="./20220114_consult.jpg" style="margin:0px 0px">',
'    </a>',
'  </div>',
'  <div class="isotope-grid-item" style="float:left; width: 53%">',
'    <a data-fancybox="gallery" href="./20220114_support.jpg">', 
'      <img src="./20220114_support.jpg" style="margin:0px 0px">',
'    </a>',
'  </div>',
'  <div class="isotope-grid-item" style="float:left; width: 43%">',
'    <a data-fancybox="gallery" href="./20220114_disability.jpg">',
'      <img src="./20220114_disability.jpg" style="margin:0px 0px">',
'    </a>',
'  </div>',
'</div>',
#
'<br clear="left"><br>'
))