Предлагаю вашему вниманию скрипт и стиль для слайдера предназначенного для кино сайтов на uCoz через использование информеров, с выводом последних к примеру фильмов или игр. Просмотрите сам вид того какого он размера и что он отображает, все картинки должны быть одного желаемого размера, к примеру постеры к фильму, или игре, выводится картинка сама, название с выделением, так же его категория.
Мы использовали модуль
news новости, вы можете подставить в любой другой модуль только измените настройке при создание информаторов , с именем названия категорий раздела, и самим названием.
Для вывода информации мы используем два блока с информерами, в том что они работают одинаково с обновлением не даст иметь смещение названия от постера картинки, все будет появляться синхронно, для тех кто не понимает смысл этого объясняю, 4 инфор. нам выводит название а 5 саму картинку с категорией раздела и ссылкой на материал.
При наведение на название интересующее вас выделяется строка, и показывается скрин к этой новости моментально с плавным переходом на библиотеке с
Слайдер создавался на сайте ucozon.ru под заказ, заказчик от него отказался и за того что он значительно нагружает страницу при обновление страницы или первом заходе, всему причина от большей части вес графического элемента, если вес не будет превышать более чем 15-25 кб то проблем не должно быть, но все же перед использование обратите внимание в разных браузерах в несколько обновлений страниц.
Сделан был блок из разработок официальных сайта
jquery и переделан в виде отображения и формы размеров под определенный сайт. Форма статическая!
Изменить цвет, и форму не очень сложно, даже расположение картинки с лева на право или наоборот.
Установка и настройка с использованием собственных новостей: В
< head > страницы вставляем код скриптов с библиотеками проигрывания jquery
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>
В то место вашего шаблона где желаем видеть отображение слайдера вставляем код с информерами предварительно создав два информатора:
Code
<div id="featured">
<ul class="ui-tabs-nav">
$MYINF_4$
</ul>
$MYINF_5$
</div>
Можно и таким способом вывести, разницы не какой, последний вариант это для отображения на другом сайте.
$MYINF_4$ = http://ucozon.ru/informer/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>
настройки-
[ Новости сайта · Материалы · Дата добавления материала 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>
настройки-
[ Новости сайта · Материалы · Дата добавления материала 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>
В таблицу стилей вставляем сам стиль 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;
}
Меню сайта
Меню сайта
