Jump to content
  • Слайдер Flexslider для Invision Community




    В данной статье мы "подружим" статьи приложения Страницы в Invision Community со слайдером Flexslider. Создадим блок с последними статьями (новости/инструкции/статьи) и заставим их крутиться с помощью слайдера. Получится нечто похожее:

    flex.gif

    Блок размещён в боковой панели, однако его можно переместить в любое место.

    #1 - шаблон слайдера

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

    • Название - flexslider
    • Плагин - Страницы/Лента записи
    • Тема - текущая стандартная тема

    После этого откроем наш шаблон в группе Шаблоны блока плагина. Добавим в него следующий код:

    Spoiler
    
    {{if !empty( $records ) }}
    	<div id="main" role="main">
          <section class="slider">
            <div class="flexslider">
              <ul class="slides">
    				{{foreach $records as $record}}
    					<li class='ipsDataItem'>
                          	<a href="{$record->url()}"><img src="/uploads/{$record->record_image}" style="max-width:500px; width:100%"></a>
    						<div class='ipsDataItem_main'>
    							<div class='ipsType_break ipsContained'>
    								<a href="{$record->url()->setQueryString( 'do', 'getLastComment' )}" title='{lang="view_this_cmsrecord" sprintf="\IPS\Member::loggedIn()->language()->addToStack( 'content_db_lang_sl_' . $record::$customDatabaseId, FALSE ), $record->_title"}' class='ipsDataItem_title' style="font-weight:bold">{$record->_title}</a>
    							</div>
    							<p class='ipsType_reset ipsType_blendLinks' style="margin:10px 0">
    								
    								<span class="ipsType_light">{datetime="$record->mapped('date')"}</span>
    							</p>
                              
                              	<div class='ipsType_reset ipsType_blendLinks' data-ipsTruncate data-ipsTruncate-type='remove' data-ipsTruncate-size='4 lines'>
                                  {$record->_content|raw}
                                </div>
    						</div>
    					</li>
    				{{endforeach}}
    			</ul>
    		</div>
          </section>
    	</div>
    {{endif}}

     

    СОхраним шаблон.

    #2 - создание блока

    Далее необходимо создать блок. На этот счёт у нас есть специальная пошаговая инструкция -> https://invisionbyte.ru/docs/apps/pages/bloki-r119/

    Тип блока - плагин; плагин - лента из вашей базы данных.  Укажите произвольное название и ключ блока. На вкладке Конфигурация укажите количество статей, которые будут крутиться в слайдере. На вкладке Контент выберите Шаблон - flexslider.

    Сохраним блок.

    #3 - подключение CSS и Javascript

    Перейдём в меню Внешний вид > Темы -> Управление ресурсами -> Добавить ресурс. 

    Загрузите файл jquery.flexslider.js и скопируйте тег шаблона этого файла. Теперь изменим HTML и CSS код темы. в шаблоне globalTemplate перед закрывающимся тегом </body> вставьте конструкцию:

    Spoiler
    
    		<script src='{resource="jquery.flexslider.js" app="core" location="global"}'></script>
              <script>
                $(window).load(function() {
                $('.flexslider').flexslider({
                  animation: "slide",
                  slideshowSpeed: 5000
                });
              });
              </script>

     

    Соответственно поправьте ссылку на ресурс, возможно у вас он будет другой. 

    В строчке slideshowSpeed: 5000 вы можете изменить скорость переключения слайдов. По умолчанию слайды меняются через 5 секунд.

    Добавим новый CSS файл в шаблонах темы. Файл назовём flexslider.css и изменим theme_css_location с global на front. Так наш файл будет создан рядом с custom.css. Добавим следующий код в css файл:

    Spoiler
    
    /*
     * jQuery FlexSlider v2.6.2
     * http://www.woothemes.com/flexslider/
     *
     * Copyright 2012 WooThemes
     * Free to use under the GPLv2 and later license.
     * http://www.gnu.org/licenses/gpl-2.0.html
     *
     * Contributing author: Tyler Smith (@mbmufffin)
     *
     */
    /* ====================================================================================================================
     * COPY INVISIONBYTE.RU
     * ====================================================================================================================*/
    /* ====================================================================================================================
     * RESETS
     * ====================================================================================================================*/
    .flex-container a:hover,
    .flex-slider a:hover {
      outline: none;
    }
    .slides,
    .slides > li,
    .flex-control-nav,
    .flex-direction-nav {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .flex-pauseplay span {
      text-transform: capitalize;
    }
    /* ====================================================================================================================
     * BASE STYLES
     * ====================================================================================================================*/
    .flexslider {
      margin: 0;
      padding: 0;
    }
    .flexslider .slides > li {
      display: none;
      -webkit-backface-visibility: hidden;
    }
    .flexslider .slides img {
      width: 100%;
      display: block;
    }
    .flexslider .slides:after {
      content: "\0020";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
    }
    html[xmlns] .flexslider .slides {
      display: block;
    }
    * html .flexslider .slides {
      height: 1%;
    }
    .no-js .flexslider .slides > li:first-child {
      display: block;
    }
    /* ====================================================================================================================
     * DEFAULT THEME
     * ====================================================================================================================*/
    .flexslider {
      margin: 0 0 0;
      background: #fff;
      border: 4px solid #fff;
      position: relative;
      zoom: 1;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
      -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
      box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
    }
    .flexslider .slides {
      zoom: 1;
    }
    .flexslider .slides img {
      height: auto;
      -moz-user-select: none;
    }
    .flex-viewport {
      max-height: 2000px;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
    }
    .loading .flex-viewport {
      max-height: 300px;
    }
    .carousel li {
      margin-right: 5px;
    }
    .flex-direction-nav {
      *height: 0;
    }
    .flex-direction-nav a {
      text-decoration: none;
      display: block;
      width: 78px;
      height: 55px;
      padding-top: 10px;
      margin: -20px 0 0;
      position: absolute;
      top: 27%;
      z-index: 10;
      overflow: hidden;
      opacity: 0;
      cursor: pointer;
      color: rgba(0, 0, 0, 0.8);
      text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    .flex-direction-nav a:before {
      font-family: "FontAwesome";
      font-size: 40px;
      display: inline-block;
      content: '\f060';
      color: rgba(0, 0, 0, 0.8);
      text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
      z-index:99999;
    }
    .flex-direction-nav a.flex-next:before {
      content: '\f061';
    }
    .flex-direction-nav .flex-prev {
      left: -50px;
    }
    .flex-direction-nav .flex-next {
      right: -50px;
      text-align: right;
    }
    .flexslider:hover .flex-direction-nav .flex-prev {
      opacity: 0.7;
      left: 10px;
    }
    .flexslider:hover .flex-direction-nav .flex-prev:hover {
      opacity: 1;
    }
    .flexslider:hover .flex-direction-nav .flex-next {
      opacity: 0.7;
      right: 10px;
    }
    .flexslider:hover .flex-direction-nav .flex-next:hover {
      opacity: 1;
    }
    .flex-direction-nav .flex-disabled {
      opacity: 0!important;
      filter: alpha(opacity=0);
      cursor: default;
      z-index: -1;
    }
    .flex-pauseplay a {
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: 5px;
      left: 10px;
      opacity: 0.8;
      z-index: 10;
      overflow: hidden;
      cursor: pointer;
      color: #000;
    }
    .flex-pauseplay a:before {
      font-family: "FontAwesome";
      font-size: 20px;
      display: inline-block;
      content: '\f004';
    }
    .flex-pauseplay a:hover {
      opacity: 1;
    }
    .flex-pauseplay a.flex-play:before {
      content: '\f003';
    }
    .flex-control-nav {
      width: 100%;
      position: absolute;
      bottom: -40px;
      text-align: center; display:none;
    }
    .flex-control-nav li {
      margin: 0 6px;
      display: inline-block;
      zoom: 1;
      *display: inline;
    }
    .flex-control-paging li a {
      width: 11px;
      height: 11px;
      display: block;
      background: #666;
      background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
      text-indent: -9999px;
      -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
      -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
    }
    .flex-control-paging li a:hover {
      background: #333;
      background: rgba(0, 0, 0, 0.7);
    }
    .flex-control-paging li a.flex-active {
      background: #000;
      background: rgba(0, 0, 0, 0.9);
      cursor: default;
    }
    .flex-control-thumbs {
      margin: 5px 0 0;
      position: static;
      overflow: hidden;
    }
    .flex-control-thumbs li {
      width: 25%;
      float: left;
      margin: 0;
    }
    .flex-control-thumbs img {
      width: 100%;
      height: auto;
      display: block;
      opacity: .7;
      cursor: pointer;
      -moz-user-select: none;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
    }
    .flex-control-thumbs img:hover {
      opacity: 1;
    }
    .flex-control-thumbs .flex-active {
      opacity: 1;
      cursor: default;
    }
    /* ====================================================================================================================
     * RESPONSIVE
     * ====================================================================================================================*/
    @media screen and (max-width: 860px) {
      .flex-direction-nav .flex-prev {
        opacity: 1;
        left: 10px;
      }
      .flex-direction-nav .flex-next {
        opacity: 1;
        right: 10px;
      }
    }

     

     

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

    Ссылка на flexslider - http://flexslider.woothemes.com/

    Если будет спрос, напишем инструкцию по применению карусели для Invision Community.

     



    • Thanks 1


      Report запись


    User Feedback


    There are no comments to display.



    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Add a comment...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

    Loading...

Messenger

    ×
    ×
    • Create New...

    Important Information

    By using our site you agree to our Privacy Policy