CODEWITHSUNDEEP
jqueryhtmlxsltfancybox
MsNichols
MsNichols

Reputation: 1133

How to Add Caption to Fancybox-Media box

I have a fancybox-media box displaying vimeo and youtube video's. I need to have a caption below the movie with content about the video. Is this possible? Here's my js:

Fancybox function:

$("#clpbox").click(function () {
    $.fancybox({
        helpers: {
            title: {
                type: 'inside'
            }
        },
        afterLoad: function () {
            this.title = this.title + ' ' + $(this.element).find('img').attr('alt');
        },
        'padding': 0,
        'autoScale': false,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'title': this.title,
        'width': 665,
        'height': 400,
        'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type': 'iframe',
        'swf': {
            'wmode': 'transparent',
            'allowfullscreen': 'true'
        }
    });

    return false;
});

My html/xslt looks like: 

<li>
     <a id="clpbox" alt="{Thumbnail/@AlternateText}" href="http://www.youtube.com/watch?v={YouTubeID}?autoplay=1" target="_blank">
     <xsl:apply-templates select="Thumbnail" mode="imageLink" /></a>
</li>

Would it just be a matter of adding a div or does fancybox have something built in that I can reference to create an abstract or content area below the video?

Upvotes: 1

Views: 1101

Answers (1)

Siva Charan
Siva Charan

Reputation: 18064

Your JQuery seems to be fine. The problem is with your HTML. HTML doesn't contains title attribute on <a> tag.

<li>
    <a id="clpbox" title="{Thumbnail/@AlternateText}" alt="{Thumbnail/@AlternateText}" href="http://www.youtube.com/watch?v={YouTubeID}?autoplay=1" target="_blank">
        <xsl:apply-templates select="Thumbnail" mode="imageLink"/>
    </a>
</li>

Refer the sample LIVE DEMO

Sample Code:

$(".fancybox").fancybox({
    iframe: {
        preload: false
    },
    margin: [20, 60, 20, 60],
    helpers: {
        title: {
            type: 'inside'
        },
        overlay: {
            showEarly: false
        }
    }
});

Refer another sample LIVE DEMO

Upvotes: 1

Related Questions