将图像alt用于Fancybox标题

我试图使用图像的title或’alt’属性作为FancyBox的标题出现。 这是相关的代码：

 $("a[rel=fancybox]").fancybox({ 'transitionIn' : 'fade', 'transitionOut' : 'elastic', 'titlePosition' : 'inside', 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return 'Look ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + ''; }, 'autoScale':false, 'mouseWheelNavigation': false, 'onComplete' : function() {$("#fancybox-wrap").unbind('mousewheel.fb');} , }); }); 

Answer 1

在我看来，你使用的是fancybox v1.3.4，不是吗？

要了解fancybox的标题在该版本中的工作原理， 请查看此文章 。

要从缩略图的alt属性设置fancybox标题，请使用API​​选项titleFromAlt 。 您可以从这篇文章中学习如何使用它

Answer 2

我做了这样的事（版本：1.3.4）

  $("#modal_informations a[rel='fancy']").fancybox({ 'titleFormat': function(title, currentArray, currentIndex, currentOpts) { if ($(currentArray[currentIndex]).find('img').length > 0) { return '' + (currentIndex + 1) + ' / ' + currentArray.length + ' ' + $(currentArray[currentIndex]).find('img').attr('alt') + ''; } return '' + (currentIndex + 1) + ' / ' + currentArray.length + ''; } }); 

Answer 3

 jQuery("a.fancybox").fancybox({ 'titlePosition':'inside', 'titleFormat': fancyTitle }); 

//在fancybox内部获取img alt并使用img alt inside覆盖标题（dom保持不变，只有fancybox中的可见文本被更改）

 function fancyTitle(title, currentArray, currentIndex, currentOpts){ // get current href of a (target image) var currHref = jQuery(currentArray[currentIndex]).attr('href'); // select a by target img url return jQuery('a[href="'+currHref+'"]').find('img').attr('alt'); }