3

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.

  • 5
    Please do yourself a favor and don't use the image functionality of the Redactor field type. With a Matrix field and a dedicated "Image" block type all what you're trying to achieve here is very easy to set up! – carlcs Jun 17 '16 at 9:02
  • 1
    Why look for complicated when it can be simple. I will do that, thank you! – Romain Poirier Jun 17 '16 at 9:38
1

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 .

  • I was more wondering of a server-side solution, which seems cleaner (so Matrix Field seems the best answer). But thank you, this should be also working! – Romain Poirier Jun 29 '16 at 8:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.