Using the Redactor rich text field, how can I dynamically wrap my images with a fancyBox link (with attributes as parameters)? I'm using fancyBox (from fancyApps, http://fancyapps.com/fancybox/), and I need to wrap my images added within the Redactor rich text field with a link that had an href to the image source + some attributes as parameters :


an href attribute to specify the image source to open
a data-fancybox-group attribute to specify in which gallery the image
should open
a title attribute to specify the image title in the fancyBox)


I tried to add formatting tags to Redactor (cf. https://imperavi.com/redactor/examples/formatting-add/) which let me add links with .fancybox class, but there's still missing parameters that are required to open the fancyBox that I'm not sure that can be retrieved.

"fancybox": {
    "title": "Add fancyBox link",
    "args": ["a", { "data-fancybox-group": "images-gallery", "class": "fancybox" }]
}


I also tried the Retcon plugin (https://github.com/mmikkel/RetconHTML-Craft) which is very cool and lets me automatically wrap each image with a link with data-fancybox-group but I still can't retrieve and apply the img src + title to the link.

{{ entry.body | retconWrap( 'img', 'a.fancybox') | retconAttr('.fancybox', { 'href':'', 'data-fancybox-group':'images-gallery' }) }}


is there a way to achieve this with one of this two methods ? Or to do this in another way ? This should be very easy for the end user which is a non-programmer.
I managed to achieve this a while back within ExpressionEngine. The approach would be the same...

I used this Javascript:

$(document).ready(function() {
    $(".fancybox").fancybox();

    // Apply FancyBox to images within the body of an article
    $(".articleBody img").on("click", function(){
       $.fancybox($(this).attr("src"),{
           // API options
           padding : 0 // example
       });
    });

    $('.fancybox-media')
        .attr('rel', 'media-gallery')
        .fancybox({
            openEffect : 'none',
            closeEffect : 'none',
            prevEffect : 'none',
            nextEffect : 'none',
            padding : 0,

            arrows : false,
            helpers : {
                media : {},
                buttons : {}
        }
    });

});


From memory, this worked on all  tags within .