- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
jQuery ‘NivoSlider’
Март 18, 2011
Слайдер с различными уникальными эффектами перехода. Для более детальной информации посетите официальный сайт http://nivo.dev7studios.com
JavaScript
Мы должны подключить JQuery framework и jquery.nivo.slider.pack.js, указывая SRC атрибут в теге следующих .js файлов:<script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script> <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>Скрипт инициализации необходимо разместить в разделе
$(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
HTML
Ниже представлен простой HTML-скрипт. Чтобы добавить подпись к изображению, необходимо добавить заголовок атрибута к изображению. Чтобы добавить HTML-заголовок, нужно указать название атрибута для ID элемента, который содержит заголовок (с решеткой в префиксе). Обратите внимание, что HTML-элемент, который содержит подпись, должен иметь присвоенный CSS-класс nivo-html-caption и должен быть за пределами тега slider div.<img src="images/slide1.jpg" alt="" /> <a href="#"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /> <img src="images/slide3.jpg" alt="" title="This is an example of a caption" /> <img src="images/slide4.jpg" alt="" />
CSS
/* The Nivo Slider styles */ .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none; } /* The slices in the Slider */ .nivo-slice { display:block; position:absolute; z-index:50; height:100%; } /* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.8; /* Overridden by captionOpacity setting */ width:100%; z-index:89; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:99; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav a { position:relative; z-index:99; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; }