lunes, 4 de marzo de 2013

Instala Nivo Slider en tu Blog con solo dos Pasos

Damian 3/04/2013

El control deslizante Nivo es reconocido mundialmente como el slider más hermoso y fácil de usar en el mercado. El plugin de jQuery es totalmente gratuito y de código abierto totalmente y no hay mejor manera de hacer que su sitio web tenga un mejor aspecto.

Instalación

Paso 1) Añadir el Scripty Css de Nivo
Para añadir estos doscódigosjavascript y css , dirigase a laopciónPlantilla - escoja laopciónEditar HTML luego realice la siguientecombinaciónde teclas CTRL-F para abrir el buscador y digite la etiqueta/head ,una vez que encuentre este etiqueta justo arriba de esta pegue el siguiente codigo.

Mostrar Codigo

Recuerde que para utilizar este Plugindeberátener instalado el Plugin JQuery caso contrario no funcionara.

Parámetros del Plugin
si usted llegase a desear otro efecto de desplazamiento o cambiar el tamaño de lasimágenesa su gustodeberáde tener en cuenta lo siguiente:
A) para cambiar el tamaño del Slider y adaptarlo a la imagen que usted desee solo debe de encontar el estilo
#NivoSlider {
position:relative;
width:640px  !important; 
height:480px  !important;
}

cambiando los valores width(Ancho) y height(Alto)podrácambiar el tamaño del Slider.
B) Para cambiar las configuraciones del slider ya sea el efecto de desplazamiento,la opacidad,el tiempo de cada imagen usted lopodráhacer dentro del JQuery.
Estos son los valores por defecto

effect : 'random',
slices : 15,
boxCols : 8,
boxRows : 4,
animSpeed : 500,
pauseTime : 3000,
startSlide : 0,
directionNav : true,
directionNavHide : true,
controlNav : true,
keyboardNav : false,
pauseOnHover : true,
captionOpacity : 0.6

effect es la variable que recibe el valor del efecto deseado los cuales son:

random
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse
ustedpodrájugar cambiando los valores asta tener el efecto de su agrado.

slices: cantidad de rebanadas que sera dividida la imagen
boxCols: columnas
boxRows: filas
animSpeed : velocidad detransicióndel slider
pauseTime : tiempo que se demora cada imagen
startSlide: tiempo que debe de comenzar el slider por general es 1 o 0
directionNav : botones dedirección que reciben un valor booleanotrue:Activadofalse: desactivado
directionNavHide : muestra los botones dedirecciónsegúnel valor booleano al pasar el mouse por encimatrue:Mostrarfalse:No Mostrar
controlNav: Mostrar controles dedirección
keyboardNav: activarnavegacióncon el teclado
pauseOnHover: detener laanimaciónotransiciónal pasar elmouse
captionOpacity: opacidad de lasimágenesa realizar la transición

Paso 2) Crear el contenedor y añadir lasimágenes
Una vez culminado el paso 1 , solo queda añadir lasimágenesdentro de un contenedor DIV, para ello dirigase alaopciónDiseño-- y escoja laopciónañadir un gadget - y escoja la opcionHTML/Javascript y pegue el siguientecódigo.

div id="Container"
	div id="NivoSlider"
		img src="http://www.fondos-hq.com/upload/DesktopWallpapers/cache/03816-640x480.jpg" 
        title="Imagen 1" alt=""/
		img src="http://a123.g.akamai.net/7/123/5290/v0001/mtviestor.download.akamai.com/8619/_!//intlod/MTVInternational/umg_int/usuv71/100402/USUV71100402_640x480_1.jpg" 
        title="Imagen 2" alt=""/
		img src="http://img208.imageshack.us/img208/2962/img3048640x480sy1.jpg" title="Imagen 3" alt=""/
	/div
/div


Para añadir mas imágenes solo debe de colocar el códigoimg src="direccion de imagen" title="titulo de imagen" / dentro del contenedor div id="NivoSlider".
Recomendación:
Recuerde que antes de utilizar cualquier Slider que utilice JQuerydeberátener instalado el Plugin de JQuery y no colocarimágenesqueexcedanel peso de 400kb por quepodríavolver lento la carga de su blog.
(si te sirvio este post ayudame dando clic ▼ en la imagen :) )









,

2 comentarios:

  1. Dess6 de mayo de 2013, 20:30

    Genial! pero sabes como puedo redondear los bordes del slider?

    ResponderEliminar
  2. Damian6 de mayo de 2013, 20:47

    que tal Skynnet me alegra que ta guste,para dedondear cualquier cosa con css utilza border-radius aqui te dejo un link de una pagina que genera el codigo Generador , espero te sirva :)

    ResponderEliminar

Suscribirse a: Enviar comentarios (Atom)