Question

我对网站设计很陌生，不能编写js脚本。我的CSS非常基础。我正在使用FB 1.3.4并且一切正常，但我想更改图像标题/标题的格式。

我目前有这种格式：
“图像1的10这是这张图片的标题。[照片：史密斯]”

我想要的是这个：
“这是这张图片的标题。[照片：史密斯] 图片1 of 10“

请注意，图像1的10位于新行。我还想在图片标题的末尾和[Photo：A Smith]之间留出额外的空格，虽然我无法弄清楚如何在这里展示

我的脚本是：

<script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox({
                    'transitionIn'      : 'none',
                    'transitionOut'     : 'none',
        'overlayColor'      : '#000000',
        'overlayOpacity'    : '0.90',
                    'titlePosition'     : 'over', 
                    'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' of ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                    }
        });
    });
    </script>

我的fancybox-title-over的CSS是：

.fancybox-title-over {
position: absolute;
bottom: 0;
left: 0;
color: #FFF;
text-align: left;

}

我知道我需要将titlePosition改为'inside'但不能超越它！谁能帮我这个？非常感谢。

Answer 1

对于titleFormat，请替换此行：

'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
 return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' of ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}

用这个：

'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
  return '<span>'+title+'<br />Image ' + (currentIndex + 1) + ' of ' + currentArray.length + (title.length ? ' &nbsp; ' : '') + '</span>';
}

对于您想要的额外空格，您可以在 属性中使用字符代码title（每个额外空格一个），例如

title="This is the caption for this image. &nbsp;&nbsp;[Photo: a Smith]"

另外，将titlePosition更改为inside

'titlePosition' : 'inside'

和最后：我不建议您使用position: absolute设置标题。您可以使用内联CSS声明（在加载fancybox CSS文件之后）将text-align更改为left，但是：

.fancybox-title-inside {
 text-align: left;
}

Fancybox标题/标题

1 个答案: