Galleria di immagini dinamica in Asp.Net e-Jquery

Commenti 2

Asp.net Windows Form VS Asp.net MVC

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

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:
esempio database

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.

esempio slideshow

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.



Articoli Correlati

Form in Jquery ed Asp.Net Centrare un DIV verticalmente con i CSS Galleria di immagini dinamica in Asp.Net e-Jquery Asp.Net e Jquery - le basi

Commenti

Mario 09/03/2018
Ciao, bellissimo articolo e galleria, ma non riesco a capire perché funziona tutto, ma le miniature non scorrono.
Puoi aiutarmi?
Grazie
Mario

Andrea 09/03/2018
Ciao,
solo "ad occhio"direi che non c'è una funzione per fare lo slide delle thumbnails in fancybox.
Se non ricordo male una volta l'ho usato ma ho combinato questa con un altro plugin.



Lascia un commento

Il tuo indirizzo e-amil non sarà pubblicato.

Salva commento Anteprima