Битрикс не работает слайдер

Создание слайдера на 1С-Битрикс

Допустим вам необходимо создать слайдер, который заказчик сможет без проблем редактировать (содержание), и каждое изображение должно вести на определённую страницу + появлятся в определённое время. В помощь нам приходят инфоблоки.

1. Вначале подготовим структуру для слайдера.

• Создадим новый инфоблок, например с типом «Новости» (Рабочий стол > Контент > Информ. блоки > Типы информ. блоков > Новости)
• Заполняем настройки по вашему усмотрению (дальше я буду писать на своем примере). Желательно поставить обязательным пункт «Картинка для анонса» в разделе «Поля» и проставить галки у «Создавать картинку анонса из детальной (если не задана)», «Создавать картинку анонса из детальной даже если задана».
• В разделе «Свойства» добавляем свойство (извините) для настройки ссылки, по которой будет ввести картинка (примерные настройки: Ссылка — Строка — Акт — SLIDER_LINK).

Сохраняем, останется правильно настроить страницу добавления картинки в слайдер. У меня сделано примерно так:

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

Теперь уже всё идёт на ваше усмотрение. Вы можете сделать через свой компонент. Я покажу, как сделано у меня.

2. Добавляем компонент «Список новостей (bitrix:news.list)» в необходимую область сайта.

При этом в свойствах сделаем наше поле активным (slider_link) и уберём галки у «Устанавливать заголовок страницы, Устанавливать статус 404. Включать инфоблок в цепочку навигации, Включать раздел в цепочку навигации»

У меня компонент выглядит примерно так:

• Теперь создадим шаблон для bitrix:news.list (ШАБЛОН/components/bitrix/news.list/slider/, например).
• Поменяем шаблон выше указанного компонента на slider.
• В содержание можем помещать html часть слайдера и прописать настройки скрипта.
• Сам скрипт помещаем в нашу папку slider и называем script.js, он будет подключаться автоматически.

Код вызова картинки с ссылкой будет выглядеть примерно так:

3. Частным пример подключения слайдера:

Для работы скрипта необходимо подключить библиотеку JQuery!

Скачиваем слайдер SlidesJs ( http://slidesjs.com/ ). Кидаем slides.min.jquery.js в папку шаблона слайдера (ШАБЛОН/components/bitrix/news.list/slider/) и меняем имя на script.js, изображения перемещаем в папку images в ней же, стиль кидаем в папку шаблона слайдера, назвав style.css, и поменяв пути до картинок.

Содержание шаблона будет выглядеть так:

Источник

Принцип работы

Подключение на PHP-странице

Использование в JavaScript

Все JavaScript-классы слайдера находятся в namespace’е BX.SidePanel . Для доступа к API слайдера используется объект-синглтон BX.SidePanel.Instance.

Принцип работы

Слайдер — это боковая панель, которая умеет открывать страницы сайта в iframe’е, а также отображать произвольное содержимое внутри себя. Применение iframe’а позволяет использовать готовые компоненты, работающие на обычных страницах сайта.

Слайдер выезжает справа налево, занимая все пространство сверху донизу. Для корректной работы интерфейса отключается скроллинг страницы и добавляется padding-right (равный ширине отключенного скролла) для всего содержимого.

Во время открытия показывается лоадер, который исчезает, как только содержимое боковой панели загружено. Слайдер не уничтожается после закрытия. Если открыть слайдер заново, он появится мгновенно с тем же контентом. Кеширование закрытого слайдера можно отменить опцией cacheable=false.

Из слайдера можно открыть другой слайдер. В этом случае новым слайдер появится поверх предыдущего. На всем жизненном цикле работы слайдера (открытие, загрузка, закрытие, удаление) происходят соответствующие события. Эти события генерируются как в родительском окне, так и в iframe’е.

Открытие слайдера происходит двумя способами:

• С помощью вызова метода BX.SidePanel.Instance.open().
• Через нажатие на обычную ссылку на странице. Этот метод требует предварительной регистрации правил с шаблонами ссылок

Пользовательские комментарии

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

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

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

Источник

Ссылка на слайдере

Здравствуйте, при работе возник вопрос
Можно ли навесить ссылку на слайдер?
Слайдер реализован средствами news.list

Должно выглядеть так: меняются картинки, на каждой из которых в одном месте текст с ссылкой на каталог.

Как можно сделать это в шаблоне компонента? Или есть способ сделать ссылку отдельно, присвоив ей только нужное место?

Цитата
Александр Фаст пишет: В ИБ вместе с картинкой храните ссылку, в шаблоне прописываете ссылку.

Правильно ли я понимаю, что получится кликабельная картинка?

Если нет, то опишите, пожалуйста, подробнее.

Цитата
Александр Фаст пишет: Да, на картинку или текст вешаете ссылку, я не вижу, как у вас реализован слайдер, поэтому конкретно куда что вставлять не скажу. Но логика такая, храните всю нужную информацию в ИБ вместе с картинками и правите шаблон уже для отображения, как вам нужно.

ну вот, делаете еще одно свойство адрес ссылки, тип строка, код BANNER_LINK

Возможно, в меня полетит тапок, но код шаблона выглядит так:

Цитата
Александр Фаст пишет: ну тогда еще проще, оборачиваете тегом ссылки:

По-видимому этот кусок нужно вставить в шаблон, куда именно?

Что тут подразумевается под многоточием?

Цитата
Александр Фаст пишет: стыдно такие-то вопросы уже задавать

Цитата
Александр Фаст пишет: стыдно такие-то вопросы уже задавать

есть два способарешения
1 способ начните с азов самостоятельно проштудируйтете html css php. дольше по времени хотя бы понять синтаксис уйдет 2-3 дня а потом уже от практики зависит.
2. наймите кто сделает работу за вас.

2 вариант более рентабелен ибо время на исполнения меньше затрат меньше а первый это инвестиции в будущее, но возможно это не ваше и не зачем тратить силы на него ибо инвестиции будут потрачены впустую. Если вы не планируете стать программистом первый путь это выкидывание средств на ветер.

Цитата
Якушев Даниил пишет: Как отменить действие изменения? Всё слетело после изменения шаблона

Цитата
Александр Фаст пишет: http://www.codecademy.com/ вот могу посоветовать, для начала изучения, там и php и javascript и jquery есть.

Цитата
Александр Фаст пишет: http://www.codecademy.com/ вот могу посоветовать, для начала изучения, там и php и javascript и jquery есть.

спасибо, с слайдером разобрался

Цитата
Александр Фаст написал: ну вот, делаете еще одно свойство адрес ссылки, тип строка, код BANNER_LINK

в качестве движка слайдера используется
http://www.pixedelic.com/plugins/camera/ изучите его методы и примеры использования

Здравствуйте, при работе возник вопрос
Можно ли навесить ссылку на слайдер?
Слайдер реализован средствами news.list

Должно выглядеть так: меняются картинки, на каждой из которых в одном месте текст с ссылкой на каталог.

пример кода слайдера
?if(!defined(«B_PROLOG_INCLUDED») || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>

AddEditAction($arItem[‘ID’], $arItem[‘EDIT_LINK’], CIBlock::GetArrayByID($arItem[«IBLOCK_ID»], «ELEMENT_EDIT»));
$this->AddDeleteAction($arItem[‘ID’], $arItem[‘DELETE_LINK’], CIBlock::GetArrayByID($arItem[«IBLOCK_ID»], «ELEMENT_DELETE»), array(«CONFIRM» => GetMessage(‘CT_BNL_ELEMENT_DELETE_CONFIRM’)));
?>

GetEditAreaId($arItem[‘ID’]);?>»>

Источник

Создаём слайдер на Битрикс

Необходимость размещения слайдера на сайте является одной и весьма популярных задач, с которой веб-разработчикам приходится сталкиваться при разработке сайтов. В самом деле прикрутить простой слайдер на сайт не составляет большого труда. Однако довольно часто возникает необходимость реализовать функционал с возможностью более гибкого управления слайдами на сайте, скажем это может быть график показов, подсчёт количества показов, и многое другое.

Для подобных задач в системе Битрикс есть довольно мощный инструмент для организации работы показа баннеров, о котором и пойдет речь далее. Для этих задач удобно использовать модуль «Баннерная реклама», который располагается по в админке в разделе:

Маркетинг > Баннерная реклама

В самом деле с технической точки зрения реализовать слайдер на сайте можно посредством других модулей. Однако данный метод содержит всё необходимое для использования этого модуля в качестве основного.

Разделение баннеров по типам

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

В самом деле настраивать типы баннеров можно в произвольном порядке, и сегментировать скажем их к примеру, для показа на разных участках сайта.
Маркетинг > Баннерная реклама > Типы баннеров

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

Список баннеров располагается по такому пути:

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

Добавление нового баннера

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

Для наших целей потребуется заполнить минимум полей:

Название (можно указать произвольное), т.к. нами в публичной части оно использоваться не будет;
Тип баннера – нужно указать какой тип баннера мы добавляем, мобильный либо полноэкранный;
Вес (приоритет) – это поле используется для сортировки порядка баннеров;
Файл – это и есть изображение добавляемого баннера, можно добавить файл методом перетаскивания либо по клику на области;
URL – ссылка на баннере, если есть необходимость возможности перехода пользователя по клику на баннере;
Статус баннера – обозначает готовность показа баннера на сайте.

Всё это находится на первой вкладке добавления баннера, и этого для нашего примера вполне достаточно. Далее немного рассмотрим вкладки так сказать «для ознакомления».

На вкладке «ограничения» можно выставлять лимиты, связанные с количеством показа баннера на сайте.

На вкладке «таргетинг» можно гибко настраивать показ банеров по конкретным разделам, к примеру, если компонент подключён в каталоге, и есть необходимость показа конкретного баннера для конкретных разделов. Можно так же настраивать от обратного – показывать баннер во всех разделах, и сделать исключение для некоторых.

Настраивать показ можно с использованием разграничения по группам пользователя.

Кроме этих исключений можно так же настроить дни, по которым будет показываться этот баннер. Особенно это актуально для интернет-магазинов, к примеру, если на сайте проводиться какая-либо акция, связанная с конкретными датами.

Для сбора и обработки аналитики на вкладке «статистика» можно настраивать отслеживание событий кликов на баннерах. Это позволяет собирать дополнительную информацию по эффективности того или иного баннера.

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

Создаём компонент для показа баннеров

Итак, у нас есть некий набор баннеров в администраторской части сайта. В публичной части сайта нам нужно вывести слайдер, который будет вытягивать данные из базы, и показывать из с необходимой разметкой. Что касается верстки, то в подавляющем большинстве случаев в каждой верстке может использоваться различные плагины для показа изображений. По этой причине целесообразно нам сделать простой самостоятельный компонент, в котором уже реализуется нужная разметка.
Для показа было решено прикрутить Swiper Slider, ссылка на него будет в самом конце поста. Создаём кастомный компонент, который будет получать данные из базы, а в шаблоне компонента будет подключаться Swiper Slider, который будет выполнять показ этих самых баннеров.

Путь размещения компонента:
/local/components/custom/swiper.slider/

Как вы поняли директория /local/ в этом случае используется для ваших шаблонов и компонентов. Вызов компонента происходит стандартным образом:

В качестве параметра мы передаём TYPE_SID, который и передаёт тип баннеров, которые следует загрузить. Константа SITE_TYPE задаётся в файле init.php, посредством элементарной проверки юзер-агента браузера, и может принимать значение original либо pda.

Итак вы подключаем компонент custom:swiper.slider на главной странице, теперь пора перейти к логике самого компонента. Логика компонента находится в скрипте component.php, те кто работал с системой битрикс, наверное, уже знают об этом.

Рассмотрим исходный код компонента

Сама логика компонента расположена в файле component.php:
/local/components/custom/swiper.slider/component.php

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

В папке компонента так же мы размещаем шаблон компонента, который собственно и будет содержать всю основную разметку слайдера, а также подключать дополнительные js-скрипты и файлы стилей. Так как при подключении компонента мы не указали имя шаблона компонента, то по умолчанию будет подгружаться шаблон из папки с названием .default:
/local/components/custom/swiper.slider/templates/.default/

В этой директории размещён файл шаблона компонента с именем templates.php, в него помещается разметка:

В итоге в директории с шаблоном компонента мы разместим следующие файлы:

Swiper.css – это файл стилей который идет вместе со слайдером swiper slider;
Swiper.min.js – в этом файле находится сам javascript код слайдера, он так же подключается в шаблоне компонента;

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

Источник