<p>I managed to achieve this a while back within ExpressionEngine. The approach would be the same...</p>

<p>I used this Javascript:</p>

<pre><code>$(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 : {}
        }
    });

});
</code></pre>

<p>From memory, this worked on all  tags within .</p>

CC BY-SA 3.0
2016-06-29T08:31:40.807Z
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 P.
CC BY-SA 3.0
2016-06-28T14:59:28.703Z
2016-06-28T14:59:28.703Z
Matt P
<p>I'm using fancyBox (from fancyApps, <a href="http://fancyapps.com/fancybox/" rel="nofollow">http://fancyapps.com/fancybox/</a>), 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 :</p>

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

<p>I tried to add formatting tags to Redactor (cf. <a href="https://imperavi.com/redactor/examples/formatting-add/" rel="nofollow">https://imperavi.com/redactor/examples/formatting-add/</a>) 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.</p>

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

<p>I also tried the Retcon plugin (<a href="https://github.com/mmikkel/RetconHTML-Craft" rel="nofollow">https://github.com/mmikkel/RetconHTML-Craft</a>) 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.</p>

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

<p>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.</p>

CC BY-SA 3.0
2016-06-17T09:02:58.520Z
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
CC BY-SA 3.0
2016-06-17T09:38:13.873Z
Why look for complicated when it can be simple. I will do that, thank you!
Romain P.
<redactor><image><richtext>
Using the Redactor rich text field, how can I dynamically wrap my images with a fancyBox link (with attributes as parameters)?
# Using the Redactor rich text field, how can I dynamically wrap my images with a fancyBox link (with attributes as parameters)?

(Asked by: username_0 on 2016-06-17)

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.

**Tags:** redactor, image, richtext
> **Comments:**
> **username_1**: 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!  
> **username_0**: Why look for complicated when it can be simple. I will do that, thank you!  

---

## 1 answers

### Answer by username_2 on 2016-06-28. Score: 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 .

> **Comments:**
> **username_0**: 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!  

---

