jQuery Gallery

jQuery Gallery

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.

<div id="gallery">
<input type="submit" id="back" value="indietro">
<figure><img src="" id="immagini"></figure>
<input type="submit" id="next" value="avanti">
</div>

Notate che il tag src è vuoto in quanto successivamente, utilizzando jQuery, grazie al metodo attr() daremo un valore al nostro attributo.

Inseriamo la nostra libreria jQuery, includendo il seguente codice:

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

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.

Alcuni link utili:

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript

jQuery attr()

jQuery attr()

In questa lezione studieremo il jQuery attr() method, un semplice metodo per assegnare un attributo al valore selezionato.

La sintassi per ritornare un valore di un attributo è questa:

$(selettore).attr(attributo)

Quindi un possibile uso potrebbe essere questo: $(h1).attr(“id”) in cui mi ritorna il valore id del tag h1.

La sintassi per impostare il valore di un attributo è questa:

$(selettore).attr(attributo, valore)

Quindi un esempio: $(#foto).attr(“width”, “300px”)

Per impostare il valore di un attributo secondo una funzione la sintassi è questa:

$(selettore).attr(attributo, function(index, classe_corrente))

O ancora per impostare più attributi:

$(selettore).attr({ attributo1:valore1, attributo2:valore2, … })

Facciamo adesso degli esempi.


Esempio di utilizzo di jQuery attr()

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.

Algoritmi con scratch

Per realizzare questo esempio ho inserito la nostra immagine e il pulsante subito sotto.

<figure><img src="img/angoli.jpg" alt="Algoritmi con scratch" width="250" height="200" id="immagine"></figure>
<button id="titolo">Dettagli immagine</button>

Dopo ho incluso la libreria jQuery:

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

Poi ho creato la semplicissima funzione che ritorna gli attribuit alt, width ed height dell’immagine.

<script type="text/javascript">
$(document).ready(function(){
  $("#titolo").click(function(){
    alert("Titolo immagine: " + $("#immagine").attr("alt") + " Larghezza " + $("#immagine").attr("width") + " Altezza " + $("#immagine").attr("height"));
  });
});
</script>

Secondo esempio di utilizzo del metodo attr()

Fate la prova a cliccare sul pulsante sotto, noterete che la dimensione dell’immagine cambierà.

immagine

Per realizzare questo semplice esempio, inserisco innanzitutto l’immagine e poi il pulsante sotto:

<figure><img src="images/img1.jpg" alt="algoritmi con scratch" width="250" height="200" id="dim"></figure>
<button id="cambio">cambio dimensioni img</button>

Includo la libreria e infine creo la semplicissima funzione utilizzando JQuery attr() method con questa sintassi: $(selettore).attr(attributo, valore).

<script type="text/javascript">
$(document).ready(function(){
  $("#cambio").click(function(){
    $("#dim").attr("width",'200');
    $("#dim").attr("height",'150');
  }); 
});
</script>

In questo caso potevo anche utilizzare la seguente sintassi:

$(selettore).attr({ attributo1:valore1,attributo2:valore2, … })

Quindi riscrivo la funzione precedente in questo modo:

<script type="text/javascript">
$(document).ready(function(){
  $("#cambio").click(function(){
    $("#dim").attr({width: "300", height: "250"});
  });
});
</script>

Terzo esempio di utilizzo di jQuery attr() method

Facciamo ancora degli esempi pratici di utilizzo del metodo attr().

Se fate la prova a cliccare sul pulsante sotto, vedrete che l’immagine diventerà più piccola sia in larghezza sia in altezza.

immagine

Inserisco come negli altri esempi la mia immagine e il pulsante sotto:

<figure><img src="images/img1.jpg" alt="immagine" width="250" height="200"></figure>
<button id="piccola">Scala l'immagine</button>

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>

Alcuni link utili:

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript


jQuery addClass()

jQuery addClass()

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.

.formatta {
  font-size: 22px;
  color: #cccccc;
  padding: 10px;
}

Dopo inseriamo il collegamento al foglio di stile appena creato e alla libreria jQuery.

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

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().

$(document).ready(function(){
  $("button").click(function(){
    $("#formattazione").addClass("formatta");
  });
});

Quindi colleghiamo questo file alla pagina html, prima della chiusura del tag body.


Esempio 2

In questo secondo esempio utilizzeremo il metodo addClass() con una funzione.

Coding Creativo. Primo paragrafo
Coding Creativo. Secondo paragrafo

Inizialmente inseriamo i due paragrafi ed il pulsante su cui attivare l’evento.

<p>Coding Creativo. Primo paragrafo</p>
<p>Coding Creativo. Secondo paragrafo</p>
<button>Aggiungi uno stile ad uno o più paragrafi.</button>

Dopo inseriamo la formattazione che vogliamo generare utilizzando un foglio di stile esterno che poi collegheremo alla pagina.

.paragrafo_0 {
  color: #cccccc;
  padding:20px;
}
.paragrafo_1 {
  color: #ff0000;
  font-size: 20px;
}

Poi creiamo il nostro semplicissimo script, utilizzando la funzione.

$(document).ready(function(){
  $("button").click(function(){
    $("p").addClass(function(n){
      return "paragrafo_" + n;
    });
  });
});

Chiaramente questi sono solo dei semplicissimi esempi realizzati con il jQuery addClass() method, più avanti vedremo altri esempi d’uso.

Alcuni link utili

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript

jQuery css()

jQuery css()

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.

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

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.

$(document).ready(function(){
  $("#scopri2").click(function(){
  $("#intro").css("color", "#999900");
  $("#intro2").css("background-color", "#cccccc");
  });
});

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.

Benvenuti su Coding Creativo!

Secondo paragrafo.

Quindi al solito includiamo la libreria:

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

Dopo inseriamo i due paragrafi ed il pulsante:

<div class="introduzione">
  <p id="testo">
    Benvenuti su Coding Creativo!
  <p>
  <p id="testo2">
    Secondo paragrafo.
  <p>
</div>

<button id="scopri2">Read more</button>

Infine inseriamo la nostra semplicissima funzione che utilizza al suo interno il jQuery css() method.

<script type="text/javascript">
$(document).ready(function(){
  $("#scopri2").click(function(){
       $("#testo").css({
               "background-color": "#999999",
               "color": "yellow",
               "font-size": "20px",
               "font-weight": "bold"
       });
       $("#testo2").css({
               "background-color": "#777700",
               "color": "#999999",
               "font-size": "22px",
               "font-style": "italic"
       });
     });
});
</script>

Chiaramente questi sono solo dei semplicissimi esempi d’uso del jQuery css() method, più avanti vedremo tante altre applicazioni.

Alcuni link utili

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript

jQuery show()

jQuery show()

Oggi studieremo il jQuery show() method, che consente di mostrare uno o più elementi.

Nelle lezioni precedenti abbiamo studiato il metodo hide() e slideToggle().

La sintassi del metodo è questa:

selettore.show(velocità, modalità, funzione)

I parametri velocità, modalità e funzione sono uguali ai due metodi precedenti, quindi chiaramente non sto qui a ripetervi le stesse cose.

Vediamo invece subito degli esempi pratici.


Esempio d’uso di jQuery show() method

Con il primo pulsante nascondiamo un elemento, con il secondo invece lo scopriamo.

Benvenuti su Coding Creativo

Per realizzare questo esempio al solito inseriamo la libreria:

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

Poi inseriamo il codice html:

<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.

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#nascondi").click(function(){
    $(".testo").hide(1000);
   });
  $("#scopri").click(function(){
    $(".testo").show(200);
  });
});
</script>

<div class="testo">Benvenuti su Coding Creativo</div>
<button id="nascondi">Nascondi</button>
<button id="scopri">Mostra</button>

Esempio 2 con l’uso di show()

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:

<style type="text/css">
#intro2 { display:none; }
</style>

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:

<style type="text/css">
    #intro2 { display:none; }
</style>

Occorre allora impostare inizialmente il livello con id uguale a intro2 nascosto $(“#intro2”).hide().

Allego lo script di esempio:


<script type="text/javascript">
$(document).ready(function(){
 $("#intro2").hide();
   $("#scopri2").click(function(){
       $("#intro2").show().css("background-color", "yellow");
  });
});
</script>

In questa lezione abbiamo fatto solo dei semplici esempi di utilizzo del jQuery show() method, più avanti approfondiremo meglio.

Alcuni link utili:

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript