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 galera de imagenes, acompaada de texto si fuera el caso, con efectos de transiciones cuando va pasando de una otra y nos sirven para mostrar la informacin 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 utilizacin y agregacin 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 tamao 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 imgenes de nuestro slider

elegimos el efecto que queremos darle, la duracin 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 tamao real. Si hemos hecho todo esto ahora nuestra pagina deberia verse mas o menos asi

espero haber ayudado ..gracias por su atencin.. hasta otra oportunidad :)