Home / Programmazione / Javascript - AJAX / Immagini random con jQuery
Mattepuffo

Immagini random con jQuery

Immagini random con jQuery

Una cosa molto richiesta e che è abbastanza facile da applicare: impostare immagini random sullo sfondo.

Vi presento quindi un piccolo scriptino realizzato con jQuery.

Alcune limitazioni:

  • lo script prevede una singola estensione alle immagini (in questo caso jpg, ma è possibile usare un'altra estensione)
  • le immagini devono avere lo stesso nome di base, più una parte progressiva:
    • sf-1.jpg
    • sf-2.jpg
    • .......

Direi che nel complesso non sono limitazioni proibitive.

 

Vediamo lo script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
            $(document).ready(function() {
                var totaleImmagini = 8;
                var randomNumber = Math.round(Math.random() * (totaleImmagini - 1)) + 1;
                var imgPath = ('images/sfondi/sf-' + randomNumber + '.jpg');
                $('#body_sf').css('background-image', ('url("' + imgPath + '")'));
             });
</script>

Prima carico jQuery da Google.

Imposto il numero totale di immagini disponibili (potete mettere anche un numero più elevato di quello che c'è effettivamente).

Sotto uno le funzioni matematiche per calcolare un numero rando arrotondato.

Poi imposto il path dell'immagine assegnando il numero della foto (ecco perchè devono avere un numero progressivo.).

Infine imposto lo sfondo al componente che mi interessa usando le proprietà css direttamente da jQuery; io ho assegnato l'id body_sf direttamente al tag body:

<body id="body_sf">

Fate qualche prova; se riuscite a migliorarlo anche meglio!!