0

我想要一个 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'
            }
        }
    });

有任何想法吗？

4

1 回答 1

1

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

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

然后你的幻想框将有一个类的 div，fancybox-title其中包含一个h1带有你的标题的元素和一个元素，它p是你的li. 我的示例的问题是，children它将返回作为元素子元素的每个段落li元素。因此，如果您的段落不止一个，li它会尝试将它们全部抓取。我建议重组 HTML，这样您的花式框标题中就可以有多个块级元素。将段落包含在具有特定类的 div 中，并将该类用作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'
            }
        }
    });

当然，您可以用h1您认为最合适的任何内容替换。将样式添加到您的 CSS 文件的标题和段落中，您就可以开始了 (.fancybox-title h1 {}和.fancybox-title p {})。

于 2013-02-18T17:23:18.667 回答