javascript - 来自 img 标签的 Fancybox 标题不是 href

Question

有没有办法从<img>标签而不是<a>标签中提取标题？

例如 HTML：

<a rel="fancybox" href="#">
<img src="ball.jpg" title="this is the caption i want to show in fancybox" alt="alt text here" />
</a>

<a rel="fancybox" href="#">
<img src="ball2.jpg" title="this is the caption2" alt="alt text here" />
</a>

<a rel="fancybox" href="#">
<img src="ball3.jpg" title="this is the caption 3" alt="alt text here" />
</a>

我已经尝试过了，但它不起作用：JQuery：

            $("a[rel=fancybox]").fancybox({
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'titlePosition': 'inside',
                'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                    title = $(this).find("img").attr("title");
                    return '<span>' + title + '</span>';
                }
            });

Answer 1

对于fancybox v1.3.4 只需使用API​​ 选项，基本上你在标签的属性（不是属性）titleFromAlt上设置fancybox 标题，比如altimgtitle

<a rel="fancybox" href="#">
 <img src="ball.jpg"  alt="this is the caption i want to show in fancybox" />
</a>

然后你的脚本：

            $("a[rel=fancybox]").fancybox({
                'transitionIn' : 'elastic',
                'transitionOut': 'elastic',
                'titlePosition': 'inside',
                'titleFromAlt' :  true 
            });

您可以在此处了解有关此选项的更多信息以及 title 在 fancybox v1.3.2+ 中的工作方式

#EDIT：强制title从标签中读取属性，img使用 API 选项onStart，如

        $("a[rel=fancybox]").fancybox({
            'transitionIn' : 'elastic',
            'transitionOut': 'elastic',
            'titlePosition': 'inside',
            'onStart' : function(currentArray,currentIndex){
               var obj = currentArray[ currentIndex ];
               this.title = $(obj).find('img').attr("title");
            }
        });

Answer 2

试试这个：

$("img[title=fancybox]").fancybox({
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'titlePosition': 'inside',
            'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                title = $(this).find("img").attr("title");
                return '<span>' + title + '</span>';
            }
        });

Answer 3

试试这个 -

      $("a[rel=fancybox]").fancybox({
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'titlePosition': 'inside',
            'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                title = $(currentArray[currentIndex]).find('img').attr('title');
                return '<span>' + title + '</span>';
            }
        });

或者你可以只传递参数'titleFromAlt' : true