fancybox:下一个和上一个项目的标题

Question

我需要制作一个导航"prev"one_answers"next"，但需要在旁边有它们的标题。

例如：

<prev|'上一篇文章标题' nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp；'下一篇文章标题'|next>

我在任何地方都找不到任何相关的帖子，希望有一些天才能帮助我解决这个问题。

我已经研究了缩略图助手，它实际上可以提取下一张和上一张照片，但我还不够精明，无法从代码中提取标题。（甚至不确定方向是否正确）

救命！

Answer 1

您可以使用fancybox tpl选项来自定义类似的导航

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        tpl: {
            next: '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span>next post title | next &gt;</span></a>',
            prev: '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span>&lt; prev | previous post title</span></a>'
        }
    });
}); // ready

然后使用自定义CSS（加载fancybox CSS文件后）根据需要格式化next/prev项，如：

.fancybox-prev span, .fancybox-next span {
    background-image: none; /* remove default arrows */
    bottom: -30px;
    color: #000 !important;
    top: auto;
    width: 100%;
}

请参阅JSFIDDLE