Fancybox2:标题位置和格式 [英] Fancybox2: Title positioning and format

问题描述

刚开始使用Fancybox2.

Just getting started with Fancybox2.

演示 http://webdesignandsuch.com/posts/fancybox-download/fancyBox2/我正在玩的标题是一个居中的黑框，带有白色字体，在图像下方对齐一行.

The demo http://webdesignandsuch.com/posts/fancybox-download/fancyBox2/ I am playing with has the title as a centred black box, with white font, aligned one line below the image.

我想在底部空白处(即白色背景上的黑色文本)显示我的标题区域，以便无论其高度如何扩展，以适合图像的整体空白，而不会进入图像区域.

I want to show my title area within the bottom margin (ie black text on white background) so that whatever its height it expands to fit within the overall margin of the image and does not ingress into the image area.

我还要在标题区域的最后一行显示"y的x幅图像".

I would also like to show 'Image x of y' on final line of the title area.

任何人都可以给我一个简单的指针，指出要实现此功能需要更改哪些CSS或设置.

Can anyone give me a simple pointer as to which CSS or settings I need to change to achieve this.

谢谢

mcl

推荐答案

使用此脚本:

<script type="text/javascript">
 $(document).ready(function() {
  $(".fancybox").fancybox({
   helpers : { 
    title : { type : 'inside' }
   }, // helpers
   afterLoad : function() {
    this.title = (this.title ? '' + this.title + '<br />' : '') + 'Image ' + (this.index + 1) + ' of ' + this.group.length;
   } // afterLoad
  }); // fancybox
 }); // ready
</script>

如果使用class="fancybox"在链接上设置title属性，它将在第一行显示标题，在最后一行显示'Image x of y'.如果您未指定任何标题，则只会显示"Image x of y".

If you set the title attribute on your links with class="fancybox", it will display the title on the first line(s) and 'Image x of y' in the final line. If you didn't specify any title, only 'Image x of y' will be displayed.

更新:对于v2.0.6 +，请使用beforeShow而不是afterLoad.

UPDATE: For v2.0.6+ use beforeShow instead of afterLoad.

这篇关于Fancybox2:标题位置和格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！