I wanted lightboxes for images on my site. I tried a plugin but it seemed to work inconsistently, probably due to how I have my site setup.

My next option was to add a custom class to links by hand, but that seemed awful. Finally, with an assist from ChatGPT, I came up with this code and leave it here for someone else.

It scans the entire page for any a tags that have an img inside of them, where the a href has an image filename in it (jpg, jpeg, png, webp). I have the code placed in the footer of all pages to ensure it is non-blocking.

<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.js" integrity="sha512-7KzSt4AJ9bLchXCRllnyYUDjfhO2IFEWSa+a5/3kPGQbr+swRTorHQfyADAhSlVHCs1bpFdB1447ZRzFyiiXsg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.css" integrity="sha512-NVt7pmp5f+3eWRPO1h4A1gCf4opn4r5z2wS1mi7AaVcTzE9wDJ6RzMqSygjDzYHLp+mAJ2/qzXXDHar6IQwddQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script type="text/javascript">
  
  var j = jQuery.noConflict();
  
j(window).on("load", function() {
    console.log("Window loaded");
    
    // Filter and add the class to eligible <a> tags
    var links = j('body a:has(img)').filter(function() {
        var matches = /\.(jpg|jpeg|png|webp)$/i.test($(this).attr('href'));
        console.log("Checking link: ", $(this).attr('href'), matches);
        return matches;
    });

    console.log("Number of matching links: ", links.length);
    links.addClass('baguetteBoxItem');
    
    // Run baguetteBox on the entire body
    baguetteBox.run('.baguetteBoxItem');
});

</script>		

Want to see it at work? Right here.