Данный скрипт можно переделать под свои нужды для любого модуля в системе юкоз, в этом уроке я постараюсь подробнее описать его установку.
Создаем в ротаторе баннер и вставляем туда вот этот содержимое.
Code
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11"> <link type="text/css" rel="StyleSheet" href="http://www.nabran.ru/css/slider1.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); }); </script> </head>
<body>
<div id="featured" >
<ul class="ui-tabs-nav">
<script type="text/javascript" src="http://www.nabran.ru/informer/1"></script></ul>
<!-- First Content -->
<script type="text/javascript" src="http://www.nabran.ru/informer/2"></script>
</div></div> </body> </html>
А теперь по подробнее об установке.
Создаем два информера, но учтите, у обеих информеров параметры должны быть одинаковыми.
Информер новостей (Часть 1)
[ Новости сайта • Материалы • Дата добавления материала A • Материалы: 4 • Колонки: 1 ]
И вставляем туда вот этот код
Code
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-$ID$"><a href="#fragment-$ID$"><img alt="" src="$IMG_URL1..10$" height="50" border="0" width="80" /><font size="1"></font></a></li>
Информер новостей (Часть 2)
[ Новости сайта • Материалы • Дата добавления материала A • Материалы: 4 • Колонки: 1 ]
И вставляем туда вот этот код
Code
<div id="fragment-$ID$" class="ui-tabs-panel" style="">
<img alt="" src="="$IMG_URL1..10$" height="250" border="0" width="400" />
<div class="info" >
<h2><a target="_parent" href="$ENTRY_URL$">$TITLE$</a></h2>
</div>
</div>
<img alt="" src="="$IMG_URL1..10$" height="250" border="0" width="400" />
<div class="info" >
<h2><a target="_parent" href="$ENTRY_URL$">$TITLE$</a></h2>
</div>
</div>
Берем код от информеров (кликаем по названию информера) заменяем коды в созданном баннере в ротаторе, первый вставляем где написано информер 1 и 2
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11"> <link type="text/css" rel="StyleSheet" href="http://www.nabran.ru/css/slider1.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); }); </script> </head>
<body>
<div id="featured" >
<ul class="ui-tabs-nav">
Первый информер - <script type="text/javascript" src="http://www.nabran.ru/informer/1"></script>
</ul>
<!-- First Content -->
Второй информер - <script type="text/javascript" src="http://www.nabran.ru/informer/2"></script>
</div></div> </body> </html>
<head profile="http://gmpg.org/xfn/11"> <link type="text/css" rel="StyleSheet" href="http://www.nabran.ru/css/slider1.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); }); </script> </head>
<body>
<div id="featured" >
<ul class="ui-tabs-nav">
Первый информер - <script type="text/javascript" src="http://www.nabran.ru/informer/1"></script>
</ul>
<!-- First Content -->
Второй информер - <script type="text/javascript" src="http://www.nabran.ru/informer/2"></script>
</div></div> </body> </html>
А этот код в css или вы можете скачать вот этот css документ и установить путь в баннере - http://www.nabran.ru/css/slider1.css
Code
/* ====== Slider ====== */
#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#;
border:0px solid #727372;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:107px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#2E4057;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:1px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#A7D903; background:#0F5FC7;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#84c220;
}
#featured li.ui-tabs-selected{
background:url('/img/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#A7D903;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('/img/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
/* ====== Slider End ====== */
#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#;
border:0px solid #727372;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:107px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#2E4057;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:1px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#A7D903; background:#0F5FC7;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#84c220;
}
#featured li.ui-tabs-selected{
background:url('/img/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#A7D903;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('/img/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
/* ====== Slider End ====== */
А затем берем код от баннера и вставляем его в желаемое место.
Учтите, Вы можете изменить размеры, цвета и параметры слайдера в css коде.
Вот живой пример в шапке – fananji.com
Желаю продвижения в мастерстве.
