Home / Programmazione / Javascript - AJAX / Cambiare immagini al click con jQuery
Mattepuffo

Cambiare immagini al click con jQuery

Cambiare immagini al click con jQuery

Lo scenario è questo: abbiamo tre immagini (FRONTE, RETRO, LATO).

A sinistra abbiamo sempre una immagine grande e a destra le tre miniature.

<div class="art_img"><img id="img_grande" src="immagini/foto_FRONTE.jpg" alt="" width="180" /></div> // GRANDE

<img src="immagini/foto_FRONTE.jpg" alt="" width="50" class="img_thumb" /> // MINIATURE

<img src="immagini/foto_LATO.jpg" alt="" width="50" class="img_thumb" />

<img src="immagini/foto_RETRO.jpg" alt="" width="50" class="img_thumb" />

Quando clicchiamo su una miniatura l'immagine ingrandita deve cambiare con quella che abbiamo cliccato.

Possiamo fare tutto in maniera semplice e veloce con jQuery.

$(document).ready(function() {
  $('.img_thumb').click(function() {
   $('#img_grande').attr('src', this.src);
  });
});

Molto semplicemente attiviamo un evento click sulle immagini che la classe img_thumb (le miniature).

Quando si scatena l'evento prendiamo l'attributo sorgente dell'immagine ingrandita (img_grande) e lo cambiamo con il source della miniatura che abbiamo cliccato.

Il tutto è anche molto veloce.

Mi venissero a dire di nuovo che jQuery è inutile.....