[Tips] Banner Rotativo con ASP.NET y JQuery
Hola que tal, acá va un pequeño tips de como hacer un banner que vaya cambiando de manera cíclica, si bien hay controles del lado del server que hacen esto, o la posibilidad de que con el control timer,más un updatepanel podamos realizar esto, creo que es mejor simplificar y no sobrecargar nuestra página con scripts generados.(No digo que sean malas técnicas, de hecho Microsoft Ajax me parece excelente, pero para un banner rotativo, simplifiquemos el asunto)
Primero: La Tabla que contiene los datos de los Banners
En donde vamos a tener el id, el texto alt, la url de la imagen y en link a donde nos vamos a dirigir cuando hagamos click.
Segundo: El script Jquery y Net para el Banner
Vamos a utilizar un plugin para Jquery que lo puedes descargar y ver las demos en http://malsup.com/jquery/cycle/ , tiene muy buenos efectos, en particular esta vez utilizaremos el efecto de Fade.
- Código JavaScript
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
-Código Declarativo
<div id="banner">
<div class="slideshow">
<asp:Literal ID="literal_banner" runat="server"></asp:Literal>
</div>
</div>
- CSS para el Ejemplo
.slideshow { height: 130px; width: 792px; }
.slideshow img { padding: 0px; }
- Código NET
Voy a utilizar un Dataset más su TableAdapter para que rápidamente tenga acceso a los datos de los banners a mostrar:
Y el código a utilizar:
Dim ta As New MiBannerDSTableAdapters.bannersTableAdapter
For Each img As MiBannerDS.bannersRow In ta.GetData
literal_banner.Text &= "<a href='" & img.banner_link & "'><img src='" & img.banner_imgUrl & "' alt='" & img.banner_alt & "' width=""792px"" height=""130px"" /></a>"
Next
End Sub
Como vez, lo que estoy haciendo simplemente es escribir en el literal el código HTML recorriendo la colección de DataRows que son devueltos por el tableAdapter, obviamente lo puedes hacer también con DataReades, Linq, EF,etc.
Cuarto : Configurar para ocultarlo, puede que el usuario quiera tener toda la pantalla disponible para su uso.
Hay veces que el banner puede molestar al usuario, el cual desea más área de trabajo en la pantalla, entonces sería bueno poder darle esta opción al usuario, por lo que vamos a tener un link de Mostrar y Ocultar Pantalla. La idea es que pinche sobre una etiqueta y se oculte el banner, luego se pinche sobre la misma etiqueta y aparezca nuevamente el Banner.
- Código JavaScript
$("#msg").click(function() {
if ($("#msg").html() == '[-]Banner') {
$("#msg").html('[+]Banner');
$("#banner").slideUp(1500);
} else {
$("#msg").html('[-]Banner');
$("#banner").slideDown(1500);
}
});
- Etiqueta HTML
<span id="msg">[-]Banner</span>
Resultado Final
El cual va cambiando con un efecto de FADE, además si apretamos [-]Banner se oculta con un efecto de slideUp.
Te dejo entonces el Ejemplo (con base y todo) para que lo pruebes.
DESCARGALO ACÁ
Espero que te haya servido,
Saludos,
Gonzalo