Fancybox2:标题定位和格式

Question

刚刚开始使用Fancybox2.

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

我想在底部边缘内显示我的标题区域(即白色背景上的黑色文本),这样无论它的高度如何,它都会扩展到适合图像的整体边缘,并且不会进入图像区域.

我还想在标题区的最后一行显示'Image x of y'.

谁能给我一个简单的指针,指出我需要改变哪些CSS或设置来实现这一点.

谢谢

MCL

Answer 1

使用此脚本:

<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>

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

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