One little step from success...javascript alt

Question

I want my Facebook sharer in Fancybox to catch alt of an image and place it as Title of link.

With this code below, I'm getting "undefined" title, and the rest is fine.

What's wrong with it?

    $(".fancybox").fancybox({
    beforeShow : function() {
        var alt = this.element.find('img').attr('alt');

        this.inner.find('img').attr('alt', alt);

        this.title = alt;
    }
});

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        beforeShow: function () {
            if (this.title) {
                // New line
                this.title += '<br />';

                // Add tweet button
                this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> ';

                // Add FaceBook like button
                this.title += '<a href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=' + this.href + '&p[title]=' + this.alt + '&p[images][0]=' + this.href + '&p[summary]=My website summary">Facebook</a> ;'
            }
        },
        afterShow: function() {
            // Render tweet button
            twttr.widgets.load();
        },
        helpers : {
            title : {
                type: 'inside'
            }
        }  
    });

This is the code for images:

<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a>


<div class="hidden">
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a>
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a>
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a>
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a>
</div>

Basically hidden class is used to hide all images except the one on the top, however they are still browsable through Fancybox.

---

ANOTHER EDIT:

I have added div over the first image in order to test it

    <div class="fancybox"><a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a></div>

What happens - If I will leave the alert, it pops up with proper title. However, when I click on image, only picture shows up without social buttons.

Answer 1

The alt attribute of an image is not available from inside Fancybox and can't be passed to it either (without adapting fancybox.js). That's why this.alt in your second call to beforeShow() returns undefined.

You would need to use another method to pass the desired string to your Facebook link. If the alt text is the same as the title text, how about doing something like:

 if (this.title) {

            // pass original title to new variable
            var originalTitle = this.title;         

            // New line
            this.title += '<br />';

            // Add tweet button
            this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> ';

            // Add FaceBook like button ## using originalTitle
            this.title += '<a href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=' + this.href + '&p[title]=' + originalTitle + '&p[images][0]=' + this.href + '&p[summary]=My website summary">Facebook</a> ;'
        }

The alt attribute is not allowed in anchor tags - is there any reason for it being there?

Answer 2

This may be a misuse of the http://api.jquery.com/element-selector/.

If the tag is a child (nth level) of an element with the .fancybox class, and you are trying to get the 'alt' attribute of that tag, then I would try omitting the element command.

var alt = $(this).find('img').attr('alt');

Here is an example:

http://jsfiddle.net/benashby/avGk6/

Note: if the img you are after is a 1st level child of the fancybox div, it would be easier on the cliet to use the http://api.jquery.com/children/ command or some derivation of it.