Nivo Slider – красивый и функциональный слайдер картинок
admin 
В большинстве своём для создания эффекта слайдшоу изображений используется flash. Оно и понятно – возможности для этого очень широкие и сделать можно всё, что душа пожелает.
Однако не все любят флэш (по разным причинам). И очень эффективным выходом для таких людей может стать Nivo Slider – очень красивый и богатый по своим возможностям слайдер картинок.
Что же может позволить себе этот jQuery плагин? На данный момент на сайте представлена версия 2.0, включающая в себя в частности следующие возможности:
- 9 эффектов смены изображений
- Валидный код
- Возможность задания параметров работы
- Различные способы навигации по изображениям
- Вес запакованной версии всего 7kb
- Возможность повесить на картинки ссылки
- Бесплатно
Список достаточно велик, особенно если посмотреть на демки Nivo Slider – действительно выглядит красиво!
Список поддерживаемых Nivo Slider браузеров:
- Internet Explorer v7+
- Firefox v3+
- Google Chrome v4
- Safari v4
- Opera v10.5
Как видно, этот слайдер картинок не поддерживает, в частности, IE6.
Установка:
1. Подключаем плагин и CSS
1 2 3 | <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script> |
2. Вставляем непосредственно HTML-код слайдера. Тут вариант и со ссылкой, и с тайтлом, являющимся подписью к картинке.
1 2 3 4 5 6 | <div id="slider"> <img src="images/slide1.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" /></a> <img src="images/slide3.jpg" alt="" title="This is an example of a caption" /> <img src="images/slide4.jpg" alt="" /> </div> |
3. Вызов нашего плагина-скрипта.
1 2 3 4 5 | <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> |
По сути всё. Дополнительно можно прописать параметры слайдера:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect:'random', //Specify sets like: 'fold,fade,sliceDown' slices:15, animSpeed:500, pauseTime:3000, startSlide:0, //Set starting Slide (0 index) directionNav:true, //Next & Prev directionNavHide:true, //Only show on hover controlNav:true, //1,2,3... controlNavThumbs:false, //Use thumbnails for Control Nav controlNavThumbsFromRel:false, //Use image rel for thumbs controlNavThumbsSearch: '.jpg', //Replace this with... controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src keyboardNav:true, //Use left & right arrows pauseOnHover:true, //Stop animation while hovering manualAdvance:false, //Force manual transitions captionOpacity:0.8, //Universal caption opacity beforeChange: function(){}, afterChange: function(){}, slideshowEnd: function(){} //Triggers after all slides have been shown }); }); </script> |
Дополнительно о настройках и возможных проблемах со этим слайдером картинок можно прочитать на сайте Nivo Slider.
Нет похожих статей.
Комментарии
Добавить комментарий
В Oper’e и Chrom’e не работает.
У меня на странице Javascript фреймворк Mootools крутит карусель изображений. Если я вставляю слайд-шоу (Nivo-slider) для хедера, то скрипты mootools блокируются и перестают работать. Как выйти из этого положения, чтобы и то и то работало. Спасибо за помощь.
Еще… Я понимаю, что конфликтуют mootools и jQuery. Как их заставить работать вместе?
да никак не заставить. насколько я знаю – они несовместимы, да и зачем? На их основе можно делать одинаковые вещи. есть такие же плагины для mootools. немного их подковырять – и будут в точности такие же.))
Для этого можно использовать замечательную функцию jQuery.noConflict(). Как применять, можно прочитать например тут:
http://www.htmlblog.ru/web-development/using-jquery-mootools-na-odnoj-stranice.html
И каменты тоже смотрите – там описан порядок подключения, чтобы работало без проблем в IE6.
Куда вставлять пункты 3, 4?
B еще есть вопрос, можно ли его прикрутить к вордпресс или нужно только покупать вордпрессовский плагин? Че-то у меня не получилось.
Отличный урок! Спасибо