Question

我在Fancybox插件中使用Bootstrap并尝试获取缩略图ALT属性并将其用作照片下方的标题，如下所示：FancyBox demo

然而，采用这个想法并使用我的Bootstrap演示实现它可以使代码正常工作，除了ALT属性无处seen in action。注意：目前只测试我画廊的第一张照片。

我的代码：

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

我做错了什么？

Answer 1

你有两次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初始化应该工作，但删除不必要的代码会更好

Bootstrap和FancyBox：使用img ALT属性并将其用作标题？

1 个答案: