Поиск:
  • Страница 1 из 1
  • 1
Модератор форума: Senator  
Nivo Slider
Дата: Понедельник, 31.01.2011, 19:03 | Сообщение # 1
Offline
  • Проверенный
  • Ранг: Генерал-лейтенант
  • 809 Сообщения
[Table][/Table]

[Table]DEMO Slider[/Table]

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

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

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

[TableGreen]Использование:[/TableGreen]

1. Для использование Nivo Slider, нам нужны подключить Nivo Slider script и Nivo Slider CSS
на странице в самом конце перед

Code

<link rel="stylesheet" href="/nivo/nivo-slider.css" type="text/css" media="screen" />      
<script src="/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,      
        c ontrolN avThumbs:t rue      
        });      
        }, 2000);      

        setTimeout(function(){      
        $('#slider4').nivoSlider({      
        effect:'random',      
        animSpeed:1500,      
        p auseTime :5000,      
        s tartSlide:4,      
        dir ectionNav:false,      
        controlNav:true,      
        keyboardNav:false,      
        pauseOnHover:false      
        });      
        }, 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>

Ну вот вроде и все. Удачи в использовании wink

[spoiler="Скачать"]http://exfile.ru/112565[/spoiler]


Дата: Понедельник, 31.01.2011, 19:58 | Сообщение # 2
Offline
  • Проверенный
  • Ранг: Генерал-майор
  • 461 Сообщения
Оч приколькно)))))

  • Страница 1 из 1
  • 1
Поиск:
Администрация проекта не несет ответственности за публикуемые материалы.
Дизайн полностью принадлежит "Up-Rise.Ru".
Дизайн сайта разработал life_man.
© 2025 Сайт управляется системой uCoz.