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 ejemplo jQuerySlider-01.rar
Ver ejemplo
http://gadgetinspiration.com/blog/wp-content/uploads/jquery%20sliders/index.html
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)
'Esta función 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 imágenes.
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 archivo Default.aspx, vamos a agregar el código necesario para mostrar los datos en nuestra página web.
<%@ 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 href="http://www.w3.org/1999/xhtml">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
<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>
<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
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 ejemplo jQuerySlider-01.rar
Ver ejemplo
http://gadgetinspiration.com/blog/wp-content/uploads/jquery%20sliders/index.html