Обновление доп полей изображения (ms2Gallery)

Всем доброго времени суток. Возникли трудности в эксплуатации ms2Gallery.
Дело вот в чем, при установке дополнения в админке появляется возможность добавлять ресурсу изображения, а изображениями можно добавлять доп. поля (name,description,alt,add и т.д.)
Вопрос, как вывести эти поля через плейсхолдеры например ниже изображения — понятно. Вопрос, как сделать так, что бы эти поля обновлялись при клике на изображение?

Почесав немного репу получилось сделать небольшие изменения в defoult.js (в js у меня не 80 левел, как хотелось бы «отцу основателю»)

var imageName = gallery.find('.mainImageName');
				var imageDesc = gallery.find('.mainImageDesck');
				
				var image = $(this).find('img');
				if (image.length) {
					main.attr('title', image[0].title)
						.attr('alt', image[0].alt);
					imageName.text(image[0].title);
					imageDesc.text(image[0].alt);
				}

т.е. под фоткой у меня есть два элемента () с классами mainImageName и mainImageDesck соответственно. При клике в них кидается title и alt (которые вытягиваются спец для фото, как я понял). А вот откуда тянутся эти title и alt, и как оттуда же вытянуть другие значения для фото — не знаю. Подскажите пожалуйста…

Evgeny Tarasov

23 января 2016, 07:27

2 188

Комментарии: 2

Василий Наумкин

23 января 2016, 10:55

Отвечает «отец-основатель», который отказывается обучать javascript всех желающих в техподдержке дополнения.

Я действительно не понимаю, в чём может быть проблема вывести какие-то значения в чанке, а потом скопировать их через javascript.
Если это получается сделать с title и alt, что мешает это сделать с другими элементами? Очевидно, вы просто не знаете, как работать с jQuery.

В моём коде title и alt — это атрибуты тега img, поэтому и обращение к ним идёт через image[0].title и image[0].alt. Если рядом с картинкой будет элемент с классом, например, desc, то получить его можно так:

var image = $(this).find('img'); // здесь ищем картинку - это из оригинального кода

var desc = $(this).find('.desc'); // а рядом можно поискать элемент с классом desc
// После этого содержимое элемента desc можно вставить куда угодно. Например, в элемент .mainImageDesc 
var imageDesc = gallery.find('.mainImageDesc');
imageDesc.text(desc.text());

Это весь нужный javascript код. 80 lvl не требуется даже близко.

Чтобы всё работало, нужно не забыть вывести описание на страницу:

<div class="span2 col-md-2">
	<a href="[[+360x270:default=`[[+url]]`]]" class="thumbnail" data-image="[[+url]]">
		<img src="[[+120x90]]" alt="[[+alt]]" title="[[+name]]" width="120" height="90">
		<div class="desc" style="display:none;">[[+description]]</div>
	</a>
</div>

Я вывожу его в скрытом виде, чтобы не мешало.

А еще нужно предусмотреть блок для вывода текста в главной картинке

<div class="ms2Gallery">
	<a rel="fancybox" href="[[+url:default=`/assets/ms2gallery/minishop2/img/web/ms2_big.png`]]" target="_blank">
		<img src="[[+360x270:default=`/assets/components/ms2gallery/img/web/ms2_medium.png`]]" width="360" height="270" alt="[[+alt]]" title="[[+name]]" class="mainImage" />
	</a>
	<div class="mainImageDesc">[[+description]]</div>
	<div class="row">
		[[+rows]]
	</div>
</div>

Как видно, речь исключительно о работе с javascript, никаких особенностей, связанных с ms2Gallery, здесь нет.

Evgeny Tarasov

23 января 2016, 12:48

Спасибо Василию, за столь подробный ответ. Получилось разобраться оч быстро.
Но, Василий, если честно, то мне не понятна была только вот эта строчка

var desc = $(this).find('.desc');

, точнее не мог сообразить куда обратиться, что бы достать элемент с классом .desc.
Мне кажется что парой предложений можно было и в поддержке обойтись… Хотя, может кому еще это пригодится

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Обновление доп полей изображения (ms2Gallery)

Комментарии: 2

Здесь упомянуты