Каталог файлов / Все для uCoz / Скрипты для uCoz | |
Слайдер для uCoz с миниатюрами |
Скачать | Размер: | Добавлено: 15 Янв 2012 | Источник: |
Установка: И так мы всё знаем, а кто не знает читает, на сайтах 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"> <img src="$IMG_SMALL_URL1$" alt="temp"><img src="$IMG_URL1$" alt="temp"> <div class="photo-meta-data"> <a href="$ENTRY_URL$">$TITLE$</a> </div> </div> </div> теперь создаём второй информер с такими же параметрами как в первом информере и вставляем в его шаблон следующий html код: Code <div><a href="#$NUMBER$" class="cross-link"><img src="$IMG_SMALL_URL1$" class="nav-thumb" alt="temp-thumb" /><img src="$IMG_URL1$" class="nav-thumb" alt="temp-thumb" /></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 на своё. |
0 комментарий |
Авторизуйтесь, чтоб иметь возможность комментировать материал.
|
© 2011 - 2024 in-uGroup · Правила сайта · Обратная связь · Google+ · Youtube · Twitter · Soundcloud
Авторские права и идея создания сайта Bilbao111 Хостинг от uCoz |