Допустим вам необходимо создать слайдер, который заказчик сможет без проблем редактировать (содержание), и каждое изображение должно вести на определённую страницу + появлятся в определённое время. В помощь нам приходят инфоблоки.
1. Вначале подготовим структуру для слайдера.
Сохраняем, останется правильно настроить страницу добавления картинки в слайдер. У меня сделано примерно так:
Т.е. картинка будет идти из анонса, вы можете сделать наоборот (из детальной).
Теперь уже всё идёт на ваше усмотрение. Вы можете сделать через свой компонент. Я покажу, как сделано у меня.
2. Добавляем компонент "Список новостей (bitrix:news.list)" в необходимую область сайта.
При этом в свойствах сделаем наше поле активным (slider_link) и уберём галки у "Устанавливать заголовок страницы, Устанавливать статус 404..., Включать инфоблок в цепочку навигации, Включать раздел в цепочку навигации"
У меня компонент выглядит примерно так:
3. Частным пример подключения слайдера:
Для работы скрипта необходимо подключить библиотеку JQuery!
Скачиваем слайдер SlidesJs (http://slidesjs.com/ ). Кидаем slides.min.jquery.js в папку шаблона слайдера (ШАБЛОН/components/bitrix/news.list/slider/) и меняем имя на script.js, изображения перемещаем в папку images в ней же, стиль кидаем в папку шаблона слайдера, назвав style.css, и поменяв пути до картинок.
Содержание шаблона будет выглядеть так:
Вот и всё. Удачи!
1. Вначале подготовим структуру для слайдера.
- Создадим новый инфоблок, например с типом "Новости" (Рабочий стол > Контент > Информ. блоки > Типы информ. блоков > Новости)
- Заполняем настройки по вашему усмотрению (дальше я буду писать на своем примере). Желательно поставить обязательным пункт "Картинка для анонса" в разделе "Поля" и проставить галки у "Создавать картинку анонса из детальной (если не задана)", "Создавать картинку анонса из детальной даже если задана".
- В разделе "Свойства" добавляем свойство (извините) для настройки ссылки, по которой будет ввести картинка (примерные настройки: Ссылка - Строка - Акт - SLIDER_LINK).
Сохраняем, останется правильно настроить страницу добавления картинки в слайдер. У меня сделано примерно так:
Т.е. картинка будет идти из анонса, вы можете сделать наоборот (из детальной).
Теперь уже всё идёт на ваше усмотрение. Вы можете сделать через свой компонент. Я покажу, как сделано у меня.
2. Добавляем компонент "Список новостей (bitrix:news.list)" в необходимую область сайта.
При этом в свойствах сделаем наше поле активным (slider_link) и уберём галки у "Устанавливать заголовок страницы, Устанавливать статус 404..., Включать инфоблок в цепочку навигации, Включать раздел в цепочку навигации"
У меня компонент выглядит примерно так:
<?$APPLICATION->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" => "" ) );?> |
- Теперь создадим шаблон для bitrix:news.list (ШАБЛОН/components/bitrix/news.list/slider/, например).
- Поменяем шаблон выше указанного компонента на slider.
- В содержание можем помещать html часть слайдера и прописать настройки скрипта.
- Сам скрипт помещаем в нашу папку slider и называем script.js, он будет подключаться автоматически.
<?foreach($arResult["ITEMS"] as $arItem):?> <a href="<?php if(is_array($arItem["DISPLAY_PROPERTIES"]['SLIDER_LINK'])) echo $arItem['DISPLAY_PROPERTIES']['SLIDER_LINK']['VALUE']; else echo '/'; ?>"><img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arItem["NAME"]?>" /></a> <?endforeach;?> |
3. Частным пример подключения слайдера:
Для работы скрипта необходимо подключить библиотеку JQuery!
Скачиваем слайдер SlidesJs (
Содержание шаблона будет выглядеть так:
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <sc ript> //Slider $(f unction(){ $('.slider').slides(); }); </sc ript> <div class="slider"> <div class="slides_container"> <?foreach($arResult["ITEMS"] as $arItem):?> <a href="<?php if(is_array($arItem["DISPLAY_PROPERTIES"]['SLIDER_LINK'])) echo $arItem['DISPLAY_PROPERTIES']['SLIDER_LINK']['VALUE']; else echo '/catalog/'; ?>"><img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arItem["NAME"]?>" /></a> <?endforeach;?> </div> <a href="#" class="prev"></a> <a href="#" class="next"></a> </div> |