Javascript Fancybox中的额外内容

我希望有一个Fancybox效果，可以显示：

图像、标题、段落

它只显示图像和标题

如何在覆盖框中也显示一些文本

<li>
<a class="fancybox" rel="projects" href="<?php the_field('image'); ?>" title="<?php the_title(); ?>">
<img src="<?php the_field('image'); ?>" alt="" />
</a>
<p>Some content...</p>      
</li>

$(".fancybox").fancybox({
        padding : 0,
        nextEffect : 'fade',
        prevEffect : 'fade',
        title : this.title,
        helpers : {
            title   : {
                type: 'outside'
            }
        }
    });

一些内容…


$（“.fancybox”）.fancybox({
填充：0，
下一个效果：“褪色”，
效果：“褪色”，
标题：这个，
助手：{
标题：{
类型：“外部”
}
}
});

---

有什么想法吗？

可以将fancybox的

title

属性设置为任何有效的HTML。它实际上更像一个标题，而不是一个恰当的标题。因此，您可以执行以下操作：

    title = '<h1>' + this.title + '</h1><p>' + this.parent().children('p').html() + '</p>',

---

当然，你可以用你认为最合适的东西来替换

h1

。在CSS文件中添加标题和段落的样式，就可以了（

.fancybox title h1{}

和

.fancybox title p{}

）。

实际上，我越想它，你就可以使用

兄弟姐妹（）

而不是

父（）.children（）

。我习惯在更复杂的列表中使用fancybox，而

parent（）

只是一种习惯。

    <li>
      <a class="fancybox" rel="projects" href="<?php the_field('image'); ?>" title="<?php the_title(); ?>">
        <img src="<?php the_field('image'); ?>" alt="" />
      </a>
      <div class="caption">
        <p>Some content...</p>
      </div>      
    </li>

    $(".fancybox").fancybox({
        padding : 0,
        nextEffect : 'fade',
        prevEffect : 'fade',
        title : '<h1>' + this.title + '</h1>' + this.parent().children('.caption').html(),
        helpers : {
            title   : {
                type: 'outside'
            }
        }
    });