Доступно только для пользователей
Устанавливаем на страницу сайта (после тега body), следующие скрипты:Code
<script type="text/javascript" src="/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Идем в ПУ -> Инструменты -> Информеры -> Создать информер.
Создаём информер новостей, с нужными вам параметрами, и копируем в информер следующий код: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_9$
</div>
Далее идут CSS-стили:Code
<style>
body {margin:0 auto;padding:0;width:100%;height:100%;background:#fff;}
body, td {font:11px Verdana, Arial, Helvetica, sans-serif;color:#555;}
img {border:none;}
a {text-decoration:none;outline:none}
a:link {text-decoration:none;color:#2C68A6;}
a:visited {text-decoration:none;color:#2C68A6;}
a:hover {text-decoration:none;color:#60a62c;}
#container {margin:0px auto;width:500px;height:100%;}
#container_os {margin:100px 0px 50px 0px;}
#container_os h2 {font:145%/1.5 Verdana,Arial,Helvetica,sans-serif;color:#008000;font-weight:bold;border-bottom:1px solid #D6D6D6;}
.otstup {margin:20px 0px 20px 0px;}
/* размер изображений высота/ширина */
#slider {
position:relative;
width:400px;
height:200px;
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:10px; /* положение кубиков от лева */
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;
}
Внимание!
Слайдер будет отображать изображения новостей в том случае, если вы добавляете картинку новостей непосредственно через функцию добавить изображение. Иначе не Айс!
Кто не желает пучится, Можете скачать в Прикреплениях архив с готовыми файлами
=============
=============
=============
Тоже слайд демо . смотрим исходник