Как сделать слайдер новостей из обычного слайдшоу
galina2601 20-02-2015, 01:43 7 524 Уроки по CMS / Уроки по DLEВ последних шаблонах сайтов на DLE часто встречается такая интересная штука, как "слайдер новостей". То есть не просто какое-то там слайд шоу со сменой пары-тройки заранее выбранных фотографий, пусть даже и с текстом, а полноценный слайдер, изменяющийся автоматически при добавлении новости. Добавил администратор новость, а она тут как тут - в слайдере. И делать ничего не надо, все само автоматически выбирается.
А как же эту фишку вставить самому на существующий сайт на движке DLE?
Оказывается, все не так уж и сложно.
Во-первых, надо скачать какой-либо скрипт обычного слайдера фотографий. Их на просторах Интернета огромное количество. Лично мне импонирует сайт http://freeweber.ru. Там собрана прекрасная коллекция слайдеров.
Для примера возьмем один из них. Мне понравился вот этот:
Ну, а в принципе, можно взять абсолютно любой слайдер картинок.
Итак, скачали, распаковали и смотрим, что там есть:
Не факт, что именно так будет выглядеть "начинка" всех слайдеров, но общее у них есть.
Итак, первое - это файл с расширением .html
Он может называться и demo, и install, и example... Не важно, главное, что он есть.
Во-вторых, всегда будет папочка с картинками. Здесь она называется images.
В-третьих, должна быть папка со скриптами на JS. И тут она присутствует с именем scripts.
В-четвертых должна быть папка с файлами стилей, ну или просто файл стилей. В данном примере папки нет, есть просто файл с расширением .css, но чаще всего эти файлы размещаются в папке с аналогичным именем css или style
В этом слайдере есть еще папочка с psd файлами стрелочек, то есть мы их сможем слегка отредактировать под свои нужды, если захотим, конечно. Но обычно такие бонусы бывают редко.
Итак. Приступаем к установке.
Первым делом копируем файлы скриптов и библиотек из папки scripts в аналогичную папку в шаблоне DLE.
Найти ее можно по адресу: корень сайта/themplate/ваш шаблон/js
Затем копируем файлы стилей. Почти по тому же адресу, но не в папку js, а в папку css или style, как она именуется в вашем шаблоне, я не знаю.
Тут , правда, есть один нюанс. Чаще всего файлы стилей называют style.css. Если в шаблоне сайта и в папке слайдера файл имеет одно и то же имя, надо не копировать сам файл, чтобы не стереть нужную информацию, а скопировать содержимое и вставить в файл на сайте. Ну, или переименовать файл, а затем копировать. В нашем случае один файл называется style, так что будьте внимательны, второй имеет название nivo-slider.css
Нужно скопировать и картинки, но не все, а только стрелки и фоны. Но если лень разбираться, копируйте все. Места это почти не займет, а шанс пропустить что-то важное исчезает. Понятно, что картинки нужно копировать в папку с картинками вашего шаблона.
Это путь: корень сайта/themplate/ваш шаблон/images
Все, нужное скопировали.
Сейчас займемся файлами main.tpl из шаблона и demo.html из слайдера.
Открываем demo.html
Во-первых, подключение стилей и скриптов. То есть строчки в заголовке между тегами <HEAD> и </HEAD> и скрипты в конце
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
Затем в нужное место файла main.tpl вставляем для начала строки вызова картинок,
то бишь:
Далее, нам надо заменить вот эти 4 тега <img > на вызов новости из нужной категории, то есть вставить команду:
{custom category="2,3" template="slide" aviable="global" from="0" limit="8" cache="yes"}
Здесь category="2,3" номера категорий, информацию из которых надо выводить, slide название шаблона короткой новости, limit="8" - количество последних новостей.
