Первое. Создаем информер:
Панель управления >>> Вкладка инструменты >>> Информеры >>> Создать информер.
К примеру новостей. Способ сортировки >>> Дата добавления материала D, Количество материалов >>> 15, Количество колонок >>> 1 Открываем шаблон информера — оттуда все удаляем, и ставим код.
Code
<li><a href="$ENTRY_URL$"><img title="$TITLE$" src="$IMG_URL1$" width="180" height="115"></a></li>
Где $TITLE$ - название новости, $IMG_URL1$ - ссылка на загруженную картинку, $ENTRY_URL$ - ссылка к полной новости.
Второе. Создаем глобальный блок:
Панель управления >>> Управление дизайном >>> Глобальные блоки >>> Добавить блок. На зовем его SLIDER, английский шрифт. Теперь вставляем в созданный блок SLIDER сам код.
Code
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Elastislide - A Responsive jQuery Carousel Plugin" />
<meta name="keywords" content="carousel, jquery, responsive, fluid, elastic, resize, thumbnail, slider" />
<meta name="author" content="Codrops" />
<link rel="stylesheet" type="text/css" href='http://windchange.my1.ru/css/reset.css' />
<link rel="stylesheet" type="text/css" href='http://windchange.my1.ru/css/elastislide.css' />
<noscript>
<style>
.es-carousel ul{
display:block;
}
</style>
</noscript>
<br><h2>Elastislide A Responsive jQuery Carousel Plugin</h2>
<div class="content">
<!-- Elastislide Carousel -->
<div id="carousel" class="es-carousel-wrapper">
<div class="es-carousel">
<ul>
<script type="text/javascript" src='Ссылка на ваш информер'></script>
<ul>
</div>
</div>
<!-- End Elastislide Carousel -->
<script type="text/javascript" src='http://windchange.my1.ru/js/jquery.min.js'></script>
<script type="text/javascript" src='http://windchange.my1.ru/js/jquery.easing.1.3.js'></script>
<script type="text/javascript" src='http://windchange.my1.ru/js/jquery.elastislide.js'></script>
<script type="text/javascript">
$('#carousel').elastislide({
imageW : 180,
minItems : 5
});
</script></div>
Регулирует размер и пропуск:
imageW : 180,minItems : 5 >>> лучше не менять.
Вместо скриптовой версии ссылки можно вставить: $MYINF_X$ >>> где X номер вашего информера >>> с права от созданного информера. Также изображения можно вставить и без информера — в случае если вам нужно прикрепить определенные картинки и ссылки, то вот код.
Code
<li><a href="#"><img src="images/large/1.jpg" alt="image01" /></a></li>
<li><a href="#"><img src="images/large/2.jpg" alt="image02" /></a></li>
<li><a href="#"><img src="images/large/3.jpg" alt="image03" /></a></li>
<li><a href="#"><img src="images/large/4.jpg" alt="image04" /></a></li>
<li><a href="#"><img src="images/large/5.jpg" alt="image05" /></a></li>
<li><a href="#"><img src="images/large/6.jpg" alt="image06" /></a></li>
<li><a href="#"><img src="images/large/7.jpg" alt="image07" /></a></li>
<li><a href="#"><img src="images/large/8.jpg" alt="image08" /></a></li>
<li><a href="#"><img src="images/large/9.jpg" alt="image09" /></a></li>
<li><a href="#"><img src="images/large/10.jpg" alt="image10" /></a></li>
<li><a href="#"><img src="images/large/11.jpg" alt="image11" /></a></li>
<li><a href="#"><img src="images/large/12.jpg" alt="image12" /></a></li>
<li><a href="#"><img src="images/large/13.jpg" alt="image13" /></a></li>
<li><a href="#"><img src="images/large/14.jpg" alt="image14" /></a></li>
<li><a href="#"><img src="images/large/15.jpg" alt="image15" /></a></li>
<li><a href="#"><img src="images/large/16.jpg" alt="image16" /></a></li>
<li><a href="#"><img src="images/large/17.jpg" alt="image17" /></a></li>
<li><a href="#"><img src="images/large/18.jpg" alt="image18" /></a></li>
<li><a href="#"><img src="images/large/19.jpg" alt="image19" /></a></li>
<li><a href="#"><img src="images/large/20.jpg" alt="image20" /></a></li>
<li><a href="#"><img src="images/large/21.jpg" alt="image21" /></a></li>
<li><a href="#"><img src="images/large/22.jpg" alt="image22" /></a></li>
<li><a href="#"><img src="images/large/23.jpg" alt="image23" /></a></li>
<li><a href="#"><img src="images/large/24.jpg" alt="image24" /></a></li>
<li><a href="#"><img src="images/large/25.jpg" alt="image25" /></a></li>
# - Ссылка, images/large/25.jpg — ссылка на картинку, в архиве все есть,просто загружаете папку images по ftp на ваш (host) или ручным методом (Файловый менеджер).
Третье. Теперь я поясню к материалу почему мы создали глобальный блок. Это чисто моя инициатива, код находиться в отдельном блоке что упращает его редактирование. Что бы слайдер появился на нужном вам месте достаточно взять простой код.
Например: Панель управления >>> Управление дизайном >>> Страницы сайта.
Смотрим чуть ниже редактора кода, мы видим что рядом с другими глобальными блоками появился наш $GLOBAL_SLIDER$.
Например вы хотите чтобы слайдер был над/под шапкой сайта ищем $GLOBAL_AHEADER$ и вставляем перед или после него $GLOBAL_SLIDER$.
Все слайдер готов, но только на главной и созданных вами страниц. В модулях же его тоже надо будет вставлять по месту.(Страница архива материалов, Страница материала и комментариев к нему, Общий вид страниц форума, Главная страница каталога статей, Страница со списком материалов раздела, Страница со списком материалов категории, Страница материала и комментариев к нему, Страница поиска и рейтинга материалов, Страница добавления/редактирования материала и так далее) Это чтобы было на всех страницах вашего сайта.
Есть еще легче варианты, например форум:
Панель управления >>> Управление дизайном >>> Общий вид страниц форума. Кнопка поиска и замены -
Найти: </table> $BODY$ >>> Заменить на: $GLOBAL_SLIDER$ </table> $BODY$ >>> найти, заменить. Вот что у нас получилась.
И еще один пример, чтобы показать как слайдер эластичен: Панель управления >>> Управление дизайном >>> Главная страница модуля игры. Ищем <hr /> $BODY$, заменяем или перед ним вставляем $GLOBAL_SLIDER$. Также делаем: (Страница со списком материалов раздела, Страница со списком материалов категории, Страница материала и комментариев к нему)
Теперь немного о скрипте. Elastislide использует JQuery Плагин Touchwipe , который позволяет вам получить и стереть события на iPhone, iPad или iPod Touch.
Изображения - Karrie Nodalo.
Карусель написанная Мэри Лу.
Мои исправления. Запрет на ссылку - не открывал материал. (исправленно в jquery.elastislide.js)
Адаптирован под ucoz.
Подключаемый информер.
Все файлы и описание установки есть в архиве.
Отдельная страница с кодом.
Примечания. Если по каким то причинам у вас не работает $GLOBAL_SLIDER$ попробуйте без него.
Учтите у всех шаблонов свой дизайн и стили менять его нужно, если вы знаете хотя бы базовые знания в HTML (язык разметки WWW документов) и CSS (Cascading Style Sheets) технологиях. Специально для сайта
ucozon.ru,
указывайте ссылку на источник материалов.
Меню сайта
Меню сайта
