Galleria di immagini dinamica, in Asp.Net e Jquery

In questo articolo vedremo come realizzare una galleria di immagini tipo slideshow, utilizzando Asp.Net, Jquery.

Per creare questa galleria useremo diversi plug-in per Jquery quali: FancyBox, SerialScroll e ScrollTo ed inoltre impareremo ad usare i controlli Asp.Net, SqlDataSource e Repeater.
All'interno dei siti relativi agli elementi sopra nominati, troverete tutta la documentazione completa per imaprare ad usare al meglio. Nel nostro caso vedremo come sfruttarli per creare la nostra galleria.

Un esempio completo di questo articolo (comprensivo di plug-in) potete scaricarlo da qui.

Incorporamento dei file Javascript e degli stili

Inseriamo, all'interno della nostra pagina, tutti gli elementi JS necessari affinchè la nostra galleria possa funzionare:

<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script> 
<script src="Scripts/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script> 
<script src="Scripts/jquery.serialScroll-1.2.2-min.js" type="text/javascript"></script>

Ora colleghiamo lo stile per FancyBox e per il nostro contenitore di immagini:

<link href="jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />

<style type="text/css">
	img{border:none;} 
	#scroll{width:486px; height:90px; overflow:hidden; background-color:#FFF; float:left;} 
	#scroll ul {margin:0; padding:0; width: 5000px;} 
	#scroll ul li {list-style: none; float: left; border:solid 1px #ccc; margin-right:10px;} 
</style>

Incorporamento del controllo SqlDataSource

Per prima cosa dobbiamo creare un database ed una tabella che contenga le immagini che vogliamo visualizzare.
All'interno della cartella App_Data creiamo un database SQL Express denominato "Database.mdf", poi al suo interno creiamo una tabella denominta "Immagini" con i campi riportati in figura:

Popoliamo la tabella a piacere inserendo per ogni immagine un titolo, un nome compreso di estensione (es.mia-immagine.jpg) ed una descrizione.

Fatto questo, possiamo incorporare all'interno dei tag <form> </form> della nostra pagina un controllo SqlDataSource per collegarci al database ed alla tabella precedentemente creati.

<asp:SqlDataSource ID="sdsImmagini" runat="server" 
ConnectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True" 
ProviderName="System.Data.SqlClient" 
SelectCommand="SELECT * FROM [Immagini]" />

Il controllo SqlDataSource ci permette di collegarci ad un database SQL server o Microsoft Access. Può essere utilizzato per effettuare operazioni di SELECT, INSERT, UPDATE e DELETE su ogni tabella contenuta all'interno del database.

Inserimento del controllo Repeater e degli elementi grafici

Ora creiamo graficamente il nostro slideshow, utilizzando diversi tag <div>, i quali conterranno le frecce per spostarsi da una visualizzazione ad un'altra ed il contenitore delle nostre immagini.

<div style="float:left;"><a href="#"><img class="prev" src="Images/fancy_nav_left.png" alt="indietro" /></a></div> 
<div id="scroll"> 
	<ul>
		<asp:Repeater ID="rptImmagini" runat="server" DataSourceId="sdsImmagini"> 
			<ItemTemplate> 
				<li> 
					<a rel="example_group" <%# Eval("Immagine","href=""images/{0}""") %> > 
					<asp:image runat="server" ID="hlImmagine" 
					ImageUrl='<%# Eval("Immagine","images/{0}") %>' 
					AlternateText='<%# Eval("Titolo") %>' 
					ToolTip='<%# Eval("Titolo") %>' 
					width="100px" height="75px"/> 
					</a> 
				</li> 
			</ItemTemplate> 
		</asp:Repeater> 
	</ul> 
</div> 
<div style="float:left;"><a href="#"><img class="next" src="Images/fancy_nav_right.png" alt="avanti" /></a></div>

Come possiamo vedere all'interno del tag <div> utilizzato come contenitore per le nostre immagini, abbiamo inserito un controllo Asp.Net Repeater. Questo controllo possiede una proprietà denominata DataSourceId  alla quale possiamo associare un controllo di origine dati come l'SqlDataSorce visto in precedenza.

Una volta caricata la pagina, il Repeater si popolerà in base ai dati recuperati dal SqlDataSource restituiendo, in maniera ripetuta, un insieme pre-impostato di controlli Asp.Net.

Se proviamo a visualizzare la pagina all'intenro del browser dovermmo avere un risultato simi a quello in figura.

Applicazione dei plug-in Jquery

Abbiamo creato l'origine dei dati e l'involucro che li contiene, ma come possiamo vedere la nostra galleria, ancora non è funzionante, quindi ora andiamo ad inserire gli elementi che c mancano.

All'interno dei tag <head> </head> dopo gli elementi già incorporati in precedenza, andiamo ad inserire una funzione Jquery che verrà chiamata al completo caricamento del DOM.

$(function () {
	//applico la possibilità di muoversi
	//all'interno dello slideshow
	$('#scroll').serialScroll({
		items: 'li',
		prev: 'img.prev',
		next: 'img.next',
		start: 0,
		step: 4,
		duration: 600,
		force: true,
		stop: true,
		lock: false,
		cycle: false,
		easing: 'easeOutExpo'
	});

	//applico la fancybox agli elementi della galleria
	$("a[rel=example_group]").fancybox({
		'transitionIn': 'easeOutExpo',
		'transitionOut': 'none'
	});
});

Gli script appena inseriti intervengono su due elementi principali della nostra galleria:

1. Il primo da la possibilità di muovere il contenuto dello slideshow nelle direzioni destra e sinistra
2. Il secondo permette di visualizzare l'immagine ingrandita una volta fatto clic sulla miniatura.
   Dall'immagine ingrandita sarà possibilie navigare tra le immagini senza  dover richiudere la visualizzazione.

Conclusioni

Abbiamo visto come è possibile integrare una galleria fotografica, fatta utilizzando Jqery all'interno delle nostre pagine Asp.Net, recuperando i dati da una fonte esterna.