WEB лаборатория DLE » DataLife Engine » Хаки DLE » Модуль Слайдер DLE без модов
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 2
    Пользователей: 0
    Гостей: 2


    Последние комментарии
    ...
    HI-tech:
    1

    Модуль Слайдер DLE без модов

    Автор: Robot_DLElabкатегория: DataLife Engine » Хаки DLEдата: 8-06-2013, 01:45
    Модуль Слайдер DLE без модов


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

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

    Установка:
    1. Сам JS-код слайдера и CSS к нему можно скачать с GitHub.
    2. Загружаем файл jquery.smslider.min.js из архива в папку /templates/ШАБЛОН/js/.
    3. Загружаем файл smslider.css из архива в папку /templates/ШАБЛОН/css/.
    4. Картинку sm_arr.png заливаем в /templates/ШАБЛОН/images/.
    5. В шаблон main.tpl перед:
    </head>

    Добавляем:
    <link type="text/css" rel="stylesheet" href="{THEME}/style/smslider.css" />
    <script type="text/javascript" src="{THEME}/js/jquery.smslider.min.js"></script>

    6. В нужное место вставляем код:
    <div id="sm_slider">
        <ul>
            { custom template="slide"}
        </ul>
    </div>

    7. В конце шаблона main.tpl добавляем код, запускающий слайдер:
    <script type="text/javascript">
        $(document).ready(function(){
            $('#sm_slider').smSlider()
        })
    </script>

    Теперь в smslider.css правим путь до картинки на ../images/ (Да, 2 точки, это не опечатка).

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

    Теперь поговорим о том, что мы сделали. В теге {custom} мы указали, что необходимо работать с шаблоном slide.tpl. Сам slide.tpl выводит 1 картинку из новости, если она существует, делая её ссылкой на новость.

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

    Версия DLE: 9.x
    Автор: Горбушка



    Теги: dle, хак

    Другие новости по теме:


    Вячеслав

    • 26 декабря 2013 11:50

    При копи-пасте кода появляется сообщение

    "Источник: http://vans1.ru/1339-modul-slayder-dle-bez-modov.html#sel=20:9,20:12"

    Это плохо
    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.