+ +

Слайдер для uCoz с миниатюрами

Слайдер для uCoz с миниатюрами
Цена: БЕСПЛАТНО
Просмотров: 18236
Добавлено: 14.05.2013
Контакты: Автор (VK) (Онлайн)
Файл добавил: Alan_Writer
Архив шаблона: СКАЧАТЬ
Демо: НЕТУ
Информация о материале
Всем доброго утра, сегодня мы с вами будем создавать очередной слайдер для uCoz новостей, поискав на европейских блогах слайдер я так и не нашёл нужного мне решения, так как была одна большая загвоздка во многих слайдерах, не подходила встроенная в uCoz библиотека jQuery, я уже собирался идти пить чай, как тут наткнулся на слайдер с миниатюрами, сразу скажу дабы не огорчать многих пользователей, у данного слайдера имеется один большой минус, мы будем использовать не один информер новостей как положено, а два и так смотрим демо...

Установка слайдера

1. Итак мы всё знаем, а кто не знает читает, на сайтах uCoz уже встроена библиотека jQuery, поэтому нам следует установить в конец страницы перед тегом </body> следующие два скрипта:
Код
<script type="text/javascript" src="http://fullweb.ucoz.ru/SCRIPTS/Slim/jquery1.2.pack.js"></script>  
<script type="text/javascript">
var theInt = null;  
var $crosslink, $navthumb;  
var curclicked = 0;  
theInterval = function(cur){  
clearInterval(theInt);  
if( typeof cur != 'undefined' )  
curclicked = cur;  
$crosslink.removeClass("active-thumb");  
$navthumb.eq(curclicked).parent().addClass("active-thumb");  
$(".stripNav ul li a").eq(curclicked).trigger('click');  
theInt = setInterval(function(){  
$crosslink.removeClass("active-thumb");  
$navthumb.eq(curclicked).parent().addClass("active-thumb");  
$(".stripNav ul li a").eq(curclicked).trigger('click');  
curclicked++;  
if( 6 == curclicked )  
curclicked = 0;  
}, 2000); // скорость слайдера
};
$(function(){
$("#center_dm-ru_photoslider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb  
.click(function() {  
var $this = $(this);  
theInterval($this.parent().attr('href').slice(1) - 1);  
return false;
});  
theInterval();  
});
</script>

2. Теперь необходимо создать два одинаковых информера, но с разным html-кодом в шаблоне. Оба информера должны выводить 5 материалов в 1 колонку, способ сортировки выбирайте на свое усмотрение. Устанавливаем в первый информер следующий html-код:
Код
<div class="panel" title="Panel $NUMBER$">  
<div class="wrapper">  
<img src="<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else>$IMG_URL1$<?endif?>" alt="temp"/>
<div class="photo-meta-data">  
<a href="$ENTRY_URL$">$TITLE$</a>  
</div>  
</div>  
</div>

Теперь создаём второй информер с такими же параметрами как в первом и вставляем в его шаблон следующий html-код:
Код
<div>
<a href="#$NUMBER$" class="cross-link">
<img src="<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>$IMG_URL1$<?endif?>" class="nav-thumb" alt="temp-thumb"/>
</a>
</div>

Теперь в том место где вы бы хотели видеть слайдер - вставляем сам его каркас с кодами вызова ранее созданных информеров:
Код
<div id="page-wrap">  
<div class="slider-wrap">  
<div id="center_dm-ru_photoslider" class="csw">  
<div class="panelContainer">$MYINF_1$</div>  
</div>  
<div id="movers-row">$MYINF_2$</div>  
</div>  
</div>

3. И последнее, прописываем css-стили:
Код
#page-wrap {position:relative;width:502px;}  
#page-wrap a {outline:none;text-decoration:none;}  
#page-wrap a:link,#page-wrap a:visited {color:#cbcbcb;text-shadow:1px 1px 1px #000;}  
#page-wrap a:hover {color:#8cea87;}

.panelContainer {position:relative;}
.wrapper {border:1px solid#333;}
.stripNavL,.stripNavR,.stripNav {display:none;}

.slider-wrap {position:absolute;overflow:hidden;width:502px;height:150px;}
.stripViewer {position:relative;overflow:hidden;width:502px;height:150px;}
.panel {float:left;position:relative;width:502px;}

.photo-meta-data {  
position:relative;
font:14px Verdana,Arial,Helvetica,sans-serif;
font-weight:bold;
color:#cbcbcb;
text-shadow:1px 1px 1px #000;
background:url('http://fullweb.ucoz.ru/SCRIPTS/Slim/transp.png');
padding:5px;
margin-top:-30px;
z-index:9999;}

#movers-row {width:502px;margin:-43px 0 0 0;}
#movers-row div {float:left;width:90px;height:30px;margin:0 5px 10px 5px;}
#movers-row img {width:90px;height:30px;border:1px solid#333;}

.cross-link {  
position: relative;  
display: block;  
width: 90px;  
margin-top: -8px;  
padding-top: 10px;  
z-index: 9999;}  

.active-thumb {  
background:url('http://fullweb.ucoz.ru/SCRIPTS/Slim/uparrow.png')top center no-repeat;}

Примечания! Хочу напомнить, что следует устанавливать именно системную переменную информера такого вида ($MYINF_1$), а не прописывать ссылкой, в противном случае информер может отображать контент неверно или вообще перестанет работать как показано на странице демо. Скорость слайдера меняем во втором скрипте, меняем значение 2000 на своё.

Теги: jQuery, Слайдер для uCoz с миниатюрами, Информер, для uCoz, с миниатюрами, Слайдер, ucoz
Комментарии (2)
avatar
1
Скрипты пустые. Файлов больше нет. Сколько не пытался пройти по ссылкам скрипта этого сайта, все пустые. Страницы не существуют, сами проверьте.
avatar
2
Так архив приложен - скачай и залей себе на сайт.