Перейти к содержимому

Добро пожаловать на форум IP-Board.Ru - У нас есть хуки, стили и релизы IP.Board
Зарегистрируйтесь сейчас, чтобы получить доступ ко всем из наших особенностей. После регистрации и входа в систему вы сможете создавать темы, отвечать на сообщения в существующих разделах, изменять репутацию другим пользователям, получить возможность обмениваться личными сообщениями, обновления статуса, управлять профилем и многое другое.Если у вас уже есть аккаунт, войдите или зарегистрируетесь бесплатно!
Уважаемые пользователи IP-Board.ru , спешу сообщить, что каждую неделю администрация будет выкладывать VIP файлы для общего доступа.
Форум нуждается в активных участниках, для получения привилегий на форуме любой пользователь может оставить заявку тут Набор команды на форум. Внесите свой вклад на форум и форум Вас не забудет. ;)

Фотография

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

- - - - - 1С-БИТРИКС

Сообщений в теме: 2

#1
Offline RuBAN

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

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

    Снимок1.png

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

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

    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_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"
    
    )
    
    );?>

    • Теперь создадим шаблон для bitrix:news.list (ШАБЛОН/components/bitrix/news.list/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;?>


    Частный пример.

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

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

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


    <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
    
    <script>
    
    //Slider
    
    $(function(){
    
    $('.slider').slides();
    
    });
    
    </script>
    
    <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 '/'; ?>"><img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arItem["NAME"]?>" /></a>
    
    <?endforeach;?>
    
    </div>
    
    <a href="#" class="prev"></a>
    
    <a href="#" class="next"></a>
    
    </div>


    Вот и всё. Удачи!

    Живой пример: http://opiks-vrn.ru/

    Сообщение отредактировал RuBAN: 17 Июль 2012 в 21:54

    • 2

    #2
    Offline Rain Man

    Rain Man
    • Пользователи
    • 8 339 сообщений
    • 587 тем
    2 593
      1-С, крутой движище, но дорогущий, собака. :( Скачал триал - буду изучать, очень хочу в нём разобраться. :)

      Спасибо, за статью. :)
      • 1

      #3
      Offline RuBAN

      RuBAN
      • Пользователи
      • 8 сообщений
      • 7 тем
      11
        Rain Man, денег он своих не стоит. В исходниках шаблона компонента некоторые тэги были не закрыты))) Документация и поддержка хромают. Многое взято с IP.Content.
        • 0



        Ответить



          



        Количество пользователей, читающих эту тему: 0

        0 пользователей, 0 гостей, 0 анонимных