javascript Bootstrap 和 FancyBox：取 img ALT 属性并将其用作标题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21719094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap and FancyBox: Take the img ALT attribute and use it as a caption?
提问by redshift
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
我正在使用带有 Fancybox 插件的 Bootstrap 并尝试获取缩略图 ALT 属性并将其用作照片下方的标题，如下所示：FancyBox 演示
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.
然而，采用这个想法并用我的 Bootstrap 演示实现它可以使代码正常工作，除了 ALT 属性在行动中无处可见。注意：目前只测试我画廊的第一张照片。
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?
我究竟做错了什么？
采纳答案by Steely Wing
You have init fancybox 2 times, try just using the script:
你有 2 次 initfancybox，尝试只使用脚本：
<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：可能将准备好的文档添加到第二个fancybox init应该可以工作，但删除不必要的代码会更好
