Fancybox2: расположение и формат заголовка

Question

Просто начинаем с Fancybox2.

Демонстрационная версия http://webdesignandsuch.com/posts/fancybox-download/fancyBox2/, с которой я играю, имеет заголовок в виде черного прямоугольника по центру с белым шрифтом, выровненного на одну линию под изображением.

Я хочу показать область заголовка в пределах нижнего поля (т. Е. Черный текст на белом фоне), чтобы независимо от его высоты он увеличивался в соответствии с общим полем изображения и не попадал в область изображения.

Я также хотел бы показать 'Изображение 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.