Nivo Slider - Форум ProUcoz.com - Nivo Slider - Форум ProUcoz.com
Понедельник 09:55 | 20.02.2017
Свежие темы · Участники · Правила форума · Поиск · RSS
Страница 1 из 11
Модератор форума: GrandDooM, FR3cH 
Форум ProUcoz.com » Готовые скрипты и интересные решения для системы uCoz » Другие скрипты для uCoz » Nivo Slider (чудесный слайдер, с потрясающими эффектами)
Nivo Slider
FR3cH[Нет на сайте]
Дата: Пятница, 22.06.2012, 15:48 | Сообщение # 1
Хитрец всем хитрым
Сообщений: 213
Скрин:


Представляю вашему вниманию, красивый слайдер 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

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


 
Форум ProUcoz.com » Готовые скрипты и интересные решения для системы uCoz » Другие скрипты для uCoz » Nivo Slider (чудесный слайдер, с потрясающими эффектами)
Страница 1 из 11
Поиск: