Adding Lightbox Support to Anchor

Previously, the images weren't ideal on the blog. While they were typically large enough if viewing it on a desktop computer, it didn't work great on phones, because you couldn't expand the images in any way. For Dog-a-Day, in viewing previous images I used a lightbox solution called FancyBox. They recently released their 3rd version which was mobile first, so I figured I'd add it to the blog.

Adding support was remarkably easy. First, I added the import scripts below:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>

to the footer.php file of the theme after I load in jQuery. Then, I just had to adapt the markdown.php script in Anchor to add the proper tags around it. This was done by simply appending the line $result = "<a data-fancybox='gallery' href='$url'>$result</a>"; in the '_doImages_inline_callback' function in the anchor/libraries/markdown.php file.

Above is a sample image, that you can use to test the new lightbox display.