javascript Fancybox 2 自定义标题和字幕 [来自 A(title) 和 IMG(alt])
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9058442/
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
Fancybox 2 Custom Titles and Captions [from A(title) and IMG(alt]
提问by stapler
I'm trying to use title and "captions" from image alt tags with fancybox 2... for some reason I can't seem this to work...
我正在尝试使用带有fancybox 2的图像alt标签中的标题和“标题”......出于某种原因，我似乎无法正常工作......
$('.fancybox').fancybox({
beforeShow : function() {
this.title = '<div class="new-title-title">' + $(this).attr('title') + '</div><div class="new-title-alt">' + $(this).children('img:first').attr('alt') + '</div>';
},
helpers : {
title: {
type: 'inner',
beforeShow: function(opts) {
console.log('beforeShow title helper');
},
},
},
});
Titles from $(this).attr('title') work, Captions from $(this).children('img:first').attr('alt') say undefined... I know I must be missing something simple...
来自 $(this).attr('title') 的标题有效，来自 $(this).children('img:first').attr('alt') 的标题表示未定义......我知道我一定遗漏了一些简单的东西...
回答by JFK
If I understood right, you want fancybox title as a combination of the titleattribute in the atag + the altattribute in the imgtag.
如果我理解正确，您希望fancybox 标题作为标签中的属性+ 标签中的title属性的组合。aaltimg
If the above is correct, then having a html like
如果以上是正确的，那么有一个 html 像
<a class="fancybox" href="images/01.jpg" title="title anchor 01" ><img src="images/01t.jpg" alt="alt image 01" /></a>
the fancybox title should say "title anchor 01 alt image 01"
花式框标题应该说“标题锚01 alt图像01”
you do that with this script:
你用这个脚本做到这一点：
$(document).ready(function() {
$(".fancybox").fancybox({
helpers : {
title: { type: 'inside'}
},
afterLoad: function(){
this.title = this.title + ' ' + $(this.element).find('img').attr('alt');
}
}); // fancybox
}); // ready
回答by fragmentedreality
fiddling with debugger I found out this works:
摆弄调试器我发现这有效：
beforeShow : function() {
var alt = this.element.children[0].alt;
this.title = '<div class="new-title-title">' + alt + '</div>';
},
It is not the most elegant way, but it does what you (and I) want - get the ALT-value from the image.
这不是最优雅的方式，但它可以满足您（和我）的需求 - 从图像中获取 ALT 值。
Regards, Paul
问候， 保罗
回答by Michael Kaufman
I had a similar issue and ended up using a separate title tag for the thumbnail image. seems to work too, though not as dynamic.
我遇到了类似的问题，最终为缩略图使用了单独的标题标签。似乎也有效，虽然没有那么动态。
<a class="fancybox-print" data-fancybox-type="iframe" title="Banking On Fun<p>Bank of America</p><br /><h3>For Bank of America we created print and in-store POP that told how home loans could turn dreams into reality.</h3>"href="template-print01.html"><img class="print" src="images/print.jpg" title="PRINT" alt=""/></a>
回答by Agent Zebra
If you use Fancybox with Angular ng-repeatyou can do something like this, then it also works on text and you don't need an imgtag or the img alttag.
如果你在 Angular 中使用 Fancybox，ng-repeat你可以做这样的事情，那么它也适用于文本，你不需要img标签或img alt标签。
title="<b>{{banner.fancyboxTitle}}</b><br>{{ banner.fancyboxParagraph }}"
