jQuery Slider de forma dinámica con ASP.NET

0
105

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)


En el archivo Default.aspx, vamos a agregar el código necesario para mostrar los datos en nuestra página web.


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>


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


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

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

Con más de 18 años de experiencia en programación, experto en lenguajes .NET, VB, C#, ASP.NET, Xamarin, XCode, DBA en SQL Server. Creador de dotnetcr.com, sitio web para programadores en español.

royrojas.com | dotnetcr.com

Dejar respuesta

Please enter your comment!
Please enter your name here