DotNetcr.com
Si deseas hacer un intercambio de links con DotNetcr, escríbenos aquí
Recibe las actualizaciones vía RSS
Te invitamos a unirte en nuestras redes
   http://www.facebook.com/DotNetcr
   http://www.twitter.com/dotnetcr

jQuery Slider de forma dinámica con ASP.NET

Por royrojas | 5/14/2010 | Visitas 16,923 | Voto 5.00
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.
Categorías : ASP.NET, CSS - Themes, Ajax, jQuery

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 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.

<%@ 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

<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>

<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

Area de Comentarios
Por Anónimo - Fecha: 2010/05/15 03:38 AM
buen ejemplo, gracias
Por Anónimo - Fecha: 2010/06/11 07:53 PM
tienen mas ejemplos?
Por royrojas - Fecha: 2010/07/29 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
Por Anónimo - Fecha: 2010/08/13 01:30 PM
muy buen ejemplo, muchas gracias por el aporte,de verdad gracias
Por Anónimo - Fecha: 2010/11/29 05:48 PM
muy bueno
Por Anónimo - Fecha: 2011/03/16 03:22 PM
demasiado bueno
Por Anónimo - Fecha: 2011/08/22 01: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???
Por Anónimo - Fecha: 2011/09/09 05:14 PM
y como seria la funcion con la consulta a la base de datos???
Por Anónimo - Fecha: 2011/09/13 01:55 AM
Okay I'm covninecd. Let's put it to action.
Por Anónimo - Fecha: 2011/09/14 06:57 AM
s95W2j , [url=http://nokymaujwtic.com/]nokymaujwtic[/url], [link=http://wkfaysweznmw.com/]wkfaysweznmw[/link], http://lphtqvtoeaxk.com/
Por Anónimo - Fecha: 2011/09/16 09:14 AM
t6Vzed , [url=http://noeqhyobbfhw.com/]noeqhyobbfhw[/url], [link=http://qcsgsuoaqdnn.com/]qcsgsuoaqdnn[/link], http://rpukihzdncbt.com/
Por Anónimo - Fecha: 2011/12/20 11:01 AM
Como puedo hacer esto pero en C#
Por Anónimo - Fecha: 2011/12/21 03:15 AM
Me sumo a la pregunta:¿como se usaría el asp:repeater con c#?
Por Anónimo - Fecha: 2011/12/28 07:48 AM
Going to put this artclie to good use now.
Por Anónimo - Fecha: 2011/12/29 05:41 AM
zBmlAM , [url=http://jkrlsedlyeyk.com/]jkrlsedlyeyk[/url], [link=http://fosrxecpyuao.com/]fosrxecpyuao[/link], http://skifqdusyjxc.com/
Por Anónimo - Fecha: 2011/12/31 08:40 AM
sPgKYn , [url=http://pgtrlvcnmydv.com/]pgtrlvcnmydv[/url], [link=http://qdngayldbogy.com/]qdngayldbogy[/link], http://pddpltuhgewm.com/
Por Anónimo - Fecha: 2012/04/07 01:15 PM
a
Por Anónimo - Fecha: 2012/07/19 01: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 ??
Por Anónimo - Fecha: 2012/07/20 06:36 AM
VBOe7j , [url=http://qwvljobjqepq.com/]qwvljobjqepq[/url], [link=http://uyurxsfchtpu.com/]uyurxsfchtpu[/link], http://mdgtmbqmrczn.com/
Por Anónimo - Fecha: 2012/07/21 12:51 PM
scn08t , [url=http://ghtiymmcnylp.com/]ghtiymmcnylp[/url], [link=http://ysyohkrccdxh.com/]ysyohkrccdxh[/link], http://silmtzstnuud.com/
Por Anónimo - Fecha: 2012/09/26 06:49 PM
Sorry, do not use PHP code since the problem is not the end but in the front.You shloud use regular expressions from the front side, for example:The solution is to strip the tags on the front end with JS, using a regular expression. You can put the following code in line 92 of the second part of script.js:text.replace(\\u,”);Just mention it in case someone uses it in a production environment.Again, thanks for sharing.A healthy and happy Christmas and prosperous new year to all PD: Thanks Martin
Por Anónimo - Fecha: 2012/09/28 02:14 AM
XrfluN , [url=http://fipyhqbaruur.com/]fipyhqbaruur[/url], [link=http://vtvrkapwjvgj.com/]vtvrkapwjvgj[/link], http://cpyufwnuidht.com/
Por Anónimo - Fecha: 2012/09/29 02:21 PM
LoSWBN , [url=http://dbjerqkkwtvc.com/]dbjerqkkwtvc[/url], [link=http://iupbifpmvbhn.com/]iupbifpmvbhn[/link], http://gtrfcczofyke.com/
Por Anónimo - Fecha: 2015/12/17 02:02 PM
Ok, this is easy if you have posted the link of your WordPress theme. However, every theme has all the inairucttonsl guides installed in its folder. Check you theme's folder and find Readme.html or Readme.txt. Hope this will help. =]
Por Anónimo - Fecha: 2015/12/19 02:47 AM
salam. nakhandina vali crhjoei mitunam sitee doros konam k akharesh .ir bashe chon in ghaleba ro blogfa k kar nemikonan na? man farda y sar mizanam khaheshan ya inja javabamo bdid ya baram gmail konid man 16 salameo energie ziadi va3 yad greftan daram 1 sitam bgid kafieh mc mc mc rasti ghalebatun alian^_^ http://gibdtclk.com [url=http://hgcxnkwwb.com]hgcxnkwwb[/url] [link=http://hkcgif.com]hkcgif[/link]
Por Anónimo - Fecha: 2015/12/20 02:20 PM
Please keep us informed just like this. I get the urge to say it would sulppy up to !I’m learn a good thing from you site, while I’m hoping to achieve my goals. I absolutely liked reading everything that is published on your websites.Continuetruly are at core obtainable throughout. I actually like ypriceur post, Ill are obtainable to verify the latest posts. http://jtqvglelpi.com [url=http://mcnbgjgc.com]mcnbgjgc[/url] [link=http://ycusbb.com]ycusbb[/link]
Ingrese su Comentario
Comentario
Para poder votar debe estar registrado en DotNetcr.com
Solo queda registrado el primer voto enviado
Voto


Últimos Recursos
pedrojavier
CALIN
willipinru
richard
ragomez
shizumiru
PER 238
MEX 236
CRI 188
COL 118
ESP 105
ARG 88