Форум

spo · #1 (**permalink**) 24.11.2012, 06:09

Здравствуйте.
Использую скрипт галереи Fancybox.
Захотелось добавить к картинкам помимо заголовка title еще и описание.
В интернете вопрос уже обсуждался и мне удалось найти 2 решения. В первом (http://artw.ru/company/blog/ys/127/) заголовок и описание передаются в title но разделены каким-нибудь маркером. И второй немного с другой задачей (http://stackoverflow.com/questions/9...itle-attribute).

Экспериментировал с обоими, но так и не смог ничего добиться. Прошу подсказать, если решение не очень сложное.

nerv_ · #2 (**permalink**) 24.11.2012, 08:10

читайте доки, там все написано.

Если не получиться, с Вас рабочий пример

spo · #3 (**permalink**) 24.11.2012, 08:24

А можете указать чуть более подробно, что именно мне нужно для реализации этого? Доки смотрел, пока что для меня темный лес.

spo · #4 (**permalink**) 25.11.2012, 11:35

Подскажите пожалуйста, как создать новое свойство для присвоения ему атрибута 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')
		});
	})
});

Подошел бы вариант с присоединением описания к заголовку для последующего разделения, думаю с этим я бы справился самостоятельно.

nerv_ · #5 (**permalink**) 25.11.2012, 16:38

data-desc?

spo · #6 (**permalink**) 25.11.2012, 18:07

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);
	});
});

nerv_ · #7 (**permalink**) 25.11.2012, 22:13

spo, вопрос не ясен. Да его и вообще нет. Знаков вопроса я не вижу. В этом посте.

spo · #8 (**permalink**) 26.11.2012, 09:11

Сообщение от nerv_

spo, вопрос не ясен. Да его и вообще нет. Знаков вопроса я не вижу. В этом посте.

Подскажите пожалуйста, как создать новое свойство для присвоения ему атрибута desc, в котором я решил поместить описание.

raxweb · #9 (**permalink**) 22.02.2021, 17:01

>> Захотелось добавить к картинкам помимо заголовка 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>

рони · #10 (**permalink**) 22.02.2021, 17:35

Сообщение от raxweb

При таком подходе мы можем ставить в тексте переносы и форматировать тегами.

чем data-caption не угодил?

Форум

Справочник

Discord чат

Курсы javascript