Ucozu Talk
Популярные переходы
Yandex: кнопки действие
Yandex: кнопки действие Yandex: https://yandex.ru/clck/jsredir?from=yandex.ru%3Bsearch%3Bweb%3B%3B Yandex: https://yandex.ru/clck/jsredir?from=yandex.ru%3Bsearch%3Bweb%3B%3B Yandex: https://yandex.ru/clck/jsredir?from=yandex.ru%3Bsearch%3Bweb%3B%3B Yandex: https://yandex.ru/clck/jsredir?from=yandex.ru%3Bsearch%3Bweb%3B%3B Yandex: https://yandex.ru/clck/jsredir?from=yandex.ru%3Bsearch%3Bweb%3B%3B Yandex: https://yandex.ru/clck/jsredir?from=yandex.ru%3Bsearch%3Bweb%3B%3B Yandex: https://yandex.ru/clck/jsredir?from=yandex.ru%3Bsearch%3Bweb%3B%3B RSS лента
Опрос
|
Поскольку во многих веб дизайнах теперь стало модно использовать слайдеры, я решил найти полностью рабочий слайдер, который с легкостью смог бы выводить новости сайта ucoz с помощью информера, работает он с библиотекой jquery. Установка: 1. Устанавливаем JS скрипт слайдера, на страницу где он будет находится, после тега body: Code <script type="text/javascript" src="jquery.nivo.slider.pack.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> 2. Создаем информер для вывода новостей: админ панель => Инструменты => Информеры => Создать информер: И создаём информер новостей, с нужными вам параметрами, советую установить количество материалов: 5 или 7 После этого копируем в информер данный код: Code <a href="$ENTRY_URL$"><?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" title="$TITLE$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$" title="$TITLE$"><?endif?><?endif?></a> 3.Копируем HTML код каркаса слайдера в то место на странице где должен находится слайдер: Code <div id="slider" class="nivoSlider"> $MYINF_1$ </div> (!)код $MYINF_1$ меняем на свой, он отображается в свойствах информера. 4.Копируем код в таблицу стилей Css: Code /* меняем размер изображений высоту и ширину */ #slider { position:relative; width:500px; height:100px; background:url('loading.gif') no-repeat 50% 50%; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { border:0px; display:block; } /* выравниваем по центру квадраты переключателя */ .nivo-controlNav { position:absolute; left:180px; bottom:-25px; } .nivo-controlNav a { display:block; width:22px; height:22px; background:url('bullets.png') no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .nivo-controlNav a.active { background-position:0 -22px; } .nivo-directionNav a { display:block; width:30px; height:30px; background:url('arrows.png') no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-30px 0px; right:15px; } a.nivo-prevNav { left:15px; } .nivo-caption { text-shadow:none; font-family: Helvetica, Arial, sans-serif; } .nivo-caption a { color:#efe9d1; text-decoration:underline; } .clear { clear:both; } .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none; } .nivo-slice { display:block; position:absolute; z-index:5; height:100%; } .nivo-box { display:block; position:absolute; z-index:5; } /* Полупрозрачный чёрный фон */ .nivo-caption { position:absolute; left:0px; bottom:0px; background: url('fon_nivo-caption.png') repeat; font:11px Verdana,Arial,Helvetica, sans-serif; color:#fff; font-weight: bold; width:100%; z-index:8; } .nivo-caption p { padding:6px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } .nivo-directionNav a { position:absolute; top:25%; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } .nivo-controlNav a { position:relative; z-index:9; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; } Ну вот и все, теперь у вас на странице будет находится полностью рабочий слайдер новостей, если хотите изменить его под дизайн вашего сайта, используете css стили так как в коде прописаны комментарии. Автор\Источник: center-dm.ru Вы находитесь на странице материала Слайдер Nivo Slider для uCoz из раздела нашего сайта
Веб дизайн для ucozкоторый можно скачать совершенно бесплатно и без регистрации.Также рекомендуем:
|
О нас
Ucozu.Ru - перспективный сайт с удобным дизайном и многими уникальными статьями, файлами. Здесь вы сможете скачивать и просматривать файлы без регистрации.На нашем сайте вы найдёте много шаблонов,скриптов и тд.Все для uCoz.Так же множество статей по раскрутки вашего сайта и системе uCoz.
Кто онлайн
Онлайн всего: 1 Гостей: 1 Пользователей: 0 Пользователи
Гости сайта
Рекомендуем
Последние комментарии
Если отображение страницы исчезло, то скорее всего потерли лишнего. А вставлять надо туда, где должн 18.08.2014 Когда вызываешь файловый менеджер, из меню - Управление - Файловый менеджер, то в первое окно которо 18.03.2014 Что за люди ._. стыдно за таких. Учите русский и книжки читайте для общего развития. 13.02.2014 Админы помогите!!! у меня проблема с разделом "Стена" пишет App is blocked и фото не грузя 09.01.2014 А почему мы не должны верить? Мы все должны тебя поблагодарить за труд ! :о)) Сейчас ты навер 09.01.2014 Какая панель имеется ввиду? Что касается расположения информеров, то в CSS гляньте. Советую п 29.11.2013 все установила,все получилось. Только не высвечивается сверху сама панель управления и конструктор с 27.11.2013 Клевая! 29.05.2013 Снизу под статьей справа есть кнопка - Скачать файл. Жми и получай, регистрироваться не надо. 13.05.2013 |