Предоставляю очень интересный скрипт для сайтов с тематикой Кино. Слайдер с использованием информера, выводит список последних фильмов или игр или что хотите. В скрипте используется модуль Новости, если хотите вы можете поставить другой модуль, вам останется только изменить настройки при создании информеров. Для вывода самой информации, используются два блокас информерами, работают они одинаково с обновлением. При наведении на интересующее вас название фильма или игры, выделяется строка и естественно показывается скрин к этому фильму.
Установка:
Установка и настройка с использованием собственных новостей:
В панели управления, в управлении дизайном в страницы вставляем код:
В нужное место вашего шаблона, где хотим видеть наш слайдер вставляем код:
(информеры можно создать с такими же номерами либо с другими но потом изменив их здесь)
Конечно же можно и таким простым способом вывести, собственно разницы никакой нет, последний вариант это для отображения на другом сайте:
$MYINF_4$
Далее создаем информер №4 с такими параметрами:
[ Новости сайта => Материалы => Дата добавления материала D => Материалы: 10 => Колонки: 1 ]
И в дизайн информера ставим это:
Теперь создаем информер №5 с такими параметрами:
[ Новости сайта => Материалы => Дата добавления материала D => Материалы: 10 => Колонки: 1 ]
В дизайн информера:
И последний этап установки, идем в панель управления => управление дизайном => Таблица стилей ( CSS ) и в любое место ставим:
Установка:
Установка и настройка с использованием собственных новостей:
В панели управления, в управлении дизайном в страницы вставляем код:
Code
<script type="text/javascript" src="http://ucozon.ru/SCRIN7/2/00121/js/jquery-ui.min.js" ></script>
<script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); }); </script>
<script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); }); </script>
В нужное место вашего шаблона, где хотим видеть наш слайдер вставляем код:
(информеры можно создать с такими же номерами либо с другими но потом изменив их здесь)
Code
<div id="featured">
<ul class="ui-tabs-nav">
$MYINF_4$
</ul>
$MYINF_5$
</div>
<ul class="ui-tabs-nav">
$MYINF_4$
</ul>
$MYINF_5$
</div>
Конечно же можно и таким простым способом вывести, собственно разницы никакой нет, последний вариант это для отображения на другом сайте:
$MYINF_4$
Code
<div id="featured">
<ul class="ui-tabs-nav">
<script type="text/javascript" src="http://ucozon.ru/informer/4"></script>
</ul>
<script type="text/javascript" src="http://ucozon.ru/informer/5"></script>
</div>
<ul class="ui-tabs-nav">
<script type="text/javascript" src="http://ucozon.ru/informer/4"></script>
</ul>
<script type="text/javascript" src="http://ucozon.ru/informer/5"></script>
</div>
Далее создаем информер №4 с такими параметрами:
[ Новости сайта => Материалы => Дата добавления материала D => Материалы: 10 => Колонки: 1 ]
И в дизайн информера ставим это:
Code
<li class="ui-tabs-nav-item<?if($NUMBER$="1")?> ui-tabs-selected<?endif?>" id="nav-fragment-$NUMBER$">
<a href="#fragment-$NUMBER$" onMouseOver="click('')" style="padding-left:5px;"><span><b><?if(len($TITLE$)>40)?><?substr($TITLE$,0,39)?>...<?else?>$TITLE$<?endif?></b></span></a></li>
<a href="#fragment-$NUMBER$" onMouseOver="click('')" style="padding-left:5px;"><span><b><?if(len($TITLE$)>40)?><?substr($TITLE$,0,39)?>...<?else?>$TITLE$<?endif?></b></span></a></li>
Теперь создаем информер №5 с такими параметрами:
[ Новости сайта => Материалы => Дата добавления материала D => Материалы: 10 => Колонки: 1 ]
В дизайн информера:
Code
<div id="fragment-$NUMBER$" class="ui-tabs-panel" style=""><a href="$ENTRY_URL$"><img src=" $IMG_URL1$ " alt="" height="290" width="220"></a><div class="info"><h2>
<a href="$CATEGORY_URL$">Смотреть все..<blink>.</blink></a></h2><p>$CATEGORY_NAME$</p></div></div>
<a href="$CATEGORY_URL$">Смотреть все..<blink>.</blink></a></h2><p>$CATEGORY_NAME$</p></div></div>
И последний этап установки, идем в панель управления => управление дизайном => Таблица стилей ( CSS ) и в любое место ставим:
Code
#featured{
width:495px;
padding-right:230px;
position:relative;
border:5px solid #79B0FB;
height:292px;
background:#79B0FB;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; right:220px;
list-style:none;
padding:0; margin:0;
width:500px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-right:13px;
font-size:12px;
color:#ffffff;
}
#featured ul.ui-tabs-nav li img{
float:right; margin:2px 5px;
background:#ffffff;
padding:2px;
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:27px;
color:#ffffff; background:#6FA6F1;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#79B0FB;
}
#featured li.ui-tabs-selected{
background:url('http://ucozon.ru/_dr/61/69710971.png') top right no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
color:#ebebeb; background:#659CE7;
}
#featured .ui-tabs-panel{
width:220px; height:290px; right:-505;
background:#2D9F45; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:250px; right:0;
height:42px;
width:220px;
background: url('http://ucozon.ru/_dr/61/56640692.png');
}
#featured .info h2{
font-size:16px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 8px;
font-family:Verdana; font-size:10px;
line-height:10px; color:#FDFDFD;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
width:495px;
padding-right:230px;
position:relative;
border:5px solid #79B0FB;
height:292px;
background:#79B0FB;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; right:220px;
list-style:none;
padding:0; margin:0;
width:500px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-right:13px;
font-size:12px;
color:#ffffff;
}
#featured ul.ui-tabs-nav li img{
float:right; margin:2px 5px;
background:#ffffff;
padding:2px;
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:27px;
color:#ffffff; background:#6FA6F1;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#79B0FB;
}
#featured li.ui-tabs-selected{
background:url('http://ucozon.ru/_dr/61/69710971.png') top right no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
color:#ebebeb; background:#659CE7;
}
#featured .ui-tabs-panel{
width:220px; height:290px; right:-505;
background:#2D9F45; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:250px; right:0;
height:42px;
width:220px;
background: url('http://ucozon.ru/_dr/61/56640692.png');
}
#featured .info h2{
font-size:16px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 8px;
font-family:Verdana; font-size:10px;
line-height:10px; color:#FDFDFD;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
Источник: ucozon.ru
