@RKey_Prog

Как контролировать количество строк HTML в зависимости от количества элементов MIGX?

Добрый вечер. Есть слайдер, который зависит от количества фотографий. И необходимо вставить его в MODX. В самом MODX настроил Migx на добавление фото. Теперь надо настроить изменение количества input с типом radio в зависимости от количества слайдов в migx. Как сделать такую зависимость? Каждый input должен получать класс slider-1, slider-2 и т.д. в зависимости от количества input. Код слайдера и скрин migx представлены ниже.
<div class="slider">
							<div data-am-fadeshow="next-prev-navigation">
								<!-- Radio -->
								<input type="radio" name="css-fadeshow" id="slide-1" />
								<input type="radio" name="css-fadeshow" id="slide-2" />
								<input type="radio" name="css-fadeshow" id="slide-3" />
								
								<!-- Slides -->
								<div class="fs-slides">
								    [[getImageList? &tvname=`slider` &tpl=`tplsliderItem`]]
								</div>

									<!-- Quick Navigation -->
								<div class="fs-quick-nav">
									<label class="fs-quick-btn" for="slide-1"></label>
									<label class="fs-quick-btn" for="slide-2"></label>
									<label class="fs-quick-btn" for="slide-3"></label>
								</div>
									
									<!-- Prev Navigation -->
								<div class="fs-prev-nav">
									<label class="fs-prev-btn" for="slide-1"></label>
									<label class="fs-prev-btn" for="slide-2"></label>
									<label class="fs-prev-btn" for="slide-3"></label>
								</div>
									
									<!-- Next Navigation -->
								<div class="fs-next-nav">
									<label class="fs-next-btn" for="slide-1"></label>
									<label class="fs-next-btn" for="slide-2"></label>
									<label class="fs-next-btn" for="slide-3"></label>
								</div>
							</div>
						</div>


написать какой-то js код может, который бы принимал количество слайдов и уже в зависимости от этого изменял html. Как вот передать в js количество слайдов.
  • Вопрос задан
  • 48 просмотров
Пригласить эксперта
Ответы на вопрос 1
i__dmitry
@i__dmitry
Weaving a web
Самый простой способ - вызвать getImageList дважды - один раз для вывода input'ов, второй - для вывода слайдов.
У вас получится что-то вроде:
<div class="slider">
              <div data-am-fadeshow="next-prev-navigation">
                <!-- Radio -->
                [[getImageList? &tvname=`slider` &tpl=`tpl.slider.input.row`]]
                
                <!-- Slides -->
                <div class="fs-slides">
                    [[getImageList? &tvname=`slider` &tpl=`tplsliderItem`]]
                </div>

                  .... и далее по тексту


Чанк tpl.slider.input.row будет в себе содержать примерно следующее:
<input type="radio" name="css-fadeshow" id="slide-[[+idx]]" />

[[+idx]] - это плейсхолдер, выводящий порядковый номер записи. Можно заменить на [[+MIGX_id]] - плейсхолдер, который будет выводить ID текущей записи MIGX. Но этот плейсхолдер не зависит от сортировки MIGX-записей в самой табличке.
Всё то же самое ещё проще сделать на Fenom, там даже не нужен сниппет getImageList.
{set $slider = $_modx->resource.slider | json_decode : true}
{set $idx = 1}
<!-- Radio -->
{foreach $slider as $slide}
<input type="radio" name="css-fadeshow" id="slide-{++$idx}" />
{/foreach}
<div class="fs-slides">
{foreach $slider as $slide}
...код слайда
{/foreach}
</div>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Molinos Санкт-Петербург
от 70 000 ₽
СтопДолг Новосибирск
от 60 000 до 65 000 ₽
02 апр. 2020, в 16:41
2000 руб./за проект
02 апр. 2020, в 16:33
10000 руб./за проект
02 апр. 2020, в 16:17
6000 руб./за проект