>> Захотелось добавить к картинкам помимо заголовка title еще и описание
У меня стояла подобная задача.
Мне было необходимо разместить текст под миниатюрами и такой же текст под увеличенным изображением.
Посмотрите решение http://aceweb.ru/articles/ajax/fancybox-caption.php
Там же пример скрипта с возможностью скачать (
http://aceweb.ru/articles/ajax/examp...ox-caption.zip).
Пример
Суть в том, что текст надписей к миниатюрам и текст надписей к увеличенным изображениям мы ставим не в атрибуты (например, title), а в тег span. А потом функцией этот текст переносим в caption (надпись). При таком подходе мы можем ставить в тексте переносы и форматировать тегами.
Скрипт:
<!DOCTYPE html><html><head></head><body>
<!--Подключаем скрипты для работы fancybox-->
<link rel="stylesheet" type="text/css" href="fancybox_3-5-7.css" media="screen">
<script type="text/javascript" src="jquery_3-5-1.min.js"></script>
<script type="text/javascript" src="fancybox_3-5-7_min.js"></script>
<!--Показываем нашу галерею-->
<table>
<tr>
<td><a data-fancybox="images" href="img/1.jpg"><img src="img/1s.jpg"><br>
<span>1111111111<br>Текст 1. Текст 1. Текст 1.</span></a></td>
<td><a data-fancybox="images" href="img/2.jpg"><img src="img/2s.jpg"><br>
<span>2222222222<br>Текст 2. Текст 2. Текст 2.</span></a></td>
<td><a data-fancybox="images" href="img/3.jpg"><img src="img/3s.jpg"><br>
<span>3333333333<br>Текст 3. Текст 3. Текст 3.</span></a></td>
</tr>
</table>
<!--После отображения картинок (галереи), берем текст из span и назначаем его подписью к увеличенной картинке-->
<script type="text/javascript">
$( '[data-fancybox="images"]' ).fancybox({
caption : function( instance, item ) {
return $(this).find('span').html();
}
});
</script>
</body></html>