Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.11.2012, 06:09
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

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

Экспериментировал с обоими, но так и не смог ничего добиться. Прошу подсказать, если решение не очень сложное.
Ответить с цитированием
  #2 (permalink)  
Старый 24.11.2012, 08:10
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

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

Если не получиться, с Вас рабочий пример
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #3 (permalink)  
Старый 24.11.2012, 08:24
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

А можете указать чуть более подробно, что именно мне нужно для реализации этого? Доки смотрел, пока что для меня темный лес.
Ответить с цитированием
  #4 (permalink)  
Старый 25.11.2012, 11:35
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

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


Подошел бы вариант с присоединением описания к заголовку для последующего разделения, думаю с этим я бы справился самостоятельно.
Ответить с цитированием
  #5 (permalink)  
Старый 25.11.2012, 16:38
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

data-desc?
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #6 (permalink)  
Старый 25.11.2012, 18:07
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

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);
	});
});
Ответить с цитированием
  #7 (permalink)  
Старый 25.11.2012, 22:13
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

spo, вопрос не ясен. Да его и вообще нет. Знаков вопроса я не вижу. В этом посте.
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #8 (permalink)  
Старый 26.11.2012, 09:11
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Сообщение от nerv_ Посмотреть сообщение
spo, вопрос не ясен. Да его и вообще нет. Знаков вопроса я не вижу. В этом посте.
Подскажите пожалуйста, как создать новое свойство для присвоения ему атрибута desc, в котором я решил поместить описание.
Ответить с цитированием
  #9 (permalink)  
Старый 22.02.2021, 17:01
Новичок на форуме
Отправить личное сообщение для raxweb Посмотреть профиль Найти все сообщения от raxweb
 
Регистрация: 22.02.2021
Сообщений: 1

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>
Ответить с цитированием
  #10 (permalink)  
Старый 22.02.2021, 17:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от raxweb
При таком подходе мы можем ставить в тексте переносы и форматировать тегами.
чем data-caption не угодил?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
fancybox и AJAX alzasr jQuery 4 19.01.2014 22:45
fancybox на кнопке, которая подгружается засчет $.load Olesya Общие вопросы Javascript 0 16.08.2012 17:27
fancybox + слайдер на jQuery mantgomery jQuery 1 03.02.2012 21:03
Fancybox 1.2 и доп. скрипт Nevil jQuery 3 20.01.2011 12:37
Fancybox: Показать заголовок и описание. Jurasmi jQuery 0 02.04.2010 16:38