Bootstrap and FancyBox: Take the img ALT attribute and use it as a caption?

Question

I'm using Bootstrap with the Fancybox plugin and trying to get a thumbnail ALT attribute and use it as a caption below the photo like so: FancyBox demo

However, taking that idea and implementing it with my Bootstrap demo gets the code working fine except that the ALT attribute is nowhere to be seen in action. Note: Only testing the first photo of my gallery at the moment.

My 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>

The script at the bottom of my page is:

<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>

What am I doing wrong?

Answer 1

You have init fancybox 2 times, try just using the script:

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

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

                this.title = alt;
            }
        });
    });
</script>

REMOVE this:

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

---

PS: may be add document ready to the second fancybox init should work, but remove the unecessary code will be better