BaguetteBox on WordPress without Plugins

Tech | 0 comments

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="" integrity="sha512-7KzSt4AJ9bLchXCRllnyYUDjfhO2IFEWSa+a5/3kPGQbr+swRTorHQfyADAhSlVHCs1bpFdB1447ZRzFyiiXsg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="" 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);
    // Run baguetteBox on the entire body'.baguetteBoxItem');


Want to see it at work? Right here.


Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.