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.