Realizziamo una jQuery Gallery, ovvero una galleria con jQuery per lo scorrimento delle immagini.
Per realizzare un semplice esempio di jQuery gallery utilizzeremo il metodo attr(). Successivamente utilizzeremo altri metodi per creare gallerie più accattivanti, quindi considerate questo esempio puramente didattico.
Abbiamo già realizzato in precedenza una galleria semplicemente utilizzando JavaScript a questo link: galleria immagini javascript.
Esempio di jQuery Gallery
Immaginiamo quindi di voler realizzare il seguente esempio:
Per realizzare questo esempio creiamo innanzitutto la nostra cartella image. Dopo salviamo all'interno di essa le nostre immagini tutte con il nome coding seguite da un numero.
Ad esempio coding1, coding2, ecc.
Supponiamo allora di voler inserire ad esempio 6 immagini e di voler creare dei pulsanti per scorrere le nostre immagini.
Creiamo innanzitutto il livello che conterrà l'immagine e i nostri due pulsanti avanti e indietro. Notate che ho dato id="back" per il pulsante indietro, id="next" per il pulsante avanti e id="immagini" per le nostre immagini. Questi valori mi serviranno poi per implementare le nostre funzioni con jQuery.
Infine creiamo la funzione per fare scorrere le immagini.
La nostra prima immagine sarà quella con indice i=1, cioè l'immagine di partenza sarà coding1. Dato che ho detto di voler inserire 6 immagini allora l'immagine finale sarà coding6, quindi inizializzo max=6, cioè il nostro indice arriverà dunque a 6.
Successivamente creo le due funzioni back e next per fare scorrere le immagini. Se l'indice diventa inferiore ad 1 allora faccio visualizzare l'ultima immagine. Se l'indice invece supera il valore massimo allora faccio ritornare l'indice a 1.
Allego lo script completo della semplice jQuery gallery realizzata a scopo didattico.
<script type="text/javascript">
$(document).ready(function(){
var i=1;
var max=6;
$("#immagini").attr('src', "images/coding" + i + ".jpg");
$("#back").click(function(){
i--;
if(i<1)
i=max;
$("#immagini").attr('src', "images/coding" + i + ".jpg");
});
$("#next").click(function(){
i++;
if(i>max)
i=1;
$("#immagini").attr('src', "images/coding" + i + ".jpg");
});
});
</script>
Chiaramente questo è un esempio molto banale di jQuery gallery, ma è importante per imparare alcune funzionalità base del linguaggio e rafforzare i metodi studiati finora.
Non mancheranno più avanti tanti altri esempi più professionali con relativa spiegazione.
Se fate la prova a cliccare sul pulsante sotto, apparirà una nuova finestra di dialogo con il titolo dell’immagine, la dimensione in larghezza e in altezza.
Per realizzare questo esempio ho inserito la nostra immagine e il pulsante subito sotto.
Includo la libreria e infine creo la semplicissima funzione utilizzando JQuery attr() method con questa sintassi: $(selettore).attr(attributo, valore).
Dopo inserisco la mia funzione utilizzando la sintassi $(selettore).attr(attributo, function(index, classe_corrente)), non dimenticando di includere la libreria jQuery. Rimpicciolisco l’immagine di 20 pixel ad ogni clic del pulsante sia in larghezza che in altezza.
<script type="text/javascript">
$(document).ready(function(){
$("#piccola").click(function(){
$("img").attr("width",function(n,l){
return l - 20;
});
$("img").attr("height",function(n,h){
return h - 20;
});
});
});
</script>
jQuery addClass() method – Questo metodo aggiunge una classe (add class), o anche più di una, ad uno o più elementi di una pagina web.
Quindi, ad esempio, se ho un paragrafo e voglio aggiungere una formattazione diversa, dopo un determinato evento, lo posso fare utilizzando il metodo addClass().
La sintassi è dunque questa: addClass(nome_classe, funzione (index, classe_corrente) ).
Dove il nome_classe specifica una o più classi da attribuire ad un elemento, mentre la funzione riceve quindi, come argomenti, la posizione dell’indice e il nome della classe corrente (ovvero quella esistente) che può essere opzionale.
Ma facciamo subito degli esempi per capire il funzionamento del metodo addClass().
Esempio 1 di utilizzo di jQuery addClass() method
Modifichiamo del testo al click del pulsante, aggiungendo una classe ad un elemento.
Cliccate quindi sul pulsante sotto. Noterete che solo il testo del primo paragrafo si modificherà.
Coding Creativo. Questo paragrafo cambierà.
Blog dove trovare articoli sulla programmazione. Questo paragrafo non cambierà.
Procedimento esempio con il metodo addClass()
Sviluppiamo adesso il codice necessario per realizzare questo esempio.
Innanzitutto inseriamo due livelli con il tag div che contengono del testo a piacere e sotto aggiungiamo un pulsante. Al livello (div) a cui vogliamo dare una formattazione diversa diamo poi un id, ad esempio io ho impostato id=”formattazione”.
<div id="formattazione">
Coding Creativo. Questo paragrafo cambierà.
</div>
<div>
Blog dove trovare articoli sulla programmazione. Questo paragrafo non cambierà.
</div>
<button id="pulsante">Clicca sul pulsante</button>
Inseriamo, in un foglio di stile esterno alla pagina web, le regole per la formattazione del testo, in cui specifichiamo la dimensione del testo, il colore e anche il padding.
Infine creiamo in un file a parte con estensione .js una semplicissima funzione che attiva il cambio del testo al clic del pulsante. Basterà aggiungere al livello con id=”formattazione” la classe formatta, che ho creato prima nel foglio di stile, (potevo scegliere qualsiasi altro nome) utilizzando il metodo addClass().
jQuery css() method è il metodo che serve a dare una formattazione ad uno o più elementi di una pagina web. Con jQuery css() infatti posso dare, ad esempio, un colore di sfondo ad un paragrafo oppure un colore di testo ad un titolo e così via.
La sintassi è dunque molto semplice: css(“nome_proprietà“). Dove nome_proprietà è una proprietà dei css, ad esempio color, background-color, ecc.
Oppure si può anche indicare il valore della proprietà seguendo la seguente sintassi: css(“nome_proprietà“,”valore“). Ad esempio posso scrivere come proprietà color e come valore red.
Esempio di utilizzo di jQuery css()
Vediamo, dunque, nel dettaglio, un esempio di utilizzo del metodo jQuery css(), formattando semplicemente dei testi.
Quindi cliccando sul pulsante read more, i paragrafi dell’esempio sotto cambieranno formattazione.
Benvenuti su Coding Creativo! Il testo diventerà verde
Secondo paragrafo. Diventerà grigio
Per realizzare l’esempio precedente innanzitutto aggiungiamo il collegamento alla CDN jQuery nella nostra pagina html, tra il tag di apertura e chiusura di head.
Dopo, nella pagina html, all’interno del tag body, inseriamo i paragrafi a cui vogliamo cambiare la formattazione e il pulsante che genera l’evento.
<div class="testo">
<p id="intro">
Benvenuti su Coding Creativo! Il testo diventerà verde
<p>
<p id="intro2">
Secondo paragrafo. Diventerà grigio
<p>
</div>
<button id="scopri">Read more</button>
Infine creiamo il nostro script utilizzando il metodo css che assegnerà al primo paragrafo il colore del testo rosso e al secondo invece unno sfondo grigio.
Ecco dunque lo script che utilizza il metodo jQuery css() che chiamo ad esempio script.js.
Aggiungiamo infine il collegamento allo script nella pagina html, prima della chiusura del body.
<script src="script.js" charset="utf-8"></script>
Esempio 2 sul metodo jQuery css()
In questo secondo esempio scopriremo come dare più di una formattazione ad un elemento. Ad esempio vogliamo che il primo paragrafo abbia sfondo grigio e testo giallo, dimensione del testo giallo, in grassetto e con distanza del testo dai bordi di 10 pixel.
Poi vogliamo che il secondo paragrafo abbia colore di sfondo verde, testo grigio, dimensione 22 pixel e che sia in corsivo.
<div class="testo">Benvenuti su Coding Creativo</div>
<button id="nascondi">Nascondi</button>
<button id="scopri">Mostra</button>
Infine realizziamo il nostro semplicissimo script che fa uso del metodo show() e anche del metodo hide(). Ho settato le due velocità diverse solo a titolo d’esempio.
Facciamo un altro esempio, in quanto questi metodi trovano applicazione in molte pagine web. Quando ad esempio un testo è troppo lungo e magari inizialmente, per un layout più funzionale, si vuole presentare solo una minima parte, si può cliccare sul pulsante classico read more per leggere tutto il testo.
Bene, fate la prova a cliccare sul pulsante sotto, vi comparirà il nuovo paragrafo in giallo.
Questa volta, per realizzare l’esempio, ho utilizzato anche la proprietà dei css3 display:none, necessaria in questo caso per nascondere un paragrafo.
Quindi aggiungiamo nella nostra pagina questo foglio di stile interno:
Dopo aggiungiamo il div con i due paragrafi, il primo visibile, il secondo inizialmente nascosto. Poi aggiungiamo il pulsante che genera l’evento.
<div class="testo">
<p id="intro">Benvenuti su Coding Creativo! Questo è un testo di introduzione visibile all'inizio della pagina.<p>
<p id="intro2">Questo è il testo aggiunto! Sul blog troverete esempi di scratch, algobuild, c, c++, javascript e tantissimo altro.<p>
</div>
<button id="scopri2">Read more</button>
Infine realizziamo il nostro semplicissimo script che utilizza il jQuery show() method.
//aggiungiamo la libreria jQuery
<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>
//script per scoprire un paragrafo nascosto
<script type="text/javascript">
$(document).ready(function(){
$("#scopri2").click(function(){
$("#intro2").show().css("background-color", "yellow");
});
});
</script>
Con la proprietà css(“background-color”, “yellow”) abbiamo impostato uno sfondo giallo. Nella prossima lezione vedremo più in dettaglio questa proprietà.
Lo stesso esempio si poteva realizzare senza l’uso dei CSS interni: