Bootstrap et FancyBox: Prendre l'img ALT attribut et l'utiliser comme une légende?

Je suis en utilisant Bootstrap avec le plugin Fancybox et essayer d'obtenir une vignette de l'attribut ALT et de l'utiliser comme une légende en dessous de la photo comme suit: FancyBox démo

Cependant, de prendre l'idée et de la mettre en œuvre avec mon Bootstrap démo obtient le code fonctionne très bien, sauf que l'attribut ALT est nulle part pour être vu dans l'action. Remarque: Seuls les tests de la première photo de ma galerie pour le moment.

Mon code:

<a class="thumbnail fancybox" rel="lightbox" href="http://placehold.it/400x400.png">
    <img class="img-responsive" alt="First title here" src="http://placehold.it/200x200" />
    <div class="text-center">
        <small class="text-muted">Image Title</small>
    </div> <!-- text-center /end -->
</a>

Le script en bas de ma page est:

<script>
$(document).ready(function(){
    $('.fancybox').fancybox();
});
</script>

<script>

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

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

        this.title = alt;
    }
});

</script>

Ce que je fais mal?

InformationsquelleAutor redshift | 2014-02-12