Nivo Slider - SpBlOaD.ru- UCOZ-Скрипты

 
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
SpBlOaD.ru- UCOZ-Скрипты » . » UCOZ-Скрипты » Nivo Slider
Nivo Slider
spbforumДата: Четверг, 07.07.2011, 6.27.49 PM | Сообщение # 1
Admin
Группа: Администрация
Сообщений: 676
Награды: 8
Репутация: 667
Статус: Offline




Представляю вашему вниманию, красивый слайдер NIVO. Сразу можете посмотреть DEMO этого слайдера разработчиков, и уже прикрученный на uCoz.

Чем же этот слайдер хорош?
9 эффектов смены изображений
Валидный код
Возможность задания параметров работы
Различные способы навигации по изображениям
Вес запакованной версии всего 7kb
Возможность повесить на картинки ссылки
Бесплатно

Испытан в браузерах:
Internet Explorer v7+
Firefox v3+
Google Chrome v4
Safari v4
Opera v10.5
Как видно, этот слайдер картинок не поддерживает, в частности, IE6.

Видео по установке:
http://www.youtube.com/watch?v=_B_NZqiAf0g
Использование:
1. Для использование Nivo Slider, нам нужны подключить Nivo Slider script и Nivo Slider CSS
на странице в самом конце перед </body>

Code
<link rel="stylesheet" href="/slider_nivo/nivo/nivo-slider.css" type="text/css" media="screen" />
<script src="/slider_nivo/nivo/jquery.nivo.slider.pack.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(window).load(function() {
   $('#slider1').nivoSlider({ pauseTime:5000, pauseOnHover:false });
   setTimeout(function(){
   $('#slider2').nivoSlider({ pauseTime:5000, pauseOnHover:false });
   }, 1000);
   setTimeout(function(){
   $('#slider3').nivoSlider({
   pauseTime:5000,
   pauseOnHover:false,
   controlNavThumbs:true
   });
   }, 2000);
   setTimeout(function(){
   $('#slider4').nivoSlider({
   effect:'boxRandom,boxRain,boxRainReverse,boxRainGrow,boxRainGrowReverse',
   pauseTime:5000,
   pauseOnHover:false,
   boxCols: 8,
   boxRows: 4
   });
   }, 3000);
   });
   </script>


2. Теперь HTML. Обратите внимание чтобы добавить подпись к изображению, нужно прописать
простой атрибут title. Прадставлены все 4 варианта слайдера как ина демо...

Code
<h2>Установки по умолчанию</h2>      
        <div id="slider1" class="nivoSlider">      
        <img src="/images/up.jpg" alt="" />      
        <img src="/images/monstersinc.jpg" alt=""/>      
        <img src="/images/nemo.jpg" alt="" />      
        <img src="/images/walle.jpg" alt="" />      
        </div>      
<br/>      
        <h2>С подписями и Ссылки</h2>      
        <div id="slider2" class="nivoSlider">      
        <a href="/"><img src="/images/up.jpg" title="ваша подпись №1" /></a>      
        <a href="/"><img src="/images/monstersinc.jpg" title="ваша подпись" /></a>      
        <a href="/"><img src="/images/nemo.jpg" title="ваша подпись№2" /></a>      
        <a href="/"><img src="/images/walle.jpg" title="ваша подпись" /></a>      
        </div>      
<br/>      
        <h2>С эскизами</h2>      
        <div id="slider3" class="nivoSlider">      
        <img src="/images/up.jpg" alt="" />      
        <img src="/images/monstersinc.jpg" alt=""/>      
        <img src="/images/nemo.jpg" alt="" />      
        <img src="/images/walle.jpg" alt="" />      
        </div>      

        <h2>В случайном порядке</h2>      
        <div id="slider4" class="nivoSlider">      
        <img src="/images/up.jpg" alt="" />      
        <img src="/images/monstersinc.jpg" />      
        <img src="/images/nemo.jpg" alt="" />      
        <img src="/images/walle.jpg" alt="" />      
        </div>


Ну вот вроде и все. Удачи в использовании smile
 
SpBlOaD.ru- UCOZ-Скрипты » . » UCOZ-Скрипты » Nivo Slider
  • Страница 1 из 1
  • 1
Поиск:


Copyright MyCorp © 2024