Как было раньше:
На странице есть слайдер. Когда меняется слайд, обновляется содержимое другого блока.
(тут в основном псевдокод, чтобы никого не запутать слайдером и прочими штуками)
<div class="slider">
<!-- вообще, тут идёт генерация слайдов -->
<div class="slide active" id="1">
<img src="img/1.png">
</div>
<div class="slide" id="2">
<img src="img/2.png">
</div>
</div>
<div id="block"></div>
json подгружался через ajax, но в сути переменная data была такой:
var slider = sliderInit(".slider"); // инициализируем слайдер
slider.onChangeSlide(changeBlock); // привязываем функцию
var data = {
"slides":{
"1":['elem1', 'elem2'], // здесь хранятся id-шники элементов, которые надо подгружать
"2":['elem2', 'elem3']
}
"elements":{
"elem1":{"imgPath":"img/elems/1.png"},
"elem2":{"imgPath":"img/elems/2.png"},
"elem3":{"imgPath":"img/elems/3.png"}
}
}
function changeBlock(){
selectedSlideId = $(".slide.active").attr('id');
var generatedHtml = '';
$.each(data.slides[selectedSlideId], function(){ // перебираем id-шники элементов для активного слайда
generatedHtml += "<img src=' " + data.elems[this].imgPath + " '>";
});
block.html(generatedHtml);
}
Получалось, что при первом слайде block содержал картинки img/elems/1.png и img/elems/2.png, а при втором img/elems/2.png и img/elems/3.png
Ньюанс в том, что слайды могут использовать одни и те же элементы.
Тут ещё дополнительная заморочка в том, что у админа в MODX должна быть и возможность добавить эти картинки элементов (вообще, там помимо картинок есть и другие параметры), и возможность добавить эти элементы в списки для слайдов.
Сам я в MODX только пытаюсь разобраться и не до конца понимаю, как вообще работает тот же MIGX. Уже понял, как с его помощью генерировать слайды, но не могу понять, как можно реализовать подобную структуру.