Техническая поддержка 8 800 555 6342
Положение об оказании услуг технической поддержки
CMS.S3

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

Обращаем Ваше внимание:

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

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

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

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

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

Шаг 1

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

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

php8jiW7c

Шаг 2

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

phpDemEPw

Шаг 3

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

phpGpsfpX

Шаг 4

Найдите нужное место в шаблоне и разместите следующий код слайдера (напоминаем, в примере мы размещаем код над заголовком <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>

phpmiIri2

Шаг 5

В том же шаблоне вверху - перед закрывающим тегом </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}

phpJOIYt7

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

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

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

Шаг 6

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

phpj2Nd9h

Шаг 7

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

phpdP8BDT

Шаг 8

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

phpaAHQXW

Шаг 9

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

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

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

phpGcymMb

Шаг 10

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

phpcYqHf9

Шаг 11

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

/**** 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 ****/

 

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

phprqOU22

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

phpDsIJIn

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

Шаг 12

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

phpX8DE0B

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

phpxVVtjc

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

phppUo59g

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

Шаг 13

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

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

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

phpP0mPQL

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

Шаг 14

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

phpX8DE0B

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

phpxVVtjc

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

phpmEbeI9

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

Шаг 15

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

phpc7oBPw

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

phpsT8VcY

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

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

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

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

phpIppJqa

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

Шаг 16

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

phpCE42Qh

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

php3uEgrt

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

phpx0zYFV

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

phpSFz2oL

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

Шаг 17

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

phpZwGBB5

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

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