lightbox для 3.1.4

[Trotor 27]

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

Возможно ли это как то пофиксить?

[siv1987 2628]

Если речь о инлайн изображений то в 3.4 изображения находятся внутри спана

Парсится ббкод в \admin\sources\classes\bbcode\custom\defaults.php, строка

 

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

[Trotor 27]

Если речь о инлайн изображений то в 3.4 изображения находятся внутри спана <span rel='lightbox'><img src...></span>

Парсится ббкодв в \admin\sources\classes\bbcode\custom\defaults.php, строка

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

[Trotor 27]

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

 

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

2. У приатаченных изображениях есть кнопка Сохранить (открывает изображения в новой вкладке), а у остальных нет :(

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

[siv1987 2628]

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

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

 

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.

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

Для изображений, родительский элемент которых является ссылка и не имеет расширение изображения лайтбокс не добавляется.

[siv1987 2628]

ПС.

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

[Trotor 27]

Самый простой вариант добавить 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][/url]

[siv1987 2628]

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

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

img.getAttribute('src') заменить на img.getAttribute('data-src') || img.getAttribute('src')

[Trotor 27]

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

img.getAttribute('src') заменить на img.getAttribute('data-src') || img.getAttribute('src')

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

 

Вот ваш код из

[siv1987 2628]

Вот ваш код из

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

[Trotor 27]

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

Не понял.

[Trotor 27]

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

[siv1987 2628]

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

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

[Trotor 27]

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

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

[Trotor 27]

Всё оказалось просто.

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