[Tutorial] Utilizando jQZoom + DataList par dar un toque muy Cool a tus imágenes.
Hace unos días vi una página de compra y venta de productos que lograba un efecto muy cool sobre las imágenes, ,al pasar el mouse por encima de la imagen, se hace un zoom a lo que va debajo del mouse. Bastante útil para mostrar el detalle de algún producto que necesitemos.
Es como el ejemplo de la foto, en donde vemos el detalle de la moto que me compre (jajajja, nah) . Cuento corto, esto es un efecto que se logra con un plugin de jQuery que se llama jQZoom, es bastante bueno y sencillo de utilizar. Puedes ir al sitio del creador desde acá:
http://www.mind-projects.it/projects/jqzoom/
Entonces, y por que este post es tutorial vamos crear dos ejemplos, uno con el webcontrol Image y otra con un listview.
CON IMAGE BUTTON
Paso 1 - Configurar la Aplicación
Vamos a hacer referencia a los archivos de jQuery y JQZoom
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
Luego agregamos la referencia al CSS de jqzoom
<link rel="stylesheet" href="css/jqzoom.css" type="text/css">
Paso 2 - Utilización
El uso de jQZoom es sencillo , y es necesario especificar el elemento de anclaje HTML, que va a generar el zoom revelando una porción de la imagen ampliada.
<body>
<form id="form1" runat="server">
<a href="images/CamaroBig.jpg" class="jqzoom" style="">
<asp:Image ID="Imagen1"
ImageUrl="images/CamaroSmall.jpg"
Title="CAMARO"
Style="border: 1px solid #666;"
runat="server" />
</a>
</form>
</body>
<script type="text/javascript">
$(function () {
$(".jqzoom").jqzoom();
});
</script>
Como vez, agregamos el código necesario, un href con la imagen grande (camaroBig) y dentro una imagen que corresponde a la imagen pequeña(la que se muestra como normal). Es importante tener dos imágenes, una grande y otra pequeña, redimensionadas a escala, para que el zoom se vea bien.
Paso 3 - Probando…
Como siempre, un video vale 25 fotogramas y cada fotograma mil palabras, entonces veamos el video :)
CON LIST VIEW
Ya sabemos como implementar este plugin con un webcontrol Image, no difiere mucho con un DataList, para esto vamos a tener una BD con las imágenes. Entonces…
Paso 1: Crear la BD
Paso 2: Crear el DataList
<asp:DataList ID="DataList1" runat="server"
DataKeyField="Id" DataSourceID="SqlDataSource1"
Width="697px">
<ItemTemplate>
<a href='<%# Eval("ImagenBig") %>' class="jqzoom" style="">
<asp:Image ID="Imagen1"
ImageUrl='<%# Eval("ImagenSmall") %>'
title='<%# Eval("Nombre") %>'
Style="border: 1px solid #666;"
runat="server" />
</a>
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1"
runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT [Id], [Nombre], [ImagenBig], [ImagenSmall] FROM [Productos]">
</asp:SqlDataSource>
Paso 3 – El Video…
Si quieres el código lo puedes descargar acá:
http://cid-053a660afa3473b3.skydrive.live.com/self.aspx/P%c3%bablico/jQZoom.zip
Espero que te sirva!
Saludos,
Gonzalo