20.02.2015

Как сделать слайдер новостей из обычного слайдшоу

В последних шаблонах сайтов на DLE часто встречается такая интересная штука, как "слайдер новостей".  То есть не просто какое-то там слайд шоу со сменой пары-тройки заранее выбранных фотографий, пусть даже и с текстом, а полноценный слайдер, изменяющийся автоматически при добавлении новости. Добавил администратор новость, а она тут как тут - в слайдере. И делать ничего не надо, все само автоматически выбирается.

А как же эту фишку вставить самому на существующий сайт на движке DLE?

Оказывается, все не так уж и сложно.

Во-первых, надо скачать какой-либо скрипт обычного слайдера фотографий. Их на просторах Интернета огромное количество. Лично мне импонирует сайт http://freeweber.ru. Там собрана прекрасная коллекция слайдеров.

Для примера возьмем один из них. Мне понравился вот этот:

 

СлайдерСлайдер

Если у вас не получается скачать его оттуда, можете взять здесь: Tabbed_Slider.zip [426,04 Kb] (cкачиваний: 109)

 

Ну, а в принципе, можно взять абсолютно любой слайдер картинок.

Итак, скачали, распаковали и смотрим, что там есть:

Скрин

 Не факт, что именно так будет выглядеть "начинка" всех слайдеров, но общее у них есть.

Итак, первое - это файл с расширением .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" />

          <script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>
          <script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
           <script type="text/javascript">
                  $(window).load(function() {
                  $('#slider').nivoSlider({directionNavHide:false});
                    });
            </script>

Затем в нужное место файла main.tpl  вставляем  для начала строки вызова картинок,

то бишь: 

       <div id="slider-wrapper">
             <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" alt="" />
                <img src="images/up.jpg" alt="" />
                <img src="images/walle.jpg" alt="" />
                <img src="images/nemo.jpg" alt="" />
            </div>
        </div>

Далее, нам надо заменить вот эти 4 тега <img > на вызов новости из нужной категории, то есть вставить команду:

{custom category="2,3" template="slide" aviable="global" from="0" limit="8" cache="yes"}

Здесь category="2,3" номера категорий, информацию из которых надо выводить, slide название шаблона короткой новости, limit="8" - количество последних новостей.