jQuery Slider de forma dinámica con ASP.NET
jQuery nos permite darle a nuestras páginas web una gran cantidad de efectos sumamente llamativos. En este ejemplo vamos a explicar como utilizar “jQuery Slider” (uno de los muchos Sliders), cargando las imágenes de forma dinámica.
Descargar solución jQuerySlider-01
Aquí vamos a transformar el ejemplo original jQuery Slider (http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html) en una forma dinámica, el originar carga las imágenes quemadas del código html, pero aquí vamos a transformalo para que cargue a partir de un objeto o consulta a la base de datos.
En este ejemplo vamos a cargar las imágenes desde un objeto de datos, y desplegar dinámicamente en la página web. Cuando me refiero a un objeto de datos es una referencia a un dataset, data table, xml, una consulta a la base de datos, etc.
En nuestro caso vamos a crea un dataset con 7 registros, 7 imágenes que se van a desplegar en nuestro jQuery Slider.
Para crear el objeto de datos creamos la función GetDataset(), la cual es solo un ejemplo y la debes reemplazar por la lectura correcta de tu información, entiendase base de datos, xml, rss, etc.
Archivo Default.vb (Code-Behind)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
'Esta funcion es solo un ejemplo, aquí deberías tener 'el llamado a la carga de información con las imágenes que desas mostrar Private Function GetDataset() As Data.DataSet 'Esta función simula una consulta a la base de datos. 'Retornamos un dataset como si se hiciera un select a una tabla 'con los datos correspondientes para mostrar las imagenes. Dim ds As New Data.DataSet Dim dt As New Data.DataTable dt.Columns.Add(New DataColumn("codigo_imagen", GetType(Integer))) dt.Columns.Add(New DataColumn("titulo_imagen", GetType(String))) dt.Columns.Add(New DataColumn("descripcion_imagen", GetType(String))) dt.Columns.Add(New DataColumn("path_imagen", GetType(String))) Dim dr As DataRow dr = dt.NewRow dr("codigo_imagen") = 1 dr("titulo_imagen") = "nature beauty" dr("descripcion_imagen") = "nature beauty photography" dr("path_imagen") = "images/nature-photo.png" dt.Rows.Add(dr) dr = dt.NewRow dr("codigo_imagen") = 2 dr("titulo_imagen") = "blue river" dr("descripcion_imagen") = "fotografía bosque río azul" dr("path_imagen") = "images/nature-photo1.png" dt.Rows.Add(dr) dr = dt.NewRow dr("codigo_imagen") = 3 dr("titulo_imagen") = "nature beauty" dr("descripcion_imagen") = "fotografía rayo de luz" dr("path_imagen") = "images/nature-photo2.png" dt.Rows.Add(dr) dr = dt.NewRow dr("codigo_imagen") = 4 dr("titulo_imagen") = "nature beauty" dr("descripcion_imagen") = "fotografía paisaje maravilloso" dr("path_imagen") = "images/nature-photo3.png" dt.Rows.Add(dr) dr = dt.NewRow dr("codigo_imagen") = 5 dr("titulo_imagen") = "nature beauty" dr("descripcion_imagen") = "fotografía tarde nublada" dr("path_imagen") = "images/nature-photo4.png" dt.Rows.Add(dr) dr = dt.NewRow dr("codigo_imagen") = 6 dr("titulo_imagen") = "montaña" dr("descripcion_imagen") = "fotografía paisaje verde" dr("path_imagen") = "images/nature-photo5.png" dt.Rows.Add(dr) dr = dt.NewRow dr("codigo_imagen") = 7 dr("titulo_imagen") = "catarata" dr("descripcion_imagen") = "naturaleza expectacular" dr("path_imagen") = "images/nature-photo6.png" dt.Rows.Add(dr) ds.Tables.Add(dt) Return ds End Function |
En el archcivo Default.aspx, vamos a agregar el código necesario para mostrar los datos en nuestra página web.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>DotNetcr.com - JQuery Example 01</title> <script src="scripts/jquery.js" type="text/javascript"></script> <script src="scripts/scripts.js" type="text/javascript"></script> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div> <!--/top--> <div id="header"><div class="wrap"> <div id="slide-holder"> <div id="slide-runner"> <!--Repeater que muestra las imagenes en pantalla--> <asp:Repeater ID="RepeaterImagen" runat="server"> <ItemTemplate> <a href=""><img id='slide-img-<%#Eval("codigo_imagen")%>' src='<%#Eval("path_imagen")%>' class="slide" alt="" /></a> </ItemTemplate> </asp:Repeater> <div id="slide-controls"> <p id="slide-client" class="text"><strong>post: </strong><span></span></p> <p id="slide-desc" class="text"></p> <p id="slide-nav"></p> </div> </div> </div> <!--Repeater que llama a la funcion jQuery--> <asp:Repeater ID="RepeaterScript" runat="server"> <HeaderTemplate> <% Response.Write("<script type=""text/javascript"">" & vbCrLf)%> <% Response.Write("if (!window.slider) var slider = {};" & vbCrLf)%> <% Response.Write("slider.data = [")%> </HeaderTemplate> <ItemTemplate> { "id": "slide-img-<%#Eval("codigo_imagen")%>", "client": "<%#Eval("titulo_imagen")%>", "desc": "<%#Eval("descripcion_imagen")%>" } </ItemTemplate> <SeparatorTemplate>,</SeparatorTemplate> <FooterTemplate><% Response.Write("];</script>")%></FooterTemplate> </asp:Repeater> </div></div><!--/header--> </div> </form> </body> </html> |
Ahora expliquemos el código. Agregamos el objeto repeater, el cual nos va a agregar todas las líneas correspondientes a cada una de las imágenes en la consulta.
El código sin repeater de forma normal se vería así, pero habría que hacerlo tantas veces como imágenes queramos en nuestro efecto slider
|
1 2 3 |
<a href=""> <img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a> |
Pero nosotros necesitamos crearlo de forma dinámica y que cargue n imágenes. Por eso en el repeater dentro del <ItemTemplate>
|
1 2 3 4 |
<a href=""> <img id='slide-img-<%#Eval("codigo_imagen")%>' src='<%#Eval("path_imagen")%>' class="slide" alt="" /></a> |
Luego en otro repeater tenemos que agregar el llamado a la función jQuery que es la que realmente crea el efecto. En el Header template del repeater le agregamos el header del javascript, luego agregamos por cada imágen un item en el arreglo, y finalmente el en Footer Template cerramos el javascript.
Ahora que tenemos todo esto, en el archivo Code-Behind Default.vb agregamos en el Load lo siguiente
|
1 2 3 4 5 6 7 8 9 |
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim dsImagen As New DataSet dsImagen = GetDataset() Me.RepeaterImagen.DataSource = dsImagen Me.RepeaterScript.DataSource = dsImagen Me.RepeaterImagen.DataBind() Me.RepeaterScript.DataBind() End Sub |
Ahí se llama y se cargan los objetos repeater con la consulta de nuestras imágenes.
En el archivo Default.aspx es requerido llamar en el <head> de la página las referencias
<script src=”scripts/jquery.js” type=”text/javascript”></script>
<script src=”scripts/scripts.js” type=”text/javascript”></script>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
Ahí se cargan los dos archivos javascript para que funcione el jQuery Slider y el archivo CSS.
Sin estos 3 archivos no funciona el ejemplo. Estos archivos y las imágenes se encuentran en el archivo para descarga.
Descargar solución jQuerySlider-01
13 comments
Anónimo - May 15, 2010 3:38 am
buen ejemplo, gracias
Anónimo - June 11, 2010 7:53 pm
tienen mas ejemplos?
Anónimo - July 29, 2010 12:34 pm
en este momento estamos desarrollando mas ejemplos, como teniamos problemas con el hosting del sitio tuvimos que posponer varios articulos nuevos.
ya cambiamos los servidores y ahora continuamos con las publicaciones, en estos dias normalizaremos los articulos
Anónimo - August 13, 2010 1:30 pm
muy buen ejemplo, muchas gracias por el aporte,de verdad gracias
Anónimo - August 13, 2010 1:30 pm
muy buen ejemplo, muchas gracias por el aporte,de verdad gracias
Anónimo - November 29, 2010 5:48 pm
muy bueno
Anónimo - March 16, 2011 3:22 pm
demasiado bueno
Anónimo - August 22, 2011 1:51 am
Hola, muy padre el ejemplo..pero yo tengo una duda…por defecto viene que muestre 7 imagenes, como es que se pueden mostrar menos o mas???
Anónimo - September 9, 2011 5:14 pm
y como seria la funcion con la consulta a la base de datos???
Anónimo - December 20, 2011 11:01 am
Como puedo hacer esto pero en C#
Anónimo - December 21, 2011 3:15 am
Me sumo a la pregunta:¿como se usaría el asp:repeater con c#?
Anónimo - December 28, 2011 7:48 am
Going to put this artclie to good use now.
Anónimo - July 19, 2012 1:34 am
hello how can i load all fancybox.js with mosrocsull and easing.sorry for bad english .i will chek my website if fancybox already been loadet for examble i have jquery load var jQueryScriptOutputted = false; function initJQuery() { //if the jQuery object isn’t available if (typeof(jQuery) == undefined’) { if (! jQueryScriptOutputted) { //only output the script once.. jQueryScriptOutputted = true; //output the script (load it from google api) document.write( ); } setTimeout( initJQuery() , 50); } else { $(function() { //do anything that needs to be done on document.ready }); }}initJQuery();an this for fancybox that was great.can you help me ??