Question

我希望显示一个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'
            }
        }
    });

有什么想法吗？

Answer 1

fancybox的title属性可以设置为任何有效的HTML。它真的表现得更像是标题而不是正确的标题。所以你可以这样做：

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

然后你的fancybox会有一个div fancybox-title div，其中包含一个h1元素，其中包含你的标题，p元素是你{{1}中段落的副本}}。我的示例的问题是li将返回作为children元素的子元素的每个段落元素。因此，如果您的li中有多个段落，它会尝试抓住所有段落。我建议重构HTML，以便在fancybox标题中可能有多个块级元素。将段落包含在具有特定类的div中，并将该类用作li方法中的选择器，这样您就可以在其中放置多个段落或者您想要的任何段落。如果您不需要多个段落，请为children标记分配一个类，然后在p方法中选择该类。

children

您可以将<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' } } });替换为您认为最合适的任何内容。在CSS文件中为标题和段落添加样式，您最好去（h1和.fancybox-title h1 {}）。

Fancybox中的额外内容

1 个答案: