Подключение слайдера ^#2069

Служба технической поддержки не предоставляет консультаций по редактированию шаблонов.

При необходимости Вы можете создать на своем сайте слайдер. Пример того, как может выглядеть слайдер на сайте, Вы можете посмотреть, пройдя по следующей ссылке.

Для того чтобы самостоятельно создать слайдер, Вам необходимо получить расширенные права доступа к системе управления. Получить их Вы можете самостоятельно, следуя инструкции по ссылке.

После того как расширенные права доступа получены, можно приступать к работе.

Рассмотрим весь процесс создания слайдера на примере приведенного выше образца.

Сперва определитесь с местом размещения слайдера.

Это может быть любое место в шаблоне. В нашем случае мы будем размещать слайдер над заголовком <H1>.

Перейдите к разделу "Настройки" - "Шаблоны и файлы".

Выберите и откройте для редактирования нужный Вам шаблон. В нашем случае - это "_Главная. Верх".

Найдите нужное место в шаблоне и разместите следующий код слайдера (напоминаем, в примере мы размещаем код над заголовком <H1> - Вы же можете выбрать другое расположение):

<div class="slider">
    <div class="slider-items">
        <div class="slider-items-inner">
        {foreach from=$slider item=e}
            <div class="slider-item">
                <div class="slider-image"><img src="{s3_img width=950 height='-' src=$e.image.filename}" /></div>
                <div class="slider-text"><div class="slider-text-inner">{$e.text}</div></div>
            </div>
                    {/foreach}
        </div>
    </div>
    <div class="slider-controls">
        <div class="slider-prev">&nbsp;</div>
        <div class="slider-next">&nbsp;</div>
    </div>
    <ul class="slider-bullets">
<li class="slider-player">&nbsp;</li>
{foreach from=$slider item=e}
                    <li>&nbsp;</li>
                    {/foreach}
    </ul>
</div>

В том же шаблоне вверху - перед закрывающим тегом </head> - вставьте скрипты для работы слайдера:

• Сперва этот:

<script src="/g/libs/jqueryeasing/jquery.easing.min.1.3.js"></script>
<script src="/g/module/megaslider/js/megaslider.jquery.js"></script>

• Затем этот:

  {literal}
  <script>
(function ($) {
        $(function () {
                $('.slider').megaSlider({
                        animation : 'fade',
                        textanimation : 'slide'
                });
        })
})(jQuery);
  </script>
  {/literal}

Обратите внимание!

• Если Вы хотите изменить скорость смены фотографий в слайдере - добавьте в представленном коде после textanimation : 'slide' запятую и со следующей строки пропишите interval : 2000, где 2000 =  2 секундам в миллисекундах. То есть, если Вы хотите, чтобы слайды менялись быстрее, уменьшите это значение, если же наоборот - увеличьте. Таким образом, код должен выглядеть примерно следующим образом:

  {literal}
  <script>
(function ($) {
        $(function () {
                $('.slider').megaSlider({
                        animation : 'fade',
                        textanimation : 'slide'
                        interval : 2000
                });
        })
})(jQuery);
  </script>
  {/literal}

Сохраните изменения в шаблоне.

Далее, нажмите кнопку "Данные" (перейти к списку данных Вы также можете из списка шаблонов).

Отобразится окно со списком данных. Нажмите на "Добавить новые данные".

В появившемся окне, Вам будет предложено заполнить следующие поля:

• Название - так будет называться блок в интерфейсе CMS. Укажите любое удобное для вас имя, например, "Слайдер".
• Алиас - имя переменной в шаблоне, помимо этого алиас содержит служебную информацию. Имя алиаса используется в шаблонах для вывода содержимого этой переменной, то есть того, чем будет заполнен блок. В приведенных выше кодах используется алиас "slider" - рекомендуем указать Вам именно его.
• Тип данных - определяющая часть переменной, например “Файлы”, “Тексты”, “Иллюстрации”, “Меню” и т.д. Выберите пункт "Метаданные JSON".
• ID схемы - в дальнейшем необходимо будет создать json для слайдера (с определенными полями) и задать ему ID. Укажите ID в данном поле.
• Общий - используется, чтобы указать, что данные являются общими, то есть задаются один раз для всех страниц, содержащих этот шаблон (если галочка не установлена, блок будет заполняться для каждой страницы отдельно и будет располагаться в “Данных страницы”, а не в "Дополнительных блоках"). В нашем случае необходимо отметить галочку.
• Заполняется массивом - при активном значении в блоке появится возможность добавлять множество элементов. В нашем случае галочку необходимо отметить.

После заполнения всех полей и указания нужных параметров, сохраните изменения.

Обратите внимание - в качестве выборки по умолчанию у добавленных данных должно быть установлено "Метаданные (массив)" (обычно установлено по умолчанию, если же это не так - нажмите и выберите в открывшемся окне в качестве выборки по умолчанию "Метаданные массив").

Теперь откройте текстовый редактор, например, "Блокнот" и вставьте туда следующий код:

/**** slider ****/

/* sizes */

.slider{margin:0 0 10px;}

.slider, .slider .slider-items, .slider .slider-item {width:700px; height:260px;}

.slider img{width:100%;}

.slider {position:relative;}

.slider .slider-items {position:relative; overflow:hidden; z-index:2;}

        .slider .slider-item {position:absolute; top:0; left:0; overflow:hidden;}

        .slider .slider-image {position:absolute; z-index:1;text-align:center;width:100%;height:100%;}

        .slider .slider-text {position:absolute; z-index:2; background:rgba(0,0,0,.6);}

            .slider .slider-text .slider-text-inner {padding:10px 143px 10px 17px; color:#fff;}

.slider .slider-controls .slider-prev {position:absolute; top:50%; margin:-23px 0 0; left:-2px; z-index:4; cursor:pointer; background:#016BC3 url(slider_controls.png) 0 -3px no-repeat; width:44px; height:40px;}

.slider .slider-controls .slider-next {position:absolute; top:50%; margin:-23px 0 0; right:-2px; z-index:4; cursor:pointer; background:#016BC3 url(slider_controls.png) -56px -3px no-repeat; width:44px; height:40px;}

.slider .slider-bullets {position:absolute; z-index:3; list-style:none; padding:0; margin:0; font-size:0;}

.slider .slider-bullets li {padding:0; margin:0; cursor:pointer; width:14px; height:14px; background:url(slider_controls.png) 0 -55px no-repeat;}

.slider .slider-bullets li.active {background-position:0 -73px;}

.slider .slider-bullets .slider-player {cursor:pointer; background:url(slider_controls.png) 0 -88px no-repeat; width:14px; height:14px; margin:0 3px 0 0;}

.slider .slider-bullets .player-on {background-position:0 -104px;}

/* texts positions */

.slider .slider-text-top {top:0; left:0;width:100%;}

.slider .slider-text-left {top:0; left:0;width:25%; height:100%;}

.slider .slider-text-right {top:0; right:0;width:25%; height:100%;}

.slider .slider-text-bottom {bottom:0; left:0; width:100%;}

/* bullets positions */

.slider .slider-bullets-bottom-left {bottom:10px; left:10px;}

.slider .slider-bullets-bottom-left li {float:left; margin:0 0 0 4px;}

.slider .slider-bullets-top-left {top:10px; left:10px;}

.slider .slider-bullets-top-left li {float:left; margin:0 0 0 4px;}

.slider .slider-bullets-left-bottom {bottom:10px; left:10px;}

.slider .slider-bullets-left-bottom li {margin:0 0 4px;}

.slider .slider-bullets-left-top {top:10px; left:10px;}

.slider .slider-bullets-left-top li {margin:0 0 4px;}

.slider .slider-bullets-bottom-right {bottom:10px; right:10px;}

.slider .slider-bullets-bottom-right li {float:left; margin:0 0 0 4px;}

.slider .slider-bullets-top-right {top:10px; right:10px;}

.slider .slider-bullets-top-right li {float:left; margin:0 0 0 4px;}

.slider .slider-bullets-right-bottom {bottom:10px; right:10px;}

.slider .slider-bullets-right-bottom li {margin:0 0 4px;}

.slider .slider-bullets-right-top {top:10px; right:10px;}

.slider .slider-bullets-right-top li {margin:0 0 4px;}

/**** /slider ****/

Затем раскройте меню "Файл" и выберите пункт "Сохранить как".

И сохраните файл как "slider.css".

Таким образом, Вы создадите файл со стилями слайдера.

Теперь снова откройте раздел "Шаблоны и файлы" системы управления и перейдите к "Файлам" дизайна, а затем в папку "Images".

Нажмите на кнопку "Обзор" и выберите созданный Вами шагом ранее файл "slider.css".

И нажмите на кнопку загрузки.

Созданный Вами файл стиля слайдера будет добавлен в файлы дизайна.

Теперь снова откройте для редактирования шаблон "_Главная. Верх".

Найдите строку <link rel="stylesheet" type="text/css" href="images/css/styles.less.css">.

И пропишите под ней ссылку на добавленный Вами файл со стилями слайдера: <link rel="stylesheet" type="text/css" href="images/slider.css">.

И сохраните изменения в шаблоне.

Снова вернитесь к разделу "Шаблоны и файлы" системы управления и снова перейдите к "Файлам" дизайна, а затем в папку "Images".

Нажмите на кнопку "Обзор" и выберите прикрепленный файл "slider_controls.png" (скачать его Вы можете, нажав на ссылку).

И нажмите на кнопку загрузки.

Тем самым Вы загрузите кнопки прокрутки слайдера.

Теперь перейдите в раздел "Данные сайта" - выберите пункт "Метаданные".

На открывшейся странице нажмите "Создать".

В открывшемся окне:

• Укажите название - "Слайдер";
• Задайте ID схемы - аналогичный тому, который Вы указали при создании данных в шаблоне "_Главная. Верх" (Шаг 9).
• Заполните поле "Схема JSON" следующим содержимым:

{
    "image" : {
        "name" : "Картинка",
        "type" : "image2"
    },
    "text" : {
        "name" : "Текст",
        "type" : "html"
    }
}

• Сохраните изменения.

Таким образом, Вы создадите метаданные для возможности выбирать изображения для слайдера.

Теперь Вам необходимо выбрать иллюстрации для слайдера. Для этого перейдите к разделу "Страницы".

Нажмите на любую из страниц (если Вы ранее создали выборку данных с отмеченной галочкой "Общий") и выберите в раскрывшемся списке пункт "Редактировать содержимое".

В открывшемся окне на вкладке "Общие блоки" нажмите на ссылку "Слайдер".

И добавьте нужные Вам изображения в список слайдов (перед этим добавив их в список JSON).

Подробную инструкцию о том, как редактировать изображения в слайдере, Вы можете прочитать по ссылке.

Перейдите на сайт. Слайдер должен отобразиться примерно следующим образом.

• Данная инструкция является лишь примером реализации описанного функционала. Показанные в инструкции результаты могут отличаться от реальных по причине специфики шаблонов конкретного сайта или иных технических нюансов.