Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-06-29T08:31:40.807Z
Answers.Text: 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!
Answers.UserDisplayName: Romain P.
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-06-28T14:59:28.703Z
Answers.LastActivityDate: 2016-06-28T14:59:28.703Z
Answers.UserDisplayName: Matt P
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-06-17T09:02:58.520Z
Comments.Text: 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!
Comments.UserDisplayName: carlcs
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-06-17T09:38:13.873Z
Comments.Text: Why look for complicated when it can be simple. I will do that, thank you!
Comments.UserDisplayName: Romain P.
Tags: <redactor><image><richtext>
Title: Using the Redactor rich text field, how can I dynamically wrap my images with a fancyBox link (with attributes as parameters)?
ThreadText: # 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!  
  
  ---
  
  