Как убрать слайдер в 1с битрикс
Создаем слайдер на основе инфоблока и компонента "список новостей". Выодим слайдер на главную страницу сайта. Для работы понадобится заготовка слайдер с плавным движением. Интегрируем сторонний слайдер и скрипты в битрикс.
Добрый день, Михаил!
Прежде всего спасибо за Ваши уроки! Очень полезная вещь!
Делаю сайт по Вашему уроку но многое не получается. Вот например http://www.familymania.ru/, слайдер сделать из картинок никак не выходит. Подскажите пожалуйста, как можно выводить картинки в слайдер не из раздела "Акции", а, например, из отдельной папки. Если же такой возможности нет, то как убрать слайдер (какие папки и файлы удалить из структуры сайта) и сделать простой статичный баннер на главной?
Заранее 1000 благодарностей!
Сергей
Просто в эту включаемую область, вместо компанента список новостей вставьте
Нет, у меня там выводится картинка анонса. То есть я изначально загрузил нужного мне, для слайдера, размера. А в разделе акций "зажал" их HTML версткой, указав ширину width="100%". Допускаю, что это не очень оптимальный ход, с точки зрения веса страницы с анонсами, но конкретно у меня получилась разница в 35Кб.
Как вариант можете воспользоваться ResizeImageGet-ом
Здравствуйте, по вашему уроку сделал слайдер на том шаблоне что был в битриксе, но все остальные уроки не смотрел некогда( суть вопроса в следующем: слайдер меняет картинку, после эффекта "движение картинки" останавливается как будто не зациклен, не подскажите в чем может быть проблема?
Цитата |
---|
Константин пишет: . слайдер меняет картинку, после эффекта "движение картинки" останавливается как будто не зациклен, не подскажите в чем может быть проблема? |
Цитата |
---|
Константин пишет: . слайдер меняет картинку, после эффекта "движение картинки" останавливается как будто не зациклен, не подскажите в чем может быть проблема? |
Михаил, может сталкивались - слайдер (скаченный у вас) нормально работает в хроме, криво в опере, в мозилле и IE вообще не работает, может в стили что то дописать надо?
Лично у меня во всех все нормально. Допускаю что в старых IE- ниже девятого, может не работать плавное движение в слайдере. Тут можно, именно для них (старых Ишаков) написать отдельный файл стилей, или вообще слайдер не показыать, подменить на статичную картинку, например.
Реализуем новую возможность для нашего сайта - а именно добавление картинок через административную панель в слайдер на сайте. Для этого нужно создать инфоблок, и настроить его согласно нашей задаче. В первую очередь создадим общий тип для будущих инфоблоков. Назовем его «Контент».
Откроем административный раздел сайта, «Контент» – «Инфоблоки» – «Типы инфоблоков». Нажимаем кнопку «Добавить новый тип». Откроется вкладка «Настройка типа». В поле «Идентификатор (ID)» укажем «content». В поле «Russian (Название)» укажем «Контент». В поле «English (Название)» укажем «Content».
Создадим новый инфоблок для слайдера.
На форме информационного блока, в поле «Символьный код» укажем «slider». Отметим чекбокс с сайтом по умолчанию. В поле «Название» укажем «Слайдер». Уберем галки из чекбоксов с индексированием разделов и элементов.
С вкладкой «Инфоблок» закончили.
Открываем вкладку «Поля». Находим строчку «Картинка для анонса». Выбираем первый чекбокс. Теперь при создании элемента инфоблока картинка для анонса будет обязательна. Затем выбираем чекбокс «Уменьшать если большая». Откроются поля ширины и высоты. Указываем 950 и 300.
Переходим к вкладке «Доступ». В разделе «Доступ по умолчанию». Для всех пользователей выберем уровень доступа «Чтение» (чтобы все посетители сайта могли просматривать изображения слайдера).
На этом все, сохраняем инфоблок.
Переходим в инфоблок «Слайдер». Жмем «Добавить элемент». Справа есть «шестеренка» для открытия окна «Настройка формы редактирования». Нажимаем. Удаляем все вкладки кроме вкладки «Элемент». В выбранных полях оставляем: «Активность», «Название», «Картинка для анонса».
На форме осталась только одна вкладка «Элемент».
В поле «Название» указываем, например, 1. Переносим картинку с размерами 950x300 px в область для перетаскивания. Жмем «Сохранить».
Так повторяем еще один-два раза (можно больше). С созданием инфоблока закончили.
Копируем шаблон компонента. Назовем новый шаблон «slider». Скопируем в основной шаблон сайта. Шаблон будем редактировать через FTP.
Через FTP открываем папку шаблона компонента слайдера (папка_сайта/bitrix/templates/main/components/bitrix/news.list/slider). На редактирование открываем файл «template.php». Удаляем все его содержимое. И всавляем следующий код:
Затем в публичной части сайта открываем тестовую страницу на редактрование и копируем вызов компонента. Через FTP открываем файл «header.php» в папке основного шаблона сайта. Находим «div» с классом «gallery» (
Вставляем вызов компонента вместо этого «div'a». Сбрасываем кэш в публичной части сайта. Смотрим что получилось.
Обязательно настроим специальное свойство для ссылки элемента слайдера:
Ссылка - Строка - Акт - SLIDER_LNK
2. Компонент вывода слайдера
Возьмем за основу компонент списка новостей bitrix:news.list и настроим. Отключим заголовок страницы, статус 404, включение в цепочку навигации. Получим примерно такой код компонента:
IncludeComponent(
"bitrix:news.list",
"slider",
Array(
"DISPLAY_DATE" => "Y",
"DISPLAY_NAME" => "Y",
"DISPLAY_PICTURE" => "Y",
"DISPLAY_PREVIEW_TEXT" => "Y",
"AJAX_MODE" => "N",
"IBLOCK_TYPE" => "news",
"IBLOCK_ID" => "4",
"NEWS_COUNT" => "20",
"SORT_BY1" => "ACTIVE_FROM",
"SORT_ORDER1" => "DESC",
"SORT_BY2" => "SORT",
"SORT_ORDER2" => "ASC",
"FILTER_NAME" => "",
"FIELD_CODE" => array("SLIDER_LINK"),
"PROPERTY_CODE" => array("SLIDER_LINK"),
"CHECK_DATES" => "Y",
"DETAIL_URL" => "",
"PREVIEW_TRUNCATE_LEN" => "",
"ACTIVE_DATE_FORMAT" => "",
"SET_TITLE" => "N",
"SET_STATUS_404" => "N",
"INCLUDE_IBLOCK_INTO_CHAIN" => "N",
"ADD_SECTIONS_CHAIN" => "N",
"HIDE_LINK_WHEN_NO_DETAIL" => "N",
"PARENT_SECTION" => "",
"PARENT_SECTION_CODE" => "",
"CACHE_TYPE" => "A",
"CACHE_TIME" => "36000000",
"CACHE_NOTES" => "",
"CACHE_FILTER" => "N",
"CACHE_GROUPS" => "N",
"DISPLAY_TOP_PAGER" => "N",
"DISPLAY_BOTTOM_PAGER" => "N",
"PAGER_TITLE" => "Слайдер",
"PAGER_SHOW_ALWAYS" => "N",
"PAGER_TEMPLATE" => "",
"PAGER_DESC_NUMBERING" => "N",
"PAGER_DESC_NUMBERING_CACHE_TIME" => "36000",
"PAGER_SHOW_ALL" => "N",
"AJAX_OPTION_JUMP" => "N",
"AJAX_OPTION_STYLE" => "Y",
"AJAX_OPTION_HISTORY" => "N",
"AJAX_OPTION_ADDITIONAL" => ""
)
);?>
3. Шаблон слайдера
Создадим отдельную папку для слайдера по адресу
SHABLON/components/bitrix/news.list/slider/
Поместим в эту папку код компонента, HTML-настройки слайдера и JQuery – скрипт Slides.js.
Когда я создавал свою первую компоненту на битриксе для меня это показалось довольно сложным процессом. Вроде бы написано полно статей, русскоязычная документация, форум. Что ещё надо?! А то, что нет простой для понимания информации для новичка, который только начинает практиковаться в разработке для битрикса.
Спустя некоторое время, когда я разобрался, всё оказалось довольно таки просто и создавать компоненты прям с нуля тоже не обязательно. Сегодня я расскажу, как просто научиться создавать компоненты для CMS 1С-Битрикс на примере слайдера изображений.
Создание инфоблока
Итак для начала создаем новый тип инфоблока и сам инфоблок в админ-панели битрикса. Тип инфоблока это своего рода папка для самих инфоблоков. А инфоблок — таблица, где будет храниться список с элементами, в данном случае это слайды. Тип инфоблока cлайдер и его ID slider.
Далее во вновь созданном типе создаем сам инфоблок. Назову его так же слайдер. Ставим галочку с сайтом по умолчанию.
Так же для удобства во вкладке Поля устанавливаем начало активности в текущие дату и время. Это необходимо, чтобы у вновь созданных элементов дата активности заполнялась автоматически и они сразу же становились доступны.
На вкладке Доступ разрешаем чтение для всех пользователей, иначе инфоблок будет недоступен к просмотру.
Теперь можно сразу его наполнить. Для этого идем в Рабочий стол → Контент → Слайдер → Слайдер и добавляем новый элемент.
Название обязательно. И картинку будем загружать в картинку для анонса во вкладке Анонс.
Создание компонента битрикс
Компоненты не обязательно создавать с нуля. В большинстве случаев подходит кастомизация компонентов news.list или news. В нашем случае подойдет компонент news.list.
Идем в /bitrix/components/bitrix/news.list/templates/ и копируем папку .default в /bitrix/templates/ваш_шаблон/components/bitrix/news.list/ Если папки components и news.list в вашем шаблоне отсутствуют, то создаём их. И переименовываем папку из .default например в slider. Так мы создали новый кастомный шаблон slider.
Сам шаблон находится в файле template.php Открываем его и на данный момент можно все из него удалить. В будущем, когда вы уже будете знать что к чему, то просто будете оставлять из стандартного кода то, что необходимо — так быстрее. Кстати если нужен хостинг, то смотрите здесь
Итак разберем все по порядку.
В самом начале оставляем строчку. Она необходима для защиты от прямого доступа к файлу.
Все наши элементы будут находиться в массиве $arResult["ITEMS"] Затем он перебирается с помощью foreach и выводится по элементно в массиве $arItem . Оставляем цикл foreach .
Давайте сейчас посмотрим что у нас находится в массиве. Для этого в цикл добавляем var_dump($arItem)
Чтобы увидеть данные необходимо вывести компонент на странице сайта. Создайте новую пустую страницу и добавьте туда компонент news.list. Выбираем шаблон slider и указываем тип инфоблока и инфоблок со слайдами.
Видим, что в массиве содержатся наши элементы слайдера. При создании компонент вам часто придется пользоваться функциями var_dump() или print_r() чтобы узнать как называются элементы содержащиеся в массиве и вывести их.
Здесь нам понадобятся только картинки анонсов. Ссылка на картинку будет находится в элементе $arItem["PREVIEW_PICTURE"]["SRC"]
Добавление слайдера в компонент
Сохраняем стили и скрипты в папках css и js текущего шаблона: owl.carousel.css, owl.theme.default.min.css, owl.carousel.min.js. Так же нам понадобится jQuery.
Добавляем скрипты между тегами . Это можно сделать в шаблоне в файле header.php. Получить ссылку на текущий шаблон можно с помощью функции Получаем примерно следующий код:
Возвращаемся в template.php и оборачиваем цикл с картинками в следующий код:
Ниже добавляем код для запуска слайдера с единственной опцией вывода по одной картинке.
Так же можно добавит код из стандартного шаблона, который позволяет редактировать элементы из фронтальной части сайта.
И указываем для блоков с элементами id="GetEditAreaId($arItem['ID']);?>" . Полный код файла template.php:
Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
CMS "1С-Битрикс" предоставляет широкие возможности для начала работы с сайтом. Вы можете установить систему управления и пользоваться ей совершенно бесплатно в течение 30 дней. Как правило этого хватает, чтобы не только разобраться, но и разработать и наполнить свой сайт перед Читать далее
В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим Читать далее
Использовать капчу в формах довольно просто, достаточно отметить галочкой нужный пункт. А что если нужна защита кодом для какого-то нестандартного функционала?! В этом случае можно так же воспользоваться встроенными методами Битрикс. Включение капчи в модуле Веб-формы. Шаг 1 Подключаем библиотеку Читать далее
Работа с базой данных в CMS 1C-Битрикс осуществляется с помощью глобального объекта $DB. Класс позволяет осуществлять различные операции с базой данных, такие как например добавление, удаление, обновление и вывод данных. Аналог в CMS WrodPress - класс wpdb. Обращаться к базе данных Читать далее
Наткнулся в сообществе разработчиков 1С-Битрикс на очень интересную разработку - модуль, который отслеживает изменения файлов/страниц на сайте и сохраняет их резервные копии, а так же ведет логи действий и формирует отчеты с фильтрами. Странно, что этот модуль так и не Читать далее
Для корректной работы слайдера, у слайдов есть ряд служебных свойств.
Для того чтобы управлять данными свойствами слайда, вам необходимо в разделе "Контент" выбрать один из элементов инфоблока "Слайдер на главной" и нажать на "Изменить"
1. Открывать ссылки в новой вкладке.
Данный параметр отвечает за поведения браузера после нажатия на ссылку. Если данный параметр установлен, то после нажатия на ссылку, браузер откроет новою вкладку в которой загрузит страницу из ссылки. В противном случае, ссылки будут открываться в текущем окне.
2. Весь слайдер ссылка.
Включение данного параметра приводит к следующем: При нажатии на любую область слайда, пользователь перейдёт по первой ссылки из свойства "Ссылки" ( 7 )
3.Расположение картинки.
Если данный параметр установлен на "Слева", то картинка анонса будет позиционироваться слева от основного контента слайда.
При установленном значении "Справа" картинка анонса будет позиционироваться справа от основного контента слайда
4. Цвет заголовка .
5. Цвет текста.
Параметр аналогичный параметру "Цвет заголовка", и отличается лишь тем, что меняет цвет текста анонса, выводимого на слайде. Для примера подставим в данное свойство значение b26008 и получим текст следующего цвета:
6. Выводить анонс.
Данный параметр отвечает за вывод текста слайда (за исключением заголовка). Для примера, если отключить данный параметр то получим следующее поведение слайда:
7. Ссылки.
"Ссылки" отвечают за вывод списка ссылок на слайде в виде кнопок. Стоит учитывать, что в случае, если у значения нет описания, то ссылка отображаться не будет, а в случае, если выбран параметр "Весь слайдер ссылка", то данные кнопки будут вести на первую ссылку слайда.
8. Не выводить заголовок.
Если данный параметр включен, то заголовок не будет отображаться.
9. Поведение фона.
Данный параметр отвечает за то, будет ли задний фон обрезаться или же масштабироваться. При масштабировании стоит учитывать как сам размер заднего фона, так и высоту слайдера. Для примера, у данного слайда стоит значения "обрезать"
Однако если поменять значение на "масштабировать" , то изображение примет следующий вид:
Читайте также: