Название / подпись Fancybox

Question

Я очень новичок в дизайне сайтов и пока не могу писать js-скрипты. Мой CSS довольно прост. Я использую FB 1.3.4, и все работает нормально, но я хочу изменить формат заголовка / заголовка изображения.

У меня сейчас есть этот формат:
«Изображение 1 из 10 Это подпись к этому изображению. [Photo: a Smith]»

Я хочу вот что:
«Это подпись к этому изображению. [Фото: Смит]
Изображение 1 из 10 "

Обратите внимание, что изображение 1 из 10 находится на новой строке. Я также хотел бы получить дополнительные пробелы между концом подписи к изображению и [Фото: Смит], хотя я не могу понять, как это показать здесь

Мой скрипт:

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

Мой CSS для fancybox-title-over:

.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.   [Photo: a Smith]"

Также измените titlePosition на inside, например

'titlePosition' : 'inside'

и, наконец,не советовал бы вам установить название с помощью position: absolute.Вы можете изменить text-align на left с помощью встроенного CSS-объявления (после загрузки CSS-файла fancybox), используя:

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