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

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

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

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

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

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

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

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

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

    Для начала берём 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 категории и т.д. Можно поменять размер картинки (сейчас он явно слишком большой для сайта). Так же можно выводить краткий текст из статьи. Ничего сложного в этом нет.

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

    Источник: http://gorbushka.name/blog/6-web/43-slider_in_DLE.html
    Автор: Я, Горбушка
    Версия ДЛЕ: 9.8
    Демо: Демо
    Цена: Бесплатно
     
    GwizZzzz, KMaster, funnywheel и 2 другим нравится это.
  2. funnywheel

    funnywheel

    Регистр.:
    6 авг 2010
    Сообщения:
    178
    Симпатии:
    111
    Натолкните на здравую мысль пожалуйста. Делаю шаблон на 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.039
    Симпатии:
    2.045
    Плохой вариант:
    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

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