Fancybox: заголовок + описание
Здравствуйте.
Использую скрипт галереи Fancybox. Захотелось добавить к картинкам помимо заголовка title еще и описание. В интернете вопрос уже обсуждался и мне удалось найти 2 решения. В первом (http://artw.ru/company/blog/ys/127/) заголовок и описание передаются в title но разделены каким-нибудь маркером. И второй немного с другой задачей (http://stackoverflow.com/questions/9...itle-attribute). Экспериментировал с обоими, но так и не смог ничего добиться. Прошу подсказать, если решение не очень сложное. |
|
А можете указать чуть более подробно, что именно мне нужно для реализации этого? Доки смотрел, пока что для меня темный лес.
|
Подскажите пожалуйста, как создать новое свойство для присвоения ему атрибута desc, в котором я решил поместить описание.
Структура HTML: <a class="fancybox" rel="gallery-1" href="img/pic-1.png" title="Заголовок" desc="Описание"><img src="img/1.png" alt="" /></a> Следующий код заменяет заголовок описанием:
$(document).ready(function() {
$(".fancybox").each(function(){
$(this).fancybox({
title: $(this).attr('desc')
});
})
});
Подошел бы вариант с присоединением описания к заголовку для последующего разделения, думаю с этим я бы справился самостоятельно. |
data-desc?
|
data()?
Чтото не получается.
$(document).ready(function() {
$(".fancybox").each(function(){
var desc1 = $(this).attr("desc");
$(this).fancybox({
nextEffect: 'fade',
prevEffect: 'fade',
});
$(this).data("desc", {
op: desc1;
});
$("div.fancybox-skin").text($(this).data("desc", op);
});
});
|
spo, вопрос не ясен. Да его и вообще нет. Знаков вопроса я не вижу. В этом посте.
|
Цитата:
|
FancyBox на увеличенной картинке отобразить формтированный текст
>> Захотелось добавить к картинкам помимо заголовка 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>
|
Цитата:
|
| Часовой пояс GMT +3, время: 15:48. |