Fancybox 2自定义标题和标题[来自A（标题）和IMG（alt） [英] Fancybox 2 Custom Titles and Captions [from A(title) and IMG(alt]

问题描述

我正在尝试使用带有fancybox 2的图像alt标签中的标题和标题...出于某种原因我似乎无法使用...

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').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');
                },
            },
        },

    });

来自$（this）.attr（'title'）的标题工作，来自$（this）的字幕.children（'img：first'）。attr（'alt'）说未定义...我知道我必须遗漏一些简单的东西...

Titles from $(this).attr('title') work, Captions from $(this).children('img:first').attr('alt') say undefined... I know I must be missing something simple...

推荐答案

如果我理解正确，你想要fancybox标题作为 a title 属性的组合c>标记 img 标记中的 alt 属性。

If I understood right, you want fancybox title as a combination of the title attribute in the a tag + the alt attribute in the img tag.

如果以上是正确的，那么就像html一样

If the above is correct, then having a html like

<a class="fancybox" href="images/01.jpg" title="title anchor 01" ><img src="images/01t.jpg" alt="alt image 01" /></a>

fancybox标题应该说 title anchor 01 alt image 01

the fancybox title should say "title anchor 01 alt image 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

这篇关于Fancybox 2自定义标题和标题[来自A（标题）和IMG（alt）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！