Javascript Bootstrap和FancyBox：将img ALT属性用作标题？

我将引导与Fancybox插件一起使用，并尝试获取缩略图ALT属性，并将其用作照片下方的标题，如下所示：

然而，接受这个想法并用我的引导演示实现它，代码运行良好，只是ALT属性不存在。注意：目前仅测试我的图库的第一张照片

我的代码：

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

我的页面底部的脚本是：

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

---

我做错了什么？

您有两次init fancybox，请尝试使用以下脚本：

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

删除此项：

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

---

PS：可以将文档添加到第二个fancybox init中，但删除不必要的代码会更好

taht才是解决方案！