Инфо Слайдер в DataLife Engine без модов

Тема в разделе "DLE", создана пользователем Горбушка, 1 июн 2013.

Информация :
Актуальная версия DataLife Engine 11.3
( Final Release v.11.3 | Скачать DataLife Engine | Скачать 11.3 demo )
Нужно ли обновляться | Как обновиться | Изменения в шаблонах
> Нет русских символов <
[Приватная тема DLE (Все подробности в ЛС к модератору раздела)]

Версии 11.2 и ниже - уязвимы!

Локализации | F.A.Q. | Внешний вид
Правила раздела | Правила форума
Обсуждение хайда карается баном!
В каждом сообщении указывайте версию DLE, которого они касаются!
Модераторы: killoff
  1. Горбушка

    Горбушка Ищу её...

    Регистр.:
    2 май 2008
    Сообщения:
    3.175
    Симпатии:
    2.197
    Многие из Вас знаю о существовании в DLE тега {custom}, но почти никто его не использует, а зря. Сегодня я расскажу как с помощью этого тега и правки лишь шаблона сделать полноценный слайдер.

    И так, первым делом определимся с тем, что нам понадобится. Нам нужен JS-код слайдера, шаблон 1 слайда, шаблон main.tpl и настройки для тега {custom}. Начнём по порядку.

    Выбираем слайдер. Особых требований к нему нет, мне понравился smSlider. Сам JS-код слайдера и CSS к нему можно скачать с GitHub (Перейти по ссылке). Вставляется на сайт он очень просто, приступаем.

    Для начала берём jquery.smslider.min.js из архива и загружаем в папку /templates/ШАБЛОН/js/, файл smslider.css в папку /templates/ШАБЛОН/style/. Картинку sm_arr.png заливаем в /templates/ШАБЛОН/images/. В шаблон main.tpl перед </head> добавляем:
    HTML:
    <link type="text/css" rel="stylesheet" href="{THEME}/style/smslider.css" />
    <script type="text/javascript" src="{THEME}/js/jquery.smslider.min.js"></script>
    В нужное место вставляем код:
    HTML:
    <div id="sm_slider">
        <ul>
            {custom template="slide"}
        </ul>
    </div>
    В конце шаблона main.tpl добавляем код, запускающий слайдер:
    HTML:
    <script type="text/javascript">
        $(document).ready(function(){
            $('#sm_slider').smSlider()
        })
    </script>
    Теперь в smslider.css правим путь до картинки на ../images/ (Да, 2 точки, это не опечатка).

    Отлично, слайдер установлен, но он не работает – у него нет ни единого слайда. Этим мы сейчас и займёмся. Создадим шаблон slide.tpl и запишем туда код:
    HTML:
    [image-1]<li><a href="{full-link}"><img src="{image-1}" alt="{title}" /></li>[/image-1]
    Теперь поговорим о том, что мы сделали. В теге {custom} мы указали, что необходимо работать с шаблоном slide.tpl. Сам slide.tpl выводит 1 картинку из новости, если она существует, делая её ссылкой на новость.

    Вот и всё. Никакие сложные изменения в движке не требуются. Вы так же можете добавить кэширование, вывод только из 1 категории и т.д. Можно поменять размер картинки (сейчас он явно слишком большой для сайта). Так же можно выводить краткий текст из статьи. Ничего сложного в этом нет.

    Спасибо за внимание. Что у нас получилось можно посмотреть тут: Перейти по ссылке

    Источник: Перейти по ссылке
    Автор: Я, Горбушка
    Версия ДЛЕ: 9.8
    Демо: Перейти по ссылке
    Цена: Бесплатно
     
    Гостья, GwizZzzz, KMaster и 3 другим нравится это.
  2. funnywheel

    funnywheel WordPress developer

    Регистр.:
    6 авг 2010
    Сообщения:
    221
    Симпатии:
    148
    Натолкните на здравую мысль пожалуйста. Делаю шаблон на bootstrap'e, хочу вывести через {custom} записи из определенной категории, соль ситуации - class="active", который назначается отображаемому слайду, выглядит у меня все вот так:

    HTML:
    
    ...
    <div id="blogCarousel" class="carousel slide">
        <div class="carousel-inner">
            {custom category="3" limit="5" template="custom_news"}
        </div>
    </div>
    ...
    
    custom_news.tpl:
    HTML:
    
    <div class="item">
      <a href="{full-link}">
      <img src=
         [xfgiven_customnews_poster]"[xfvalue_customnews_poster]"[/xfgiven_customnews_poster]
         [xfnotgiven_customnews_poster]"{THEME}/img/customnews.png"[/xfnotgiven_customnews_poster]
      alt="" class="align-left blog-thumb-preview" />
      </a>
       <div class="post-info clearfix">
      <h4><a href="{full-link}">{title}</a></h4>
         <ul class="blog-details-preview">
           <li><i class="icon-calendar"></i><strong>Дата:</strong> {date}<li>
          <li><i class="icon-user"></i><strong>Добавил:</strong> {author}<li>
          <li><i class="icon-comment"></i><strong>Комментариев:</strong> {comments-num}<li>
         </ul>
       </div>
      <p class="blog-summary">{short-story} <a href="{full-link}">Подробнее</a><p>
    </div>
    
    задача - в custom_news.tpl для <div class="item"> первому элементу поставить <div class="item active">, ибо при загрузке страницы слайд не отображается, пока вручную не кликнешь по кнопочке "следующий"

    В правилах хорошего тона: DLE 10.0, Bootstrap 2.1.1
     
  3. Горбушка

    Горбушка Ищу её...

    Регистр.:
    2 май 2008
    Сообщения:
    3.175
    Симпатии:
    2.197
    Плохой вариант:
    HTML:
    <div id="blogCarousel" class="carousel slide">
        <div class="carousel-inner">
            {custom category="3" limit="1" template="custom_news_activ"}
            {custom category="3" limit="4" from="2" template="custom_news"}
        </div>
    </div>
    Но по мне - лучше переделать сам код слайдера, чтобы он не был привязан к active, либо добавить JS, который выставляет этот active для первого дочернего элемента...
     
    funnywheel нравится это.
  4. funnywheel

    funnywheel WordPress developer

    Регистр.:
    6 авг 2010
    Сообщения:
    221
    Симпатии:
    148
    Плохой вариант отрабатывает, спасибо.
    Пока оставлю его, т.к. в JS я весьма слаб, но попытаюсь реализовать по человечески.
     
  5. dalurist

    dalurist Создатель

    Регистр.:
    16 мар 2017
    Сообщения:
    30
    Симпатии:
    0
    "Теперь в smslider.css правим путь до картинки на ../images/ (Да, 2 точки, это не опечатка)."
    В файле нет пути до картинки.
    Тема закрыта, пишу здесь...
     
    Последнее редактирование модератором: 16 май 2017
  6. killoff

    killoff CD тихо, и не DVD меня ;)

    Moderator
    Регистр.:
    13 май 2008
    Сообщения:
    2.175
    Симпатии:
    801
    Обрати внимание, что тема была создана в 2013 году! Исходники слайдера на гитхабе, и вероятнее всего слайдер просто обновлен был уже несколько раз.
    2017-05-16_11-11-23.png

    Следуй остальной инструкции и всё будет работать если сделать правильно.
     
  7. killoff

    killoff CD тихо, и не DVD меня ;)

    Moderator
    Регистр.:
    13 май 2008
    Сообщения:
    2.175
    Симпатии:
    801
    Тему открыл только для обсуждения и помощи в настройке слайдеров через custom! Поиск слайдеров и другие вопросы, не касающиеся помощи в настройке слайдера - ищите и пишите/задавайте в соответствующих разделах.
     
  8. dalurist

    dalurist Создатель

    Регистр.:
    16 мар 2017
    Сообщения:
    30
    Симпатии:
    0
    Предложенный механизм замечательно работает, однако в стилях слайдера положение контрола навигации и контролов переходов на следующий слайд (точки внизу и стрелки перехода) прописаны для полностраничного слайдера и располагаются по краям экрана браузера:
    .
    Код:
    sm_prev,
    .sm_next {
      width: 25px;
      height: 25px;
      margin: -20px 0 0 0;
      cursor: pointer;
      display: block;
      font-style: normal;
      opacity: .3;
      position: absolute;
      top: 50%;
      z-index: 999;
      border-style: solid;
      border-color: #4e4e4e;
      border-width: 0px;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
    Как сделать так, чтобы контролы располагались в блоке куда помещен слайдер?
     
    Последнее редактирование: 19 май 2017
  9. killoff

    killoff CD тихо, и не DVD меня ;)

    Moderator
    Регистр.:
    13 май 2008
    Сообщения:
    2.175
    Симпатии:
    801
    1. Добавь код выше упомянутый в CODE.
    2. Нужно видеть сайт чтоб подсказать какие стили подправить. То что тут выложено абсолютно ни о чем не говорит.
     
  10. dalurist

    dalurist Создатель

    Регистр.:
    16 мар 2017
    Сообщения:
    30
    Симпатии:
    0
    Да в любом шаблоне контролы по бокам окна браузера