Is there a way to add HTML code inside the 'alt' attribute using fancybox?

Question

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. I'm 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>

Answer 1

The alt attribute (not tag) is by definition plain text, so whatever you insert there will be taken as plain text (not markup) by browsers. If you mess around with code that inserts strings that look like HTML tags into an alt attribute value and then parse and process them as markup, this is no different with similar play with other attributes.

The alt attribute has a well-defined job, to act as a textual replacement for the image when the image is not displayed but e.g. spoken, rendered with a Braille device, or displayed as text. It is thus unproductive to try to use it for other purposes.

Similar considerations apply to the title attribute.

To use data that will be parsed as HTML, it is thus much better to use a custom attribute, specifically a data-* attribute, like data-desc, or whatever you prefer. They have no default processing in browsers or search engines, so they are safe to use for private purposes.