title: How do you add an html data attribute to the opened image in Fancybox 2?
body: <p>I would like the opened image to have the attribute <code>data-pin="true"</code>.  </p>
  
  <p>Here is what I want the html of the <strong>opened</strong> image to look like:</p>
  
  <pre><code>&lt;img data-pin="true" class="fancybox-image" src="/uploads/gallery_item/image/426/full_ExShow2013_3156.jpg#lightbox0" alt="" &gt;
  </code></pre>
  
  <p>Here is the JS I have that isn't working:</p>
  
  <pre><code>$('.fancybox').fancybox({
      beforeLoad: function(){
        $(this.element).data("pin", "true")
      }
  });
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>HTML of the thumbnail images:</p>
  
  <pre><code>&lt;a class="fancybox" href="/uploads/gallery_item/image/426/full_example.jpg" rel="gallery"&gt;
            &lt;img alt="" data-src="/uploads/gallery_item/image/426/example.jpg" src="/uploads/gallery_item/image/426/example.jpg" style="width: 301px; height: 301px;"&gt;&lt;/div&gt;
  &lt;/a&gt;
  </code></pre>