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>

If you want a more complex fancybox `title` (with html, hyperlinks, etc.), then try using a separated (hidden) html element as in this post http://stackoverflow.com/a/9611664/1055987 — JFK, Sep 17 '13 at 20:14

score 3 · Accepted Answer · answered Sep 17 '13 at 18:09

3

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.

answered Sep 17 '13 at 18:09

Jukka K. Korpela

195,524
37
270
390

@marcopolo : if you want to use (html5) `data-*` attributes, here there are some examples http://stackoverflow.com/a/12357445/1055987 however they may not be suitable for including html tags so see my comment on your question for a better option. – JFK Sep 17 '13 at 20:19
@Jukka: So i did a little research on using data-* attributes and tried it on my website and it worked! Now i can add any html attribute with in the new "data-description" attribute and it displaces it perfectly. In the Javascript file i replaced the: ...$(this.element).parent().find('img').attr('alt') +... with $(this.element).parent().find('img').attr('data-description') + – marcopolo Sep 17 '13 at 22:15
@JFK: thank you for those examples. I will save them for future references. Thank you – marcopolo Sep 17 '13 at 22:19
@marcopolo : instead of this `$(this.element).parent().find('img').attr('data-description')` you could do this `$(this.element).parent().find('img').data('description')` ...it can be much more pron to failure than extra html elements though (some elements inside the `data-caption` attribute may require to be escaped) – JFK Sep 17 '13 at 22:47

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

1 Answers1