Efecto Acordeon en jQuery con C#.

net
paso a paso

Sergio A. Flores Quiroga

Efecto Acordeon en jQuery con C#.net En este tutorial veremos como construir una animacin con el efecto acordeon de jQuery, con una direccion horizontal y cargado de imagenes que se muestren en una pgina web desarrollada en Microsoft Visual Studio.

Requisitos:
- Nesecitamos jquery que se puede descargar de la pgina www.jquery.com. - Descargamos el plugin de acordeon zaccordion de http://www.armagost.com/wp-content/themes/armagost/js/jquery.zaccordion.zip - Debemos tener un editor de imagenes, preferentemente que tenga la opcion de mostrar el tamao de las imagenes que manejamos para no tener problemas con las resoluciones el momento de desarrollar el codigo de nuestro script. - Microsoft Visual Studio para desarrollar la pgina que contendra nuestro codigo.

Paso 1: Importar librerias

Se supone que ya tienes iniciada tu pgina web en Visual Studio, entonces vamos a importar las librerias que nos ayudaran a desarrollar nuestro acordeon de imagenes. En la parte derecha de Visual Studio, en el Solution Explorer verificamos si en la carpeta de Scripts no hay una version de jquery.js, en el caso de que no exista procedemos de la siguiente manera. La libreria jquery.js que hemos descargado de www.jquery.com la copiamos en la carpeta principal de nuestro proyecto web, a continuacion hacemos lo mismo con los archivos de zaccordion, copiamos jquery.zaccordion.js y jquery.easing.1.3.js en la misma carpeta de nuestro proyecto web, con eso ya podemos llamar a dichas librerias que nos facilitan la vida.

Efecto Acordeon en jQuery con C#.net

Paso 2: Imagenes
A continuacin vamos a alistar las imagenes que utilizaremos para nuestro tutorial, yo uso Photoshop, pero cualquier editor de imagenes sirve siempre y cuando podamos ver el tamao de nuestras imagenes. Vamos a Archivo>Nuevo o bien presionamos ctrl-N, y en la ventana colocamos de ancho 738 pixeles y de alto 215 pixeles, la resolucin debe ser de 72 pixeles por pulgada (resolucin standar para pginas web) y presionamos OK. Ahora vamos a buscar las imagenes que utilizaremos para nuestro ejemplo. Es importante tener en cuenta el como queremos que sea nuestra imagen para mostrar, si deseamos que sea una imagen simple sin ningun arreglo o como a continuacin muestro una barra informativa de cada imagen, en el caso de que deseen hacer la barra debern incluirla en cada imagen como parte del diseo.

Hay que tener en cuenta el tamao de la imagen a mostrar y la barra informativa, por ejemplo yo uso el tamao de 738px por 215 px, pero de los 738px de ancho solo voy a mostrar 625px de imagen el resto es la barra informativa. Entonces agarro cuando diseo cada imagen la guardo en Photoshop de la siguiente manera, Archivo>Guardar para Web o bien presionamos ctrl-alt-shift-S y en la venta que nos aparece buscamos el ajuste y le damos a JPEG alta, luego hacemos click en OK y nos queda una imagen similar a esta.

Utilizamos Guardar para Web, por el peso en memoria de las imagenes, si utilizaramos un guardado normal en JPEG el tamao de nuestra imagenes seria superior y por consiguiente nuestra pgina tardara ms en cargar, y a los clientes no les gusta las pginas lentas. Repetimos este paso para todas las imagenes que queremos para nuestra animacin en jQuery, no olvides que si quieres puedes usar imagenes simples sin barra informativa.

Efecto Acordeon en jQuery con C#.net

Paso 3: Llamamos imagenes

En nuestra pgina maestra o pgina principal buscamos un lugar donde colocar nuestro acordeon y utilizando el tag <DIV> hacemos lo siguiente:
<div id="banner"> <div id="bannerImage"> <img src="App_Themes/Theme1/Images/bannerAvisponVerde.png" /> <img src="App_Themes/Theme1/Images/bannerLongestYard.png" /> <img src="App_Themes/Theme1/Images/bannerRio.png" /> <img src="App_Themes/Theme1/Images/bannerTambLluvia.png" /> </div> </div>

Copiamos el siguiente cdigo y en cada imagen colocamos las imagenes que guardamos, en este caso estamos utilizando el ID=bannerImage que utilizaremos en nuestros scripts para referenciar desde donde se llama a las funciones.

Paso 4: Creamos un script

Para que nuestro jQuery haga lo que queremos debemos llamar a una funcin que tendra las propiedades que requerimos para nuestra animacin, entonces en Visual Studio en el Solution Explorer hacemos click derecho en el nombre del proyecto y seleccionamos AddNewItem y buscamos el modelo JScript File en name cambiamos el default.js por acordeon.js, en la ventana que nos visualiza colocamos el siguiente codigo: $(document).ready(function () {
var accordion = $("#bannerImage").zAccordion({ slideWidth: 625, width: 738, height: 215, timeout: 3000, slideClass: "frame", slideOpenClass: "frame-open", slideClosedClass: "frame-closed", easing: "easeOutCirc" }); $("#thumbs .thumb-0").click(function () { accordion.start(); return false; }); $("#thumbs .thumb-1").click(function () { accordion.click(0); return false; }); $("#thumbs .thumb-2").click(function () { accordion.click(1); return false; }); $("#thumbs .thumb-3").click(function () { accordion.click(2); return false; }); });

Efecto Acordeon en jQuery con C#.net Lo que estamos haciendo en acordeon.js es decirle que evento se debe realizar cuando nuestro acordeon esta activo, que debe hacerce cuando se hace click en cada una de las imagenes y el despliegue automatico por tiempo en slideWidth le decimos hasta donde puede avanzar nuestra imagen entonces en el caso de que uses una barra informativa sirve para que el usuario final pueda ver lo que le interesa.

Paso 5: Llamando librerias

En nuestro proyecto de Visual Studio nos vamos a la pgina maestra o pgina principal y colcamos el siguiente codigo en el tag <HEAD>:
<head runat="server"> <title>.: Movie Rent & Sale :.</title> <script src="jquery.js" type="text/javascript"></script> <script src="acordeon.js" type="text/javascript"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> <script src="jquery.zaccordion.js" type="text/javascript"></script> <script> $(document).ready(function () { window.onload = function () { alert("Bienvenido a Movies Rent & Sales"); } }); </script> </head>

Escribimos todo lo que esta con rojo que son las librerias que debemos usar para que nuestro acordeon funcione, en el script inferior usamos la opcion $(document).ready(function(){ por que de esta manera estamos llamando a la funcin general de jQuery, y a modo de plus el mensaje de window.onload se utiliza cuando tu pgina a terminado de cargar y quieres una alerta que en este caso es de bienvenida.

Paso 6: Prueba
Presiona F5 para comenzar la depuracin del programa y si has heho todo bien felicidades, si tienes alguna duda o problema, escribeme a sergioalvaro.14@gmail.com y te ayudar con gusto.