[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум uThemes » Уроки по web-дизайну » JavaScript » uThemes Slider (Слайдер-информер материалов сайта)
uThemes Slider
GuruДата: Четверг, 18.03.2010, 04:43 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 47
Награды: 2
Репутация: 2
Статус: Offline
В этой теме описывается реализация информера в виде слайдера, как у нас на сайте.

Для установки такого слайдера на ваш сайт в системе Юкоз потребуется выполнить следующие действия:

1) Для начала заходим в Панель Управления сайтом и переходим по ссылке Информеры. Создаем новый информер для отображения материалов из нужного Вам модуля, указав при этом:
- Тип данных – «Материалы»;
- Способ сортировки – любой из представленных;
- Количество материалов – нужное Вам;
- Количество колонок – 1.

Затем изменяем шаблон нашего информера, кликнув по ссылке Шаблон информера справа от названия:

Code
<div class="panel" style="background:url('$IMG_URLn$') top left no-repeat;">
   <div class="insert">
    <span class="ititle"><a href="$ENTRY_URL$"><?if(len($TITLE$)>25)?><?substr($TITLE$,0,22)?>...<?else?>$TITLE$<?endif?></a></span>
     <?if(len($MESSAGE$)>168)?><?substr($MESSAGE$,0,165)?>...<?else?>$MESSAGE$<?endif?>
     

<span class="featuredmorelink">
     <a href="$ENTRY_URL$" title="$TITLE$">Подробнее...</a>
    </span>
   </div>
</div>

2) Скачиваем прикрепленный к данному сообщению архив. В нем содержатся файл стилей slider.css и папка “slider” со скрипом и картинками. Заливаем папку и стили в корень сайта.

3) Теперь дело осталось за малым – вставить слайдер на страницы сайта. Для этого необходимо в шаблонах дописать перед строку:

Code
<link rel="stylesheet" href="slider.css" type="text/css" />

а перед :
Code
<script src="slider/slider.js" type="text/javascript"></script>

В место, где будет выводиться информер, записываем следующее:

Code
<div id="sliderbox">
   <div id="slider">
    <div class="scroll">
     <div class="scrollcont">
      $MYINF_m$
     </div>
    </div>
   </div>
</div>

Для большего удобства указанный выше код можно записать в глобальный блок.

Примечания:
1) В $IMG_URLn$ и $MYINF_m$ необходимо изменить значения n и m соответственно на номер картинки, отвечающей за вывод изображения в информере, и номер информера, отвечающего за вывод материалов в слайдере.
2) В данном слайдере используются изображения размером 553x238 (px), что следует учитывать при добавлении материалов.

Если у вас возникли вопросы или трудности с установкой данного скрипта, не стесняйтесь, пишите и мы постараемся найти решение.

Прикрепления: uslider.zip(5.4 Kb)
 
DiSayДата: Пятница, 19.03.2010, 21:28 | Сообщение # 2
Лейтенант
Группа: Модераторы
Сообщений: 40
Награды: 0
Репутация: 1
Статус: Offline
если я запишу код к глобальный блок,то чтобы он был не по бокам страницы а примерно в центре,нужно указать координаты его вставки,но как мне их узнать?
P.S. я еще чайник в скриптинге dry
 
GuruДата: Суббота, 20.03.2010, 02:28 | Сообщение # 3
Генералиссимус
Группа: Администраторы
Сообщений: 47
Награды: 2
Репутация: 2
Статус: Offline
Код записываешь в глобальный блок и вставляешь его в шаблон страницы, заключив в теги <center>...</center>. Т.е., если у тебя глобальный блок с кодом слайдера имеет название $GLOBAL_SLIDER$, то в код страницы в нужное место пишешь:

Code
<center> $GLOBAL_SLIDER$</center>
 
avigoДата: Среда, 31.03.2010, 18:20 | Сообщение # 4
Рядовой
Группа: Пользователи
Сообщений: 10
Награды: 0
Репутация: 0
Статус: Offline
У вас ошибка в стиле, там папка не slider а JS smile

Добавлено (31.03.2010, 18:20)
---------------------------------------------
и в скрипте тоже не поменяли

Сообщение отредактировал avigo - Среда, 31.03.2010, 18:20
 
GuruДата: Четверг, 01.04.2010, 01:11 | Сообщение # 5
Генералиссимус
Группа: Администраторы
Сообщений: 47
Награды: 2
Репутация: 2
Статус: Offline
Спасибо! Архив обновил...
 
avigoДата: Вторник, 13.04.2010, 15:35 | Сообщение # 6
Рядовой
Группа: Пользователи
Сообщений: 10
Награды: 0
Репутация: 0
Статус: Offline
Quote
Код записываешь в глобальный блок и вставляешь его в шаблон страницы, заключив в теги <center>...</center>

А не легче установить через CSS стили?

 
GuruДата: Вторник, 13.04.2010, 17:14 | Сообщение # 7
Генералиссимус
Группа: Администраторы
Сообщений: 47
Награды: 2
Репутация: 2
Статус: Offline
Что именно?
 
NinjaCatДата: Среда, 14.04.2010, 17:03 | Сообщение # 8
Рядовой
Группа: Пользователи
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline
можно как нить сделать что бы он сам перелистывался ? ну типа менялся слайд каждые 5 сек
 
GuruДата: Четверг, 15.04.2010, 01:22 | Сообщение # 9
Генералиссимус
Группа: Администраторы
Сообщений: 47
Награды: 2
Репутация: 2
Статус: Offline
Сейчас как раз ищу это решение. Найду, отпишусь...
 
IceBoXДата: Суббота, 12.06.2010, 17:22 | Сообщение # 10
Рядовой
Группа: Пользователи
Сообщений: 6
Награды: 0
Репутация: 0
Статус: Offline
Guru, Отличный скрипт happy
 
Форум uThemes » Уроки по web-дизайну » JavaScript » uThemes Slider (Слайдер-информер материалов сайта)
  • Страница 1 из 1
  • 1
Поиск: