Любовь к спорту на всю жизнь
Привет, Гость!

  • Страница 1 из 1
  • 1
Слайдер для ucoz
Torres_1_Дата: Воскресенье, 07.08.2011, 19:39 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 2124
Награды: 0
Репутация: 12
Статус: Offline
Слайдер для ucoz

[img]НЕТ ИЗОБРАЖЕНИЯ[/img]

Слайдер для ucoz. Давайте рассмотрим пример установки слайдера для uCoz, под названием Slider, который будет отображать на вашем сайте последние изображения новостей

Шаг-1 JS:
Качаем: нет ссылки

Код
<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>   
<script type="text/javascript">   
    $(window).load(function() {   
    $('#slider').nivoSlider();   
    };);   
</script>


Шаг-2 Html:
Заходим в админ панель => Инструменты => Информеры => Создать информер

И создаём информер новостей, с нужными вам параметрами, советую установить количество материалов: 5 или 7

теперь копируем в информер следующий код:

Код
<a href="$ENTRY_URL$"><?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" title="$TITLE$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$" title="$TITLE$"><?endif?><?endif?></a>


а там, где хотите видеть слайдер, устанавливайте следующий код, в котором находиться ваш информер:

Код
<div id="slider" class="nivoSlider">   
$MYINF_1$   
    </div>


Хочу сразу предупредить, слайдер будет отображаться не корректно, если вы пропишите информер ссылкой на скрипт то а именно:

Код
<div id="slider" class="nivoSlider">   
<script type="text/javascript" src="НЕТ ФАЙЛА"></script>   
    </div>


Шаг-3 CSS:

Код
<style>   

/* меняем размер изображений высоту и ширину */   
#slider {    
    position:relative;   
    width:500px;   
    height:100px;   
    background:url('loading.gif') no-repeat 50% 50%;   
}   

#slider img {   
    position:absolute;   
    top:0px;   
    left:0px;   
    display:none;   
}   

#slider a {   
    border:0px;   
    display:block;   
}   

/* выравниваем по центру квадраты переключателя */   
.nivo-controlNav {   
    position:absolute;   
    left:180px;   
    bottom:-25px;   
}   

.nivo-controlNav a {   
    display:block;   
    width:22px;   
    height:22px;   
    background:url('bullets.png') no-repeat;   
    text-indent:-9999px;   
    border:0;   
    margin-right:3px;   
    float:left;   
}   

.nivo-controlNav a.active {   
    background-position:0 -22px;   
}   

.nivo-directionNav a {   
    display:block;   
    width:30px;   
    height:30px;   
    background:url('arrows.png') no-repeat;   
    text-indent:-9999px;   
    border:0;   
}   
a.nivo-nextNav {   
    background-position:-30px 0px;   
    right:15px;   
}   

a.nivo-prevNav {   
    left:15px;   
}   

.nivo-caption {   
    text-shadow:none;   
    font-family: Helvetica, Arial, sans-serif;   
}   
.nivo-caption a {    
    color:#efe9d1;   
    text-decoration:underline;   
}   

.clear {   
    clear:both;   
}   

.nivoSlider {   
    position:relative;   
}   

.nivoSlider img {   
    position:absolute;   
    top:0px;   
    left:0px;   
}   

.nivoSlider a.nivo-imageLink {   
    position:absolute;   
    top:0px;   
    left:0px;   
    width:100%;   
    height:100%;   
    border:0;   
    padding:0;   
    margin:0;   
    z-index:6;   
    display:none;   
}   

.nivo-slice {   
    display:block;   
    position:absolute;   
    z-index:5;   
    height:100%;   
}   

.nivo-box {   
    display:block;   
    position:absolute;   
    z-index:5;   
}   

/* Полупрозрачный чёрный фон */   
.nivo-caption {   
    position:absolute;   
    left:0px;   
    bottom:0px;   
    background: url('fon_nivo-caption.png') repeat;   
    font:11px Verdana,Arial,Helvetica, sans-serif; color:#fff; font-weight: bold;   
    width:100%;   
    z-index:8;   
}   

.nivo-caption p {   
    padding:6px;   
    margin:0;   
}   
.nivo-caption a {   
    display:inline !important;   
}   
.nivo-html-caption {   
    display:none;   
}   

.nivo-directionNav a {   
    position:absolute;   
    top:25%;   
    z-index:9;   
    cursor:pointer;   
}   

.nivo-prevNav {   
    left:0px;   
}   
.nivo-nextNav {   
    right:0px;   
}   

.nivo-controlNav a {   
    position:relative;   
    z-index:9;   
    cursor:pointer;   
}   
.nivo-controlNav a.active {   
    font-weight:bold;   
}   
</style>


Примечание:
Для тех кто впервые сталкивается со слайдером, хочу сказать, что данный слайдер будет отображать изображения новостей в том случае, если вы добавляете картинку новостей через функцию добавить изображение, которое находиться в Добавлении новостей, к которым вы переходи с главной странице своего сайта, нажав на ссылку Добавить новость! (надеюсь не запутал).

Чтобы вам не пришлось искать где изменить например высоту квадратных кнопок, я прописал комментария для наиболее важных стилей, которые понадобятся для изменениях под ваш дизайн.
 
_W_Дата: Понедельник, 22.08.2011, 17:51 | Сообщение # 2
Сержант
Группа: Пользователи
Сообщений: 13
Награды: 0
Репутация: 0
Статус: Offline
Супер. wink

 
  • Страница 1 из 1
  • 1
Поиск:
Навигация
Главная страница Форум сайта Создание сайтов на uCoz Заработок в интернете Уроки Photoshop Автомобиль от А до Я Электроника Всё для смартфонов Браузерные игры Музыка Последние комментарии Статистика
Развлечения
Сегодня день рождения у: Описание сайта
Новое на форуме
Опрос
Опрос сайта
Что вы делаете на сайте
javascript:; javascript:;
Всего ответов: 119

Общение
Загрузка…
Статистика
Зарег. на сайте
Всего: 267
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Из них
Администраторов: 1
Модераторов: 0
Проверенных: 1
Обычных юзеров: 264
Из них
Парней: 234
Девушек: 33


Друзья сайта
Возможен баннерообмен 81х31.Писать ЛС.