Enhance image links on your site with FancyBox

Problem

You have got thumbnails in your body fields that link to larger versions of the image, but you want to avoid setting a class on each of them manually (or confront your customer with the Rich Text Editors settings window).

Solution

Find all links to image files (jpg, png, gif) that originate in the particular ProcessWire installation.

$("[href^='/site/assets/files/']").filter(function() {
    return this.href.match(/.*[jpg|png|gif]$/i);
}).addClass('to-fancy');

Init fancybox on this selection. You can supply an options object.

$('.to-fancy').fancybox();

Resources

Version

1.0.1

View/correct recipe on GitHub

https://github.com/processwire-recipes/Recipes/blob/master/auto-fancybox.md

Author(s)