[Modx Evo] Меняющаяся картинка с навигацией и тенью на Modx
Вот архив всех необходимых скриптов, кодов и картинок.
Создаем чанк GALLERY:
<div id="main">
<div class="next"><img src="assets/css/next.png" alt="" /> </div>
<div class="prev"> <img src="assets/css/prev.png" alt=""/></div>
<div class="screenshots">
<ul>
[[Ditto? &tpl=`slide-tpl` &startID=`4` &sortDir=`ASC` ]]
</ul>
</div>
Создаем чанк slide-tpl:
<li><h6><a href="[~[+id+]~]" title="Читать подробнее об этой услуге">[+longtitle+]</a></h6><br/> [+img-news+] </li>
Элементы → Управление элементами → Параметры (TV) создать новый по имени img-news
Описание: Изображение для ресурса. Размер — 500px на 500px.
Заголовок: Изображение для страницы
Тип параметра и визуальный компонент: image
Ставим галочку у шаблона, например он называется lop.
В папке под номером 4 в левом меню админки создаем несколько дочерних документов, где описываем акции. Заполняем заголовок, расширенный заголовок и прикрепляем картинку.
В шаблон отображения страницы, где будет слайд шоу подгружаем скрипты и стили.
<link rel="stylesheet" href="/assets/css/main.css" type="text/css" media="screen" />
<script src="/assets/js/jquery.js" type="text/javascript"></script>
<script src="/assets/js/jquery.f.js" type="text/javascript"></script>
Грузим стили, скрипты и картинки по папкам на хостинг. Файл стилей /assets/css/main.css:
img {border:0;}
#main a:link {text-decoration: none; color: #a6a6a6; font:18px "Times New Roman", Times, serif; }
#main a:hover {text-decoration: none; color: #000000; font:18px "Times New Roman", Times, serif; }
#main {margin-left: 150px;}
#main .screenshots li {height: 620px; margin-left: 50px; width: 520px; }
.screenshots img { -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc; }
#main .prev {width: 29px; height: 32px; float: left; z-index: 99; position: absolute; margin: 280px 0 0 0px; cursor: pointer}
#main .next {width: 29px; height: 32px; float: right; z-index: 99; position: absolute; margin: 280px 0 0 570px; cursor: pointer}