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

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

На нашем портале вы найдете не только скрипты, но и видео обучение и много интересного!
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Форумчик » Скрипты для Ucoz готовые » Nivo Slider (чудесный слайдер, с потрясающими эффектами)
Nivo Slider
Administrator Дата: Пятница, 10.08.2012, 09:11 | Сообщение # 1 Offline

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

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

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

Для использование 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>

Скачать архив:
Видео по установке:
http://udf.su/go?http://www.youtube.com/watch?v=_B_NZqiAf0g
Демо: http://www.unicegroup.ru/index/nivo_slider/0-14

Все готово! Удачи в установке скрипта:)
Прикрепления:
Прикрепления: 2359431.jpg(21Kb) · slider_nivo.rar(346Kb)


Мои сайты:
China-Telephon Все для китайских телефонов
Megasayt все для Ucoz
 
Форум » Форумчик » Скрипты для Ucoz готовые » Nivo Slider (чудесный слайдер, с потрясающими эффектами)
Страница 1 из 11
Поиск: