Слайдер для ucoz - Форум
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Дизайнерская » Скрипты » Слайдер для ucoz
Слайдер для ucoz
KronДата: Среда, 07.12.2011, 02:44 | Сообщение # 1
Гл.Администратор
Группа: Администраторы
Сообщений: 179
Репутация: 314
Статус: Offline

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

следует установить на страницу сайта, после тега body, следующие скрипты:

Code
<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

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

Code
<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>


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

Code
<div id="slider" class="nivoSlider">   
   $MYINF_1$   
    </div>


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

Code
<div id="slider" class="nivoSlider">   
   <script type="text/javascript" src="http://www.center-dm.ru/informer/1"></script>   
    </div>


Шаг-3 CSS:

Code
<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>


Примечание:

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

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

Скачать: nivoslider_dla-ucoz.rar [98,52 Kb]


 
Форум » Дизайнерская » Скрипты » Слайдер для ucoz
Страница 1 из 11
Поиск: