Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Стол заказов » Горизонтальный слайдер

Горизонтальный слайдер


 Basil_CHe    03.11.2011    стол заказов    Стол заказов    7410    12 комментариев


Эксперты! Очень нужен горизонтальный слайдер новостей... нигде не могу найти а нужен на подобии только с поддержкой 20 топ новостей и выводом 5 из них, а остальные в слайд

12 комментариев

Sander
PHP-developer

Sander - 4 ноября 2011 03:01 -

Можно подождать с недельку, я доделаю модуль S-Blocks v2.0.
Там можно будет выводить блок почти в любом слайдере.
Демо: vconcepte.ru

SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804

ПафНутиЙ
Админ

ПафНутиЙ - 4 ноября 2011 09:55 -

Это слайдер называется jcarousel и вертикальное положение - это лишь одна из его возможностей.

P.S. не заметил, что пост находится в столе заказов))) поправил.

Каков вопрос - таков и ответ. Просто помните об этом.

Basil_CHe
Юзер

Basil_CHe - 5 ноября 2011 14:14 -

Да я знаю как он называется, но как реализовать его под top-news?

ПафНутиЙ
Админ

ПафНутиЙ - 5 ноября 2011 14:37 -

Использовать нестандартный модуль topnews

Каков вопрос - таков и ответ. Просто помните об этом.

Basil_CHe
Юзер

Basil_CHe - 5 ноября 2011 16:41 -

sad Я конечно не чайник но и не до такой степени гениален.... как его использовать?

ПафНутиЙ
Админ

ПафНутиЙ - 5 ноября 2011 18:16 -

Берём модуль block.pro (говорю о нём т.к. его сам писал и знаю что с его помощью это несложно осуществить)
Начнём со структуры карусели:
Это наипростейшая конструкция (описана в официальной документации):
<ul id="mycarousel">
   <li>контент</li>
   <li>контент</li>
   <li>контент</li>
</ul>

Нам нужно тупо картинки. Поэтому открываем файл модуля, ищем там:
$top_adv .= '<div class="t_news"><a href="'.$t_link.'" title="<strong>'.$full_title.'</strong><br />'.$t_story.'">'.$image.'</a></div>';

и меняем на такой вид элемента, который хочет наша карусель:
$top_adv .= '<li class="t_news"><a href="'.$t_link.'" title="<strong>'.$full_title.'</strong><br />'.$t_story.'">'.$image.'</a></li>';

т.е. тупо сменили div на li

Далее ищем чуть ниже:
$adv_top = '<div id="top_block_'.$block_num.'" class="blockpro">'.$top_adv.'</div>';

меняем на:
$adv_top = '<ul id="top_block_'.$block_num.'" class="blockpro">'.$top_adv.'</ul>';


Строка подключения модуля будет такая:
{include file="engine/modules/block.pro.php?&block_num=top20&news_num=20&variant=2&t_img_w=180title_length=0&story_length=100"}

Будет 20 новостей в виде картинок 180*60px с title из заголовка и краткого содержимого, обрезанного примерно для 100 символов, по последнее законченное слово.

Каков вопрос - таков и ответ. Просто помните об этом.

ПафНутиЙ
Админ

ПафНутиЙ - 5 ноября 2011 18:16 -

Далее настраиваем карусель.
подключаем как написано в докаx
<script type="text/javascript" src="{THEME}/js/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="{THEME}/css/skin.css" />
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

$(function() {
    jQuery('#top_block_top20').jcarousel({
        wrap: 'circular',
        auto: 5,
        scroll: 1,
        animation: 500,
        initCallback: mycarousel_initCallback
    });
});
</script>

Где #top_block_top20 - это id блока (если изменить id в строке подключения нужно не забыть и этот поменять на соответствующий)
Ну и сам скрипт инициализации карусели я привёл вполне рабочий, который сам использовал на одном из проектов.

Далее настраиваем CSS так, чтобы показывалось нужное кол-во новостей (т.е. тупо ширину блока) и радуемся жизни)))

Если есть желание - можете кинуть немного $$ на развитие сайта ===>>>

Каков вопрос - таков и ответ. Просто помните об этом.

Basil_CHe
Юзер

Basil_CHe - 6 ноября 2011 20:05 -

А вроде разобрался что как сделать кроме подключения модуля - что где прописывать чтобы карусель заменила {include file= и где его подключать?

ПафНутиЙ
Админ

ПафНутиЙ - 7 ноября 2011 06:38 -

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

Каков вопрос - таков и ответ. Просто помните об этом.

Basil_CHe
Юзер

Basil_CHe - 7 ноября 2011 14:38 -

фигняхрень какаято не жрёт карусель блок и ппц...

ПафНутиЙ
Админ

ПафНутиЙ - 7 ноября 2011 15:11 -

а карусель то прально подключена?

Каков вопрос - таков и ответ. Просто помните об этом.

Basil_CHe
Юзер

Basil_CHe - 7 ноября 2011 15:24 -

Да - если пишу
<ul id="top_block_top20" class="jcarousel-skin-tango">
  <li>... </li>
<li>... </li>
<li>... </li>
<li>...</li>
<li>... </li>
  </ul>

Выводит нормально, но если пишу
{include file="engine/modules/block.pro.php?&block_num=top20&news_num=20&variant=2&t_img_w=180title_length=0&story_length=100"}

Выдает топ блок вертикально без карусели =(

Чтобы комментировать - войдите или зарегистрируйтесь на сайте
наверх