DEMO
Всем доброго утра, сегодня мы с вами будем создавать очередной слайдер для uCoz новостей, поискав на европейских блогах слайдер я так и не нашёл нужного мне решения, так как была одна большая загвоздка во многих слайдерах, не подходила встроенная в uCoz библиотека jQuery, я уже собирался идти пить чай, как тут наткнулся на слайдер с миниатюрами, сразу скажу дабы не огорчать многих пользователей, у данного слайдера имеется один большой минус, мы будем использовать не один информер новостей как положено, а два
Шаг 1 - Установим JS:
И так мы всё знаем, а кто не знает читает, на сайтах uCoz уже встроена библиотека jQuery, поэтому нам следует установить в конец страницы перед тегом </body> следующие два скрипта:
JS
Code
<script type="text/javascript" src="http://www.center-dm.ru/ucoz/ContentSlider/jquery1.2.pack.js"></script> <br> <script type="text/javascript"> <br> var theInt = null; <br> var $crosslink, $navthumb; <br> var curclicked = 0; <br> theInterval = function(cur){ <br> clearInterval(theInt); <br> if( typeof cur != 'undefined' ) <br> curclicked = cur; <br> $crosslink.removeClass("active-thumb"); <br> $navthumb.eq(curclicked).parent().addClass("active-thumb"); <br> $(".stripNav ul li a").eq(curclicked).trigger('click'); <br> theInt = setInterval(function(){ <br> $crosslink.removeClass("active-thumb"); <br> $navthumb.eq(curclicked).parent().addClass("active-thumb"); <br> $(".stripNav ul li a").eq(curclicked).trigger('click'); <br> curclicked++; <br> if( 6 == curclicked ) <br> curclicked = 0; <br> }, 2000); <br> }; <br><br> $(function(){ <br> $("#center_dm-ru_photoslider").codaSlider(); <br> $navthumb = $(".nav-thumb"); <br> $crosslink = $(".cross-link"); <br> $navthumb <br> .click(function() { <br> var $this = $(this); <br> theInterval($this.parent().attr('href').slice(1) - 1); <br> return false; <br> }); <br> theInterval(); <br> }); <br> </script>
Шаг 2 - Установим HTML:
Отлично, теперь нам необходимо создать два одинаковых информера, но с разным html кодом в шаблоне:
Заходим в Админ панель => Инструменты => Информеры => Создать информер
Раздел: Новости
Тип данных: Материал
Способ сортировки: Количество просмотров (на своё усмотрение)
Количество материалов: 5
Количество колонок:1
и устанавливаем в первый информер следующий html код:
HTML-Code
Code
<br><div class="panel" title="Panel $NUMBER$"> <br> <div class="wrapper"> <br> <?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" alt="temp"><?else?><img src="$IMG_URL1$" alt="temp"><?endif?><!--?endif?--> <br> <div class="photo-meta-data"> <br> <a href="$ENTRY_URL$">$TITLE$</a> <br> </div> <br> </div> <br> </div>
теперь создаём второй информер с такими же параметрами как в первом информере и вставляем в его шаблон следующий html код:
HTML-Code
Code
<br><div><a href="#$NUMBER$" class="cross-link"><?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" class="nav-thumb" alt="temp-thumb" /><?else?><img src="$IMG_URL1$" class="nav-thumb" alt="temp-thumb" /><?endif?><!--?endif?--></a></div><br><br>теперь установим в нужное место на страницы вашего сайта, следующий основной html код каркаса нашего слайдера, с информерами:<br>HTML-Code<br>Выделить всё<br><div id="page-wrap"> <br> <div class="slider-wrap"> <br> <div id="center_dm-ru_photoslider" class="csw"> <br> <div class="panelContainer">$MYINF_1$</div> <br> </div> <br> <div id="movers-row">$MYINF_2$</div> <br> </div> <br> </div>
Шаг 3 - Установим CSS:
Наш слайдер почти готов, всё что нам осталось, так это прописать css стили:
CSS-Code
Code
/* Слайдер с миниатюрами <br> ------------------------------------------*/ <br> #page-wrap { <br> position: relative; <br> width: 502px; <br> } <br><br> #page-wrap a {outline: none; text-decoration:none;} <br> #page-wrap a:link, <br> #page-wrap a:visited {color:#cbcbcb; text-shadow: 1px 1px 1px #000;} <br> #page-wrap a:hover {color:#8cea87;} <br><br> .slider-wrap { <br> position: absolute; <br> overflow: hidden; <br> width:502px; <br> height: 150px; <br> } <br> <br> .panelContainer { <br> position: relative; <br><br> } <br><br> .stripViewer { <br> position: relative; <br> overflow: hidden; <br> width: 502px; <br> height: 150px; <br> } <br><br> .panel { <br> float: left; <br> position: relative; <br> width: 502px; <br> } <br><br> .wrapper { <br> border: 1px solid #333; <br> } <br><br> .photo-meta-data { <br> position: relative; <br> font: 110%/1.5 Verdana,Arial,Helvetica, sans-serif; font-weight: bold; <br> color:#cbcbcb; text-shadow: 1px 1px 1px #000; <br> background: url(http://www.center-dm.ru/ucoz/ContentSlider/transpBlack.png); <br> padding: 5px 5px 5px 5px; <br> margin-top: -30px; <br> z-index: 9999; <br> } <br><br> .stripNavL, <br> .stripNavR, <br> .stripNav {display: none; } <br><br> #movers-row { <br> width: 502px; <br> margin: -43px 0 0 0; <br> } <br><br> #movers-row div { <br> float: left; <br> width: 90px; <br> height: 30px; <br> margin: 0px 5px 10px 5px; <br> } <br><br> #movers-row img { <br> width: 90px; <br> height: 30px; <br> border: 1px solid #333; <br> } <br><br> .cross-link { <br> position: relative; <br> display: block; <br> width: 90px; <br> margin-top: -8px; <br> padding-top: 10px; <br> z-index: 9999; <br> } <br><br> .active-thumb { <br> background: transparent url(http://www.center-dm.ru/ucoz/ContentSlider/icon-uparrowsmallwhite.png) top center no-repeat; <br> }/* -------------------------------------- */
Примечания:
Хочу напомнить, что следует устанавливать именно системную переменную информера такого вида ($MYINF_1$), а не прописывать ссылкой, в противном случае информер может отображать контент неверно или вообще перестанет работать как показано на странице демо.
Скорость слайдера меняем во втором скрипте, меняем значение 2000 на своё.
