lightbox для 3.1.4 - Дизайн и модификация Invision Power Board

Перейти к содержимому

 

Правила раздела

Здесь обсуждаются вопросы по настройке и администрированию форумов IPB 3.x.
Пожалуйста, не оффтопьте, если зашли сюда случайно, и обратите внимание на соседние разделы.
Установка, настройка и обслуживание форумов IPB 2.x.
Оформление форумов, включая верстку скинов.
Размещение рекламы на форумах.
SEO оптимизация форума.
Техническая поддержка наших скинов и модов.

СвернутьПрикрепленные теги

Теги не найдены

  • 2 Страниц +
  • 1
  • 2

lightbox для 3.1.4

#1 Пользователь не на сайте   Haktar ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 925
  • Регистрация: 14-Июнь 09
  • Репутация: 21
  • IPB version:3.1.x
 

Отправлено 10 Декабрь 2016 - 00:13

Заметил что в версии IPB 3.4 все изображения открываются в lightbox. Тогда как в 3.1.4 в lightbox открываются лишь приаттаченные изображения.
Возможно ли это как то пофиксить?
0

#2 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 9 066
  • Регистрация: 20-Март 09
  • Репутация: 2 433
  • IPB version:3.1.x
 

Отправлено 10 Декабрь 2016 - 00:30

Если речь о инлайн изображений то в 3.4 изображения находятся внутри спана <span rel='lightbox'><img src...></span>
Парсится ббкод в \admin\sources\classes\bbcode\custom\defaults.php, строка

return "<img src='{$content}' alt='{$this->lang->words['bbcode_img_alt']}' class='bbc_img' />";

2

#3 Пользователь не на сайте   Haktar ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 925
  • Регистрация: 14-Июнь 09
  • Репутация: 21
  • IPB version:3.1.x
 

Отправлено 10 Декабрь 2016 - 03:09

Просмотреть сообщениеsiv1987 сказал(а):

Если речь о инлайн изображений то в 3.4 изображения находятся внутри спана <span rel='lightbox'><img src...></span>
Парсится ббкодв в \admin\sources\classes\bbcode\custom\defaults.php, строка

Ура получилось! Спасибо. Пока тестирую, о результатах скажу позднее.
0

#4 Пользователь не на сайте   Haktar ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 925
  • Регистрация: 14-Июнь 09
  • Репутация: 21
  • IPB version:3.1.x
 

Отправлено 11 Декабрь 2016 - 20:22

Всё бы хорошо, но есть несколько нюансов.

1. Как сделать листинг изображений? То есть листинг всех изображений что есть в сообщении. Такое есть у приатаченных изображений.
2. У приатаченных изображениях есть кнопка Сохранить (открывает изображения в новой вкладке), а у остальных нет :(
3. И самое важное - если изображение-превью, то нажимая на него, сразу картинка превью, то есть картинка в ссылке не срабатывает.
0

#5 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 9 066
  • Регистрация: 20-Март 09
  • Репутация: 2 433
  • IPB version:3.1.x
 

Отправлено 11 Декабрь 2016 - 21:29

Просмотреть сообщениеHaktar сказал(а):

Как сделать листинг изображений? То есть листинг всех изображений что есть в сообщении. Такое есть у приатаченных изображений.

Приатаченные элементы являются блоком изображений в ссылках прикрепленные к конкретному сообщению, инлайн изображения - нет. Поэтому они не имеют листинга и не открываются в новых вкладках.

Просмотреть сообщениеHaktar сказал(а):

3. И самое важное - если изображение-превью, то нажимая на него, сразу картинка превью, то есть картинка в ссылке не срабатывает.

Лайтбокс перехватывает событие, поэтому переход по ссылке не сработает. В 3.4 он не добавляется к изображениям в ссылках, но там другой парсер.

Самый простой вариант добавить lightbox через js, парсер форума 3.1 не имеет должного функционала.
Добавить в конце шаблона Темы -> topicViewTemplate

<script type='text/javascript'>
$$('.post_block').each(function(elem){
	var pid = elem.readAttribute('id').replace('post_id_', '');
	elem.select('img.bbc_img').each(function(img){
		var parent = img.up();
		if(parent.tagName.toLowerCase() == 'a'){
			if(/\.(jpe?g|gif|png|bmp)$/.test(parent.href)){
				parent.writeAttribute('rel', 'lightbox['+pid+'] ' + parent.readAttribute('rel').replace('external'));
			}
		}
		else{
			var a = new Element('a', {'rel': 'lightbox['+pid+']', 'href' : img.getAttribute('src')});
			img.wrap(a);
		}
	});
});
</script>

Принцип скрипта следующий:
- если изображение находиться внутри ссылки, к rel ссылке добавляется значение lightbox
- если родительский элемент не является ссылкой, для изображение создается обертка из ссылки с адресом изображения и атрибутом rel lightbox.
Лайтбокс прикрепляется к группируется по ид сообщения, таким образом можно пролистать все изображения одного сообщения, в том числе и приатаченные, есть кнопка сохранить при котором оно открывается в новом окне.
Для изображений, родительский элемент которых является ссылка и не имеет расширение изображения лайтбокс не добавляется.
2

#6 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 9 066
  • Регистрация: 20-Март 09
  • Репутация: 2 433
  • IPB version:3.1.x
 

Отправлено 11 Декабрь 2016 - 22:21

ПС.
Старую правку нужно удалить и сбросить кеш сообщений.
0

#7 Пользователь не на сайте   Haktar ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 925
  • Регистрация: 14-Июнь 09
  • Репутация: 21
  • IPB version:3.1.x
 

Отправлено 11 Декабрь 2016 - 22:35

Просмотреть сообщениеsiv1987 сказал(а):

Самый простой вариант добавить lightbox через js, парсер форума 3.1 не имеет должного функционала.
Добавить в конце шаблона Темы -> topicViewTemplate

Кнопка Сохранить и листинг появился, супер. А вот проблема с изображениями в ссылке так и осталась :(
И ещё после этого скрипта новая проблема появилась - изображения которые в спойлере не показываются, то есть попап-окно пояаляется, но изображения нет.
Вот пример
[URL=http://imtw.ru/uploads/imperiall/load/load1479760397_123-11_battle_of_wenzenbach.jpg][IMG]http://imtw.ru/uploads/imperiall/load/min_load1479760397_123-11_battle_of_wenzenbach.jpg[/IMG][/URL]

0

#8 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 9 066
  • Регистрация: 20-Март 09
  • Репутация: 2 433
  • IPB version:3.1.x
 

Отправлено 11 Декабрь 2016 - 22:45

Просмотреть сообщениеHaktar сказал(а):

И ещё после этого скрипта новая проблема появилась - изображения которые в спойлере не показываются, то есть попап-окно пояаляется, но изображения нет.

Потому что у вас изображения в спойлере не имеют атрибута src, он создается при открытие спойлера из data-src.
img.getAttribute('src') заменить на img.getAttribute('data-src') || img.getAttribute('src')
1

#9 Пользователь не на сайте   Haktar ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 925
  • Регистрация: 14-Июнь 09
  • Репутация: 21
  • IPB version:3.1.x
 

Отправлено 11 Декабрь 2016 - 23:49

Просмотреть сообщениеsiv1987 сказал(а):

Потому что у вас изображения в спойлере не имеют атрибута src, а создается он при открытие спойлера из data-src.
img.getAttribute('src') заменить на img.getAttribute('data-src') || img.getAttribute('src')

Там нет img.getAttribute('src') а есть getAttribute('src')

Вот ваш код из
0

#10 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 9 066
  • Регистрация: 20-Март 09
  • Репутация: 2 433
  • IPB version:3.1.x
 

Отправлено 11 Декабрь 2016 - 23:55

Просмотреть сообщениеHaktar сказал(а):

Вот ваш код из

Заменить в коде выше.
0

#11 Пользователь не на сайте   Haktar ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 925
  • Регистрация: 14-Июнь 09
  • Репутация: 21
  • IPB version:3.1.x
 

Отправлено 12 Декабрь 2016 - 00:18

Просмотреть сообщениеsiv1987 сказал(а):

Заменить в коде выше.

Не понял.
0

#12 Пользователь не на сайте   Haktar ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 925
  • Регистрация: 14-Июнь 09
  • Репутация: 21
  • IPB version:3.1.x
 

Отправлено 12 Декабрь 2016 - 21:47

Обновил скрипт для topicViewTemplate, заменил img.getAttribute('src') на img.getAttribute('data-src') || img.getAttribute('src') в файле, сбросил кеш - в спойлерах так и не появилось :(
0

#13 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 9 066
  • Регистрация: 20-Март 09
  • Репутация: 2 433
  • IPB version:3.1.x
 

Отправлено 12 Декабрь 2016 - 22:13

Просмотреть сообщениеHaktar сказал(а):

в спойлерах так и не появилось

Я тестировал и скрипт создает ссылку-врапер как положено.
0

#14 Пользователь не на сайте   Haktar ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 925
  • Регистрация: 14-Июнь 09
  • Репутация: 21
  • IPB version:3.1.x
 

Отправлено 13 Декабрь 2016 - 00:43

Просмотреть сообщениеsiv1987 сказал(а):

Я тестировал и скрипт создает ссылку-врапер как положено.

А может надо что то изменить в шаблоне include_lightbox_real?
0

#15 Пользователь не на сайте   Haktar ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 925
  • Регистрация: 14-Июнь 09
  • Репутация: 21
  • IPB version:3.1.x
 

Отправлено 13 Декабрь 2016 - 07:33

Всё оказалось просто.
var a = new Element('a', {'rel': 'lightbox['+pid+']', 'href' : img.getAttribute('src')}); надо было заменить на var a = new Element('a', {'rel': 'lightbox['+pid+']', 'href' : img.getAttribute('src') || img.getAttribute('data-src')});
0

Сообщить об этой теме:


  • 2 Страниц +
  • 1
  • 2


Быстрый ответ

  

1 пользователей читают эту тему
0 зарегистрированных, 1 гостей, 0 скрытых


Контактная информация

Вопросы по работе сайта

+7 (917) 501-4765
C 10 до 20 в рабочие дни (время московское)

Техническая поддержка

Контактные данные специалистов

Дизайн форумов

IPB 3.x ¦ IPB 2.x

Бесплатные шаблоны

IPB 3.2 – 3.4 ¦ IPB 3.1 ¦ IPB 3.0 ¦ IPB 2.2 – 2.3 ¦ IPB 2.1 ¦ Клипарт
Лицензия на использование ¦ Ваша поддержка ¦ О проекте
Copyright © 2005-2018 IPBSkins.ru Team
При копировании материалов с сайта
прямая ссылка на источник обязательна