Crear un slider con Wow Slider y agregarlo a nuestro proyecto

Hola a todos existen varias librerias, que nos permiten agregar un slider a nuestros proyectos web que estamos realizando (por ejem: coin slider, avia slider, entre otros), un slider no es otra cosas que una galería de imagenes, acompañada de texto si fuera el caso, con efectos de transiciones cuando va pasando de una otra y nos sirven para mostrar la información a nuestro visitante de una manera mas interactiva; el presente tutorial no trata de como utilizar estos plugins que los podemos descargar de internet, si no mas bien de un programa de escritorio llamado WowSlider que nos permite de manera sencilla a travez de su interfaz crear sliders muy cheveres, asi que paso a detallar su utilización y agregación a un proyecto real :).. Descargar aqui

En primer lugar en la siguiente imagen es al proyecto que quiero agregar el slider creado con wowslider

como ven ya tengo marcada la zona donde pienso insertar el slider

– Los siguiente es ya tener las imagenes que quiero que aparezcan en mi slider ya preparadas de acuerdo al tamaño del div contenedor en el cual lo pienso colocar para este ejemplo las siguientes imagenes son de 850 px * 333 px

slider1

slider2

slider3

slider4

-Luego que descargamos las imagenes que tengo aqui de muestra o las que uds quieren poner pero en las dimensiones especificadas las colocamos en una carpeta llamada  imagenes slider, en este caso yo la tengo en el escritorio

-Ahora si ya descargamos el WowSlider ejecutamos el programa y hacemos lo siguiente:

aqui agregamos las imagenes que guardamos en la carpeta  imagenes slider

ingresamos las medidas de las imágenes de nuestro slider

elegimos el efecto que queremos darle, la duración del efecto y los segundos entre cada slide

elegimos el estilo slider que queremos ver en nuestra pagina para este caso Noir, luego clic en Publish

Hasta alli hemos creado un slider con el programa y se nos ha creado una pagina con este, ahora para agregarlo a la pagina que mostre al principio o la pagina que uds quieran, hacemos lo siguiente

-vamos a la carpeta que seleccionamos para generar nuestro slider sino seleccionbamos nada por defecto se guarda en documents en win7 y en Mis Documentos en Win xp en la carpeta Wow Slider se generan dos directorios(data1 y engine1) y un archivo index.html

-lo que necesitamos son los 2 directorios porque alli se generaron los archivos que utiliza el slider, entonces copiamos los 2 directorios (data1 y engine1) a la carpeta de nuestro proyecto web

-Luego con la ayuda del mozilla firebug ubicamos el div donde queremos colocar nuestro slider, como la imagen siguiente

Ahora en la pagina que genero wowslider o en index de la imagen de arriba, hacemos clic derecho para editarlo con editor notepad, bloc de notas o abrimos la pagina luego hacemos clic derecho en ella y ver codigo fuente copiamos  las lineas siguientes y la pegamos en nuestro codigo de la pagina de nuestro proyecto dentro del div que queramos que contenga el slider

 podemos borrar el codigo de la linea 30

– Ahora para que el slider pueda visualizarse de manera correcta, necesita de 3 archivos clave que estan en la carpeta engine1 : jquery.js , script.js y style.css

-lo que tenemos que hacer es referenciar  style.css y jquery.js  antes de cerrar el head en nuestra pagina

<link rel=”stylesheet” type=”text/css” href=”engine1/style.css” media=”screen” />
<style type=”text/css”>a#vlb{display:none}</style>
<script type=”text/javascript” src=”engine1/jquery.js”></script>

y el archivo script.js despues de cerrar el div que contiene el slider

  <script type=”text/javascript” src=”engine1/script.js”></script>

Si todo lo hemos hecho de manera correcta el slider debe aparecer en nuestra pagina, pero las imagenes aprecen con una marca de agua en la lado inferior derecho con un enlace a la pagina del creador de WowSlider

el programa si no lo hemos comprado coloca una marca de agua en la imagen que genera y una capa encima, para borrar la capa de encima nos vamos al archivo script.js y presionamos crtl + f para buscar el siguiente texto WowSlider.com y borramos WowSlider.com donde dice  t=”WOWSlider.com” y quedaria solo t=”” y para solucionar el problema de la marca de agua en las imagenes, solo reemplazamos las imagenes originales de la carpeta imagenes slider por las imagenes que genero el programa y que estan en la carpeta data1/images y listo, por eso al principio dije que debemos tener preparadas nuestras imagenes en las dimensiones del div del slider, porque sino fuera asi las imagenes originales el slider las muestra en su tamaño real.

Si hemos hecho todo esto ahora nuestra pagina deberia verse mas o menos asi

  espero haber ayudado ..gracias por  su atención.. hasta otra oportunidad  🙂


4 comentarios el “Crear un slider con Wow Slider y agregarlo a nuestro proyecto

  1. Excelente!!! muchas gracias por la explicación! hacía mucha falta un post como éste en español… Me resultó muy sencillo y ya mi web se ve perfecta!

  2. Hola amigo muchas gracias por la información pero me gustaría saber si sabes la forma de quitar la marca de agua en la nueva versión de WOWSlider, la 2.3. Ya que al parecer se hace de forma distinta, si sabes la forma podrías explicármelo. Muchas gracias por adelantado.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s