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，您基本上可以在alt标记的img属性上设置fancybox标题（而不是title属性）像

<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 
            });

您可以详细了解this option and how title works in fancybox v1.3.2+ here

#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

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

3 个答案: