Карусель или аккордеон изображений

Версия MODX: Revolution

Нужно сделать адаптивную галерею изображений, в форме карусели или аккордеона, типа такого tympanus.net/Tutorials/CSS3ImageAccordion/ или tympanus.net/Development/3DGallery/
Подскажите как лучше сделать? Есть, что-то именно для modx, если нет то прикрутив сторонюю такую карусель, как сделать, чтобы можно было администрировать добавлять удалять изображения не через HTML.

Олег
30.01.17 в 19:01

Комментарии (8)

Олег 30.01.2017 20:05 #

Чтобы поставить карусель на свой сайт:
1. Определяетесь, какую именно карусель, аккордеон и т.д. вы хотите видеть на своем сайте
2. Идете на сайт этой карусели и читаете документацию. Как минимум — раздел «Установка», «Запуск» или что-то типа этого.
3. Согласно инструкции подключаете скрипт карусели и ее файл стилей.
4. Создаете MIGX TV, в который будете добавлять картинки, описание и т.д., привязываете его к шаблонам, где будет использоваться карусель.
5. Создаете чанк, который будет выводить данные для карусели — обычно несколько div'ов с картинками и текстом внутри. Эти картинки берете из MIGX TV, (см. п.4)
6. Смотрите в документации (п.2), как запускать карусель. Обычно достаточно подключить скрипт (п.3) и прописать определенный класс у div'а, в который обернуты слайды (п.5)
Олег 30.01.2017 20:31 #

Спасибо за ответ. У меня такой нюанс, установил сейчас MIGX перехожу на него и когда нажимаю «Добавить элемент», открывается модальное окно и: Loading..., короче думает и ничего не происходит, с чем это может быть связано?
1. Олег 30.01.2017 20:39 #
  
  Что во вкладках формы и разметке колонок?
  Ошибки в консоли есть?

Олег 30.01.2017 21:25 #

Может я что-то не так делаю, я зашел в Управление MIGX, вверху Package Manager, MIGX, Satup/Upgrade. Выбираю MIGX и там нажимаю «Добавить элемент» после этого, окно и Loading…
В консоли:

?a=index&namespace=migx&configs=packagemanager||migxconfigs||setup:1162 [[+config.add_items_directly]]
ext-base.js:21 POST http://мой_домен/assets/components/migx/connector.php 403 (Forbidden)
i @ ext-base.js:21
request @ ext-base.js:21
request @ ext-all.js:21
update @ ext-all.js:21
doAutoLoad @ ext-all.js:21
(anonymous) @ ext-all.js:21
b @ ext-all.js:21
modx.js?v=05710b57:117 Uncaught TypeError: Cannot read property '1' of null
    at MODx.onAjaxException (modx.js?v=05710b57:117)
    at h.Event.fire (ext-all.js:21)
    at Ext.data.Connection.fireEvent (ext-all.js:21)
    at Ext.data.Connection.handleFailure (ext-all.js:21)
    at f (ext-base.js:21)
    at m (ext-base.js:21)
    at ext-base.js:21
onAjaxException @ modx.js?v=05710b57:117
fire @ ext-all.js:21
fireEvent @ ext-all.js:21
handleFailure @ ext-all.js:21
f @ ext-base.js:21
m @ ext-base.js:21
(anonymous) @ ext-base.js:21

Олег 30.01.2017 21:34 #

Когда модальное окно грузится (Loading...), оно пустое.
Олег 30.01.2017 22:41 #

Вот как-то так про MIGX, например
modxdevpro.ru/blog/revo/manuals/88-creating-image-gallery-using-migx

Олег 31.01.2017 15:48 #

спасибо за полезную информацию, в принципе получилось, но есть один момент, не могу сообразить как сделать.
В HTML коде аккордеона закрывающие теги /figure идут для каждого изображения внизу.

    <div class="ia-container">			
					<figure>
						<img src="images/1.jpg" alt="image01" />
						<input type="radio" name="radio-set" checked="checked"/>
						<figcaption><span>True Colors</span></figcaption>
						
						<figure>
							<img src="images/2.jpg" alt="image02" />
							<input type="radio" name="radio-set" />
							<figcaption><span>Honest Light</span></figcaption>
							
							<figure>
								<img src="images/3.jpg" alt="image03" />
								<input type="radio" name="radio-set" />
								<figcaption><span>Silent Serenity</span></figcaption>
								
								<figure>
									<img src="images/4.jpg" alt="image04" />
									<input type="radio" name="radio-set" />
									<figcaption><span>Warm Welcome</span></figcaption>
									
									<figure>
										<img src="images/5.jpg" alt="image05" />
										<input type="radio" name="radio-set" />
										<figcaption><span>Sensible Magic</span></figcaption>
										
										<figure>
											<img src="images/6.jpg" alt="image06" />
											<input type="radio" name="radio-set" />
											<figcaption><span>Lovely Midnight</span></figcaption>
								
											<figure>
												<img src="images/7.jpg" alt="image07" />
												<input type="radio" name="radio-set" />
												<figcaption><span>Illuminated Darkness</span></figcaption>											

												<figure>
													<img src="images/8.jpg" alt="image08" />
													<input id="ia-selector-last" type="radio" name="radio-set" />
													<figcaption><span>Happy Child</span></figcaption>
												</figure>
												
											</figure>
								
										</figure>	
											
									</figure>	
										
								</figure>
									
							</figure>
							
						</figure>
						
					</figure>
					
				</div><!-- ia-container -->

Я подключил нужные файлы, создал TV accordion-img тип ввода «migx», заполнил Вкладки формы и Разметка колонок, создал чанк accordion_tpl с таким кодом:

<figure>
		<img src="[[+image]]" />
		<input type="radio" name="radio-set" checked="checked"/>
		<figcaption><span>[[+title]]</span>
</figcaption>

В шаблоне прописал

<div class="ia-container">
  			[[getImageList? &tvname=`accordion-img` &tpl=`accordion_tpl`]]
  			</figure>
												
											</figure>
								
										</figure>	
											
									</figure>	
										
								</figure>
									
							</figure>
							
						</figure>
						
					</figure>

В принципе работает, но получается, что статичное количество изображений, как и где добавть /figure, чтобы при добавлении или удалении изображения соответственно добавлялся или удалялся /figure?

Олег 31.01.2017 16:16 #
В принципе сейчас пришла мысля, создал ещё один чанк — accordion-figure_tpl с единственным тегом
```
</figure>
```
И в шаблоне после
```
[[getImageList? &tvname=`accordion-img` &tpl=`accordion_tpl`]]
```
вместо 8 закрывающих тегов
```
</figure>
```
вставил
```
[[getImageList? &tvname=`accordion-img` &tpl=`accordion-figure_tpl`]]
```
Подскажите может есть решение как-то по другому, чтобы не создавать чанк ради одного тега?

Для добавления комментариев вы должны авторизоваться или зарегистрироваться.