Версия: 1.2

Авторы:

Inrus (dletweak.ru) Создание модуля и системы связки с DLE
Sohtanaka (sohtanaka.com) Создание плагина jQuery

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

Совместимость: DLE 6.X - 8.5 (проверялось на 7.5, 8.2 и 8.5)

Демо модуля: http://dletweak.ru/demo-slider

Особенности:

В блоке используется jQuery т.к. предусмотрена поддержка DLE 9.0 в которой этот фреймворк будет по умолчанию.
Легкая настройка дизайна блока.
Управление из админпанели
Создан достаточно умный механизм выбора новостей для блока - например если нет картинок или картинки, это смайлы, новость не будет выводиться, а будет браться следующая вместо нее.
Используется кеширование (которое можно отключить, если по каким-то причинам нужно) для снижения нагрузки ( 0 запросов пока не добавляются новости, 1 запрос если добавлена новость)
Красивое оформление и динамика блока.

Возможности (Сайт):

Вывод блока на главной странице сайта
Вывод последних n новостей сбоку
Вывод картинки из новости, с описанием, которое будет обрезаться по словам если не входит в всплывающий блок)
В новости картинка походит контроль скриптом, если она сильно маленькая (например смайл), новость не будет допущена в блок.
Если картинка не на внешнем сервере, она будет проверена на наличие оригинала (т.к. он обычно больше вставленной в новость каритинки).

Возможности (Админцентр):

Выбор какой-то отдельной категории, из которой будут выводиться новости или выбор всех новостей.
Если выбрана одна категория, можно включить/отключить вывод новостей из подкатегорий этой категории.
Установка количества новостей в слайдере.
Установка времени показа слайдов.
Установка количества слов в описании, до которого оно будет обрезано если слишком длинное.
Минимальные размеры картинки, с которысм она сможет пройти в блок.
Включение/Отключения кеширования слайдера.
Выбор источника описания новости
Выбор источника картинки

Changelog

Установка

1. Переименовать папку upload/templates/{THEME} в название Вашего шаблона.

2. Загрузить все файлы из папки upload в корень сайта

3. Открыть файл engine/init.php

Найти:

Выше добавить:

include_once ENGINE_DIR . '/modules/newsslider.php';

4. Открыть файл index.php

Найти:

$tpl->set ( '{speedbar}', $tpl->result['speedbar'] );

Выше добавить:

$tpl->set ( '{newsslider}', $newsslider);

5. Открыть файл templates/{THEME}/main.tpl

В месте, где должен быть выведен слайдер добавить:

{newsslider}

6. Открыть файл templates/{THEME}/css/engine.css

В самый конец добавить:

/* DLE New Slider v.1.2 */

/* Контейнер слайдера */
.dle_news_slider_container {
overflow: hidden;
width: 900px;
margin: 0 auto;
border: 1px solid #E4E4E4;
padding: 2px;
}
/* Стиль слайдера */
#dle_news_slider_main {

}
/* Стиль площади, на которой находится текущий слайд */
.dle_news_slider_main_image {
width: 500px;
height: 300px;
float: left;
position: relative;
overflow: hidden;
color: #fff;
padding-top: 1px;
}
/* Стиль картинки площади, на которой находится текущий слайд */
.dle_news_slider_main_image img {
width: 500px;
height: 300px;
}
/* Стиль заголовков площади, на которой находится текущий слайд - неиспользуется, нужно только если Вы хотите поставить H2 в качестве заголовка */
.dle_news_slider_main_image h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px;
padding-left: 5px;
padding-bottom: 5px;
}
/* Стиль заголовков площади, на которой находится текущий слайд - неиспользуется */
.dle_news_slider_main_image p {
font-size: 1.2em;
padding: 10px; margin: 0;
line-height: 1.6em;
}
.dle_news_slider_main_image .block small {margin-left: 10px;}
.dle_news_slider_main_image .desc{
position: absolute;
bottom: 0; left: 0;
width: 100%;
display: none;
}
/* Стиль всплывающего блока */
.dle_news_slider_main_image .block{
text-align:left;
width: 100%;
background: #111;
border-top: 1px solid #000;
}
/* Стиль ссылок всплывающего блока */
.dle_news_slider_main_image .block a{

color: #fff;
text-decoration: underline;

}
/* Стиль ссылок всплывающего блока, на которые наведен курсор */
.dle_news_slider_main_image .block a:hover{
text-decoration: none;

}
/* Стиль заголовков всплывающего блока*/
.dle_news_slider_main_image .internal_title {
font-size:16px;
padding: 7px;
}
/* Стиль кнопки скрыть/показать всплывающего блока */
.dle_news_slider_main_image a.collapse {
background: url(../dleimages/vkl_vykl.png) no-repeat left top;
height: 27px; width: 75px;
text-indent: -99999px;
position: absolute;
top: -27px; right: 20px;
}
.dle_news_slider_main_image a.show {
background-position: left bottom;
}
}
/* Стиль бокового блока содержащего список новостей слайдера */
.dle_news_slider_image_thumb {
float: left;
width: 400px;
height: 300px;
text-align: left;
}
/* Стиль картинок бокового блока содержащего список новостей слайдера */
.dle_news_slider_image_thumb img {
margin-right: 10px;
float: left;
width: 60px;
height: 40px;
border: 1px solid #E4E4E4;
}
.dle_news_slider_image_thumb ul {
margin: 0; padding: 0;
list-style: none;
}
/* Стиль блока каждой новости из блока содержащего список новостей слайдера */
.dle_news_slider_image_thumb ul li{
font-size: 12px;
margin: 0;
padding: 8px 8px;
background: #f0f0f0 url(../dleimages/fon_normal.gif) repeat-x;
width: 380px;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
}
/* Стиль блока каждой новости из блока содержащего список новостей слайдера, который показывается в текущий момент*/
.dle_news_slider_image_thumb ul li.hover {
color:#FFF;
cursor: pointer;
background: #f0f0f0 url(../dleimages/fon_active.gif) repeat-x;
}
/* Стиль блока каждой новости из блока содержащего список новостей слайдера, на который наведен курсор */
.dle_news_slider_image_thumb ul li.active {
color:#FFF;
cursor: default;
background: #f0f0f0 url(../dleimages/fon_active.gif) repeat-x;
}
html .dle_news_slider_image_thumb ul li h2 {
font-size: 1.5em;
margin: 5px 0; padding: 0;
}
/* Стиль блока заголовка в блоке каждой новости*/
.dle_news_slider_image_thumb ul li .block {

margin-left: 10px;
padding: 0;
width: 385px;
}
.dle_news_slider_image_thumb ul li p{display: none;}

7. Только если у Вас уже есть jQuery (если нет, переходите к шагу №8) Открыть файл templates/{THEME}/newsslider.tpl

В первой строчке заменить

{THEME}/js/jquery.js

на адрес, по которому находится jquery.js

8. Открыть файл languages/Russian/adminpanel.lng

Найти (самое начало):

'wysiwyg_language' => "ru",

Ниже добавить:

// DLE NEWS SLIDER v.1.2
'opt_sys_ns_item' => "Описание новости",
'opt_sys_ns_ditem' => "Выберите, что будет использоваться при создании описания новости каждого слайда.",
'opt_sys_ns_image' => "Источник картинок",
'opt_sys_ns_dimage' => "Выбор источника картинок каждого слайда",
'opt_slidersys' => "DLE News Slider",
'opt_sys_ns_all' => "Все (и подкатегории)",
'opt_sys_ns_spcat' => "Категория",
'opt_sys_ns_dspcat' => "Выбор категории, из которой будут выводиться новости в слайдер",
'opt_sys_ns_subs' => "Вывод из подкатегрий",
'opt_sys_ns_dsubs' => "При включении будут выводиться и новости из подкатегорий выбраноой категории.",
'opt_sys_ns_number' => "Количество новостей",
'opt_sys_ns_dnumber' => "Количество новостей в слайдере <br><strong>Внимание</strong> При смене, нужно редактировать шаблон и стили модуля т.к. в спсике слайдера визуально присутствуют только певые 5 новостей по умолчанию.",
'opt_sys_ns_time' => "Время слайда новости",
'opt_sys_ns_dtime' => "Время показа каждого слайда новости в секундах.",
'opt_sys_ns_words' => "Количество слов",
'opt_sys_ns_dwords' => "Если в тексте новости будет больше слов чем Вы установите, он будет обрезан до нужного количества слов и вставлен в выезжающий блок описания новости.",
'opt_sys_ns_xsz' => "Минимальная ширина картинки",
'opt_sys_ns_dxsz' => "Минимальный размер ширины картинки, при котором новость содержащая эту картинку будет принята в список слайдера. <br>По умолчанию: 500px",
'opt_sys_ns_ysz' => "Минимальная высота картинки",
'opt_sys_ns_dysz' => "Минимальный размер высоты картинки, при котором новость содержащая эту картинку будет принята в список слайдера. <br>По умолчанию: 300px",
'opt_sys_ns_cache' => "Кеширование слайдера",
'opt_sys_ns_dcache' => "Включение кеширования слайдера позволяет значительно снизить нагрузку т.к. информация в слайдере будет обновляться только при добавлении новостей.",

9. Открыть файл engine/inc/options.php

Найти:

document.getElementById('smartphone').style.display = "none";

Ниже добавить:

document.getElementById('slider').style.display = "none";

Найти:

if(selectedOption == 'rss') {document.getElementById('rss').style.display = "";}

Ниже добавить:

if(selectedOption == 'slider') {document.getElementById('slider').style.display = "";}

Найти:

Ниже добавить:

Найти:

showRow( $lang['opt_sys_frss'], $lang['opt_sys_frssd'], makeDropDown( array ("0" => $lang['opt_sys_rss_type_2'], "1" => $lang['opt_sys_rss_type_3'], "2" => $lang['opt_sys_rss_type_4'] ), "save_con[rss_format]", "{$config['rss_format']}" ) );

echo "</table></td></tr>";

Ниже добавить:

#*****************************************************************
# DLE NEWS SLIDER V.1.2
#*****************************************************************

echo <<<HTML
<tr style='display:none' id="slider"><td>
<table width="100%">
<tr>
<td bgcolor="#EFEFEF" height="29" style="padding-left:10px;"><div class="navigation">{$lang['opt_slidersys']}</div></td>
</tr>
</table>
<div class="unterline"></div><table width="100%">
HTML;

$categories = $db->query("SELECT id,name,posi,parentid FROM ".PREFIX."_category WHERE parentid = 0 ORDER BY posi ASC");
while($row = $db->get_row($categories) ) {

if( $row['id'] == $config['newsslider_spcat']) $categories_list .= "<option value=\"{$row[id]}\" selected>{$row[name]}</option>\r\n";
else $categories_list .= "<option value=\"{$row[id]}\">{$row[name]}</option>\r\n";
}
$category_selector = "<select name=\"save_con[newsslider_spcat]\" class=\"edit\" style=\"width: 200px;\">
<option value=\"all\">{$lang['opt_sys_ns_all']}</option>
{$categories_list}
</select>";
if( !$config['newsslider_number'] OR !is_numeric($config['newsslider_number'])) $config['newsslider_number'] = 5;
if( !$config['newsslider_time'] OR !is_numeric($config['newsslider_time'])) $config['newsslider_time'] = 1;
if( !$config['newsslider_words'] OR !is_numeric($config['newsslider_words'])) $config['newsslider_words'] = 15;
if( !$config['newsslider_x_size'] OR !is_numeric($config['newsslider_x_size'])) $config['newsslider_x_size'] = 500;
if( !$config['newsslider_y_size'] OR !is_numeric($config['newsslider_y_size'])) $config['newsslider_y_size'] = 300;
if( !$config['newsslider_cache'] OR ( $config['newsslider_cache'] != 1 AND $config['newsslider_cache'] != 0 ) ) $config['newsslider_cache'] = 1;
if( !$config['newsslider_fulltext'] OR !is_numeric($config['newsslider_fulltext'])) $config['newsslider_fulltext'] = 0;
if( !$config['newsslider_fullimage'] OR !is_numeric($config['newsslider_fullimage'])) $config['newsslider_fullimage'] = 0;

showRow( $lang['opt_sys_ns_spcat'], $lang['opt_sys_ns_dspcat'], $category_selector );
showRow( $lang['opt_sys_ns_subs'], $lang['opt_sys_ns_dsubs'], makeDropDown( array ("1" => $lang['opt_sys_yes'], "0" => $lang['opt_sys_no'] ), "save_con[newsslider_multicat]", "{$config['newsslider_multicat']}" ) );
showRow( $lang['opt_sys_ns_number'], $lang['opt_sys_ns_dnumber'], "<input class=\"edit bk\" type=text style=\"text-align: center;\" name='save_con[newsslider_number]' value=\"{$config['newsslider_number']}\" size=10>" );
showRow( $lang['opt_sys_ns_item'], $lang['opt_sys_ns_ditem'], makeDropDown( array ("1" => str_replace(":","",$lang['addnews_full']), "0" => str_replace(":","",$lang['addnews_short']) ), "save_con[newsslider_fulltext]", "{$config['newsslider_fulltext']}" ) );
showRow( $lang['opt_sys_ns_image'], $lang['opt_sys_ns_dimage'], makeDropDown( array ("1" => str_replace(":","",$lang['addnews_full']), "0" => str_replace(":","",$lang['addnews_short']) ), "save_con[newsslider_fullimage]", "{$config['newsslider_fullimage']}" ) );
showRow( $lang['opt_sys_ns_time'], $lang['opt_sys_ns_dtime'], "<input class=\"edit bk\" type=text style=\"text-align: center;\" name='save_con[newsslider_time]' value=\"{$config['newsslider_time']}\" size=10>" );
showRow( $lang['opt_sys_ns_words'], $lang['opt_sys_ns_dwords'], "<input class=\"edit bk\" type=text style=\"text-align: center;\" name='save_con[newsslider_words]' value=\"{$config['newsslider_words']}\" size=10>" );
showRow( $lang['opt_sys_ns_xsz'], $lang['opt_sys_ns_dxsz'], "<input class=\"edit bk\" type=text style=\"text-align: center;\" name='save_con[newsslider_x_size]' value=\"{$config['newsslider_x_size']}\" size=10>" );
showRow( $lang['opt_sys_ns_ysz'], $lang['opt_sys_ns_dysz'], "<input class=\"edit bk\" type=text style=\"text-align: center;\" name='save_con[newsslider_y_size]' value=\"{$config['newsslider_y_size']}\" size=10>" );
showRow( $lang['opt_sys_ns_cache'], $lang['opt_sys_ns_dcache'], makeDropDown( array ("1" => $lang['opt_sys_yes'], "0" => $lang['opt_sys_no'] ), "save_con[newsslider_cache]", "{$config['newsslider_cache']}" ) );
echo "</table></td></tr>";

#*****************************************************************
# DLE NEWS SLIDER V.1.2
#*****************************************************************

Готово. Зайдите в настройки модуля и установите всё как Вам нужно.

Если Вы всё сделали правильно, модуль должен заработать ;)

Enjoy.

С уважением,

Бирюков Роман a.k.a Inrus