- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
FAQs
General Tutorials
MonsterONE Subscrioption
jQuery ‘NivoSlider’
marzo 18, 2011
Una barra de desplazamiento con una variedad de efectos de transición únicos. Para obtener especificaciones completas visite la página web oficial en http://nivo.dev7studios.com
JavaScript
Debemos incluir framework jQuery y jquery.nivo.slider.pack.js señalando el atributo src en la etiqueta de script a esos ficheros .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>Colocamos el script de inicialización en la sección <head> </ head> del documento.
$(window).load(function() {
$('#slider').nivoSlider();
});
También se puede definir algunos parámetros adicionales:
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
Aquí puede ver la representación general de script HTML. Para añadir ‘caption’ a una imagen sólo hay que añadir un atributo title a la imagen. Para agregar HTML Caption establezca el atributo de título a ID de un elemento que contiene su caption (con el prefijo hash). Tenga en cuenta que el elemento de HTML que contiene su caption debe tener CSS class nivo-html-caption aplicada y debe estar fuera del 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="" />Es un ejemplo de caption HTML con un enlace enlace.
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;
}
