Мы здесь: rss twitter vk facebook

Самые новые скрипты для Ucoz

На нашем портале вы найдете не только скрипты, но и видео обучение и много интересного!
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Форумчик » Скрипты для Ucoz готовые » Слайдер для uCoz с миниатюрами
Слайдер для uCoz с миниатюрами
Administrator Дата: Среда, 08.02.2012, 15:32 | Сообщение # 1 Offline

Сообщений: 293
Генералиссимус
- +

Слайдер для uCoz с миниатюрами. В данной статье будет рассказано, как благодаря двум информерам uCoz, знаниям html-css и библиотеки jQuery, создать на своём сайте слайдер новостей с миниатюрами.

Установка:
И так мы всё знаем, а кто не знает читает, на сайтах uCoz уже встроена библиотека jQuery, поэтому нам следует установить в конец страницы перед тегом следующие два скрипта:
Code
<script type="text/javascript" src="http://www.center-dm.ru/ucoz/ContentSlider/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>

Отлично, теперь нам необходимо создать два одинаковых информера, но с разным html кодом в шаблоне:

Заходим в Админ панель => Инструменты => Информеры => Создать информер

Раздел: Новости
Тип данных: Материал
Способ сортировки: Количество просмотров (на своё усмотрение)
Количество материалов: 5
Количество колонок:1

и устанавливаем в первый информер следующий html код:
Code
<div class="panel" title="Panel $NUMBER$">
   <div class="wrapper">   
   <?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" alt="temp"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$" alt="temp"><?endif?><?endif?>
   <div class="photo-meta-data">
   <a href="$ENTRY_URL$">$TITLE$</a>   
   </div>
   </div>
</div>

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

теперь установим в нужное место на страницы вашего сайта, следующий основной html код каркаса нашего слайдера, с информерами:

Code
<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>

Наш слайдер почти готов, всё что нам осталось, так это прописать css стили:
Code

/* Слайдер с миниатюрами
------------------------------------------*/
#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;}

.slider-wrap {
   position: absolute;
   overflow: hidden;
   width:502px;
   height: 150px;
}   
    
   .panelContainer {   
   position: relative;

}

.stripViewer {
   position: relative;
   overflow: hidden;
   width: 502px;
   height: 150px;
}

.panel {
   float: left;
   position: relative;
   width: 502px;
}

.wrapper {
   border: 1px solid #333;
}   

.photo-meta-data {
   position: relative;
   font: 110%/1.5 Verdana,Arial,Helvetica, sans-serif; font-weight: bold;
   color:#cbcbcb; text-shadow: 1px 1px 1px #000;
   background: url(http://www.center-dm.ru/ucoz/ContentSlider/transpBlack.png);
   padding: 5px 5px 5px 5px;
   margin-top: -30px;
   z-index: 9999;
}

.stripNavL,
.stripNavR,
.stripNav {display: none; }

#movers-row {
   width: 502px;
   margin: -43px 0 0 0;
}

#movers-row div {
   float: left;
   width: 90px;
   height: 30px;
   margin: 0px 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: transparent url(http://www.center-dm.ru/ucoz/ContentSlider/icon-uparrowsmallwhite.png) top center no-repeat;
}/* -------------------------------------- */

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

Скорость слайдера меняем во втором скрипте, меняем значение 2000 на своё.


Мои сайты:
China-Telephon Все для китайских телефонов
Megasayt все для Ucoz
 
Форум » Форумчик » Скрипты для Ucoz готовые » Слайдер для uCoz с миниатюрами
  • Страница 1 из 1
  • 1
Поиск: