Is there a way to add adding HTML code inside the 'alt' attribute either in the html code or through java-script using fancybox?

Is there a way to add adding HTML code inside the 'alt' attribute either
in the html code or through java-script using fancybox?

I am trying to see if it is possible to add html code inside the 'alt' tag
of an image either through the html or using some kind of javascript. I am
using fancybox as my image gallery. Im trying to use fancybox as a form to
display an image and on the description of the image, add information with
style (like bullet points and breaks) and also add a button that will take
you to a different page. Currently i have the button working but that
button is in the javascript so every fancybox image has that button and
the same url. And i want to have different links to each button on each
image.
Here is the javascript that i have that currently displays the alt text
under the image in the fancybox.
$(".fancybox").fancybox({
padding : 0,
beforeShow: function () {
this.title = $(this.element).attr('title');
this.title = '<h4>' + this.title + '</h4>' + '<div
style="width:100%; height: 150px; overflow: auto;">' +
$(this.element).parent().find('img').attr('alt') + '<a
class="button button-small"
href="http://www.google.com"> Sign Up </a>' +
'</div>';
},
helpers : {
title : { type: 'inside' },
}
});
The html in the index.html for that fancybox is:
<li class="item-thumbs span3 design">
<!-- Fancybox - Gallery Enabled - Title -
Full Image -->
<a class="hover-wrap fancybox"
data-fancybox-group="gallery" title="The
City"
href="_include/img/work/full/image-01-full.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb
font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img
src="_include/img/work/thumbs/image-01.jpg"
alt="Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Phasellus
quis elementum odio. Curabitur
pellentesque, dolor vel pharetra mollis.">
</li>