How do you add an html data attribute to the opened image in Fancybox 2?

Question

I would like the opened image to have the attribute data-pin="true".

Here is what I want the html of the opened image to look like:

<img data-pin="true" class="fancybox-image" src="/uploads/gallery_item/image/426/full_ExShow2013_3156.jpg#lightbox0" alt="" >

Here is the JS I have that isn't working:

$('.fancybox').fancybox({
    beforeLoad: function(){
      $(this.element).data("pin", "true")
    }
});

EDIT

HTML of the thumbnail images:

<a class="fancybox" href="/uploads/gallery_item/image/426/full_example.jpg" rel="gallery">
          <img alt="" data-src="/uploads/gallery_item/image/426/example.jpg" src="/uploads/gallery_item/image/426/example.jpg" style="width: 301px; height: 301px;"></div>
</a>

Answer 1

You should rather target the selector of the opened image like :

$(".fancybox").fancybox({
    beforeShow: function () {
        $(".fancybox-image").attr("data-pin", true)
    }
});

See JSFIDDLE

NOTE : Bear in mind that when you use $(this.element), you are actually referring to the link that triggered fancybox but not the open element itself.

Answer 2

Just because your img doesn't have the XML Attribute doesn't mean it don't have the data.

Usually

$(something).data("key", value);

will not add the actual data-key attribute to your XML elements, but they will be stored in the DOM element itself.

If you want to explicitly add the tag attribute you need to do this via $.attr.

$(something).attr("data-key", value);