In questi giorni queste notti ho lavorato per rifare il sito del mio gruppo scout. Sarà online tra un paio di settimane ed ho deciso di sfruttare WordPress per pubblicare le notizie.
Una cosa carina che ho voluto realizzare è un background fisso con alcune foto prese da attività scout su cui la pagina scorre.
In un CSS però, non è possibile richiamare immagini random, così ho risolto con un piccolo ma semplicissimo hack.
La classe body è diventata come segue:
body {
background: url(images/randimg.php) no-repeat 0 0 #fff;
background-attachment:fixed;
color: #000;
font-family: Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
}
In questo modo il background, richiama come immagine un piccolissimo script PHP che ritornerà una immagine random.
Sul web esistono svariati script per richiamare file random da una directory, personalmente però non volevo appesantire il codice con routine inutili ed ho compresso tutto nella seguente riga:
<?php header('Location: image00'.rand(1,7).'.jpg'); ?>
Le immagini vanno salvate nella cartella images/ numerandole nel formato image00*.jpg e sostituendo all’asterisco un numero incrementale. Personalmente avevo meno di 10 immagini da far ruotare, così ho scritto il codice adattandolo alle mie necessità. Comunque, è semplicissimo aumentare il numero di file che verranno presi in considerazione dallo script.
Il comando rand(1,7), serve appunto a specificare tra quali valori dovrà muoversi il numero casuale generato.
Infine, il file randimg.php va salvato nella stessa directory in cui salveremo le immagini (nel mio caso dentro images/).
Si potrebbe facilmente implementare il codice per far controllare il numero di file presenti nella directory automaticamente, ma se non cambia frequentemente è bene evitarlo per alleggerire quanto più possibile il codice da processare e rendere tutto il più leggero e veloce possibile.
Vi farei vedere il risultato se il sito fosse già online… 🙂
Emanuele
Se volevi confondermi ci sei riuscito benissimo!! 😡
La mia ignoranza non ha limiti!! :worry:
Cmq, mi presento. Sono burberry.
Ho letto qualche tuo intervento (molto tecnico, forse troppo x me!) da Camu finchè ho visto il tuo commento sulla mia intervista con gattostanco e ti ho risposto. Piacere di conoscerti. Ora scurioso un po’ qui da te. Posso? 😉
Bye. A presto.
Meglio in javascript per una cosa così semplice, risparmio un pò di lavoro al server 😀
burberry, ognuno ha i propri interessi, sicuramente sarai più preparata di me in altre cose! 🙂
Tranquilla, curiosa pure… e piacere di conoscerti. 🙂
Alessandro, non mi fanno impazzire le soluzioni in js perché tutti coloro che navigano con browser senza js (o con plugin tipo no-script) in quel caso si perdono l’immagine di sfondo che è parte fondamentale della grafica e non un aspetto marginale.
Ciao,
Emanuele
Concordo con Emanuele, anche se il fixed potevi metterlo sulla stessa riga del background… Ma questi son dettagli 😛
Approvo molto la tua soluzione elegante e pulita 🙂 Ehi, vedo che ti mando qualche nuovo visitatore… burberry, piacere di vederti anche qui!
ciao mi è piaciuto molto il tuo script semplice e leggero…ho inserito anche sul mio blog lo script in questione linkando il tuo blog come fonte dello scipt…
c’è solo un appuntino da fare…potrebbe generare confusione lo spazio che credo per sbaglio tu abbia inserito nell’apertura del tag php < ?php …
molte persone copiano e incollano, e spesso non avendo conoscenze in materia si avviliscono perche non funziona piu nulla…
per il resto tutto ok!!!
ciao a presto!
Ciao, Stefano, ti ringrazio per la segnalazione. Purtroppo col vecchio plugin che utilizzavo per il codice, non potevo scrivere codice php perché veniva interpretato, così l’unica maniera era mettere uno spazio proprio li, in modo da non rendere riconoscibile il codice all’interprete PHP.
Riguardo al link, ti ringrazio, ma potresti utilizzare l’url di questo blog invece del dominio? E’ una pagina quasi in disuso quella.
Ciao,
Emanuele
si certo nessun problema!!!
[…] il file css sia nella root del sito. Interessante a tal proposito è lo script php trovato sul blog dreamsworld.it che ci consente di fare proprio […]
CSS è uno stile dinamico di codifica e ti permette di fare tante cose.
[…] ringrazia dreamsworld per lo script. Bookmark on DeliciousDigg this postRecommend on FacebookBuzz it upShare on […]
[…] ringrazia dreamsworld per lo script. Bookmark on DeliciousRecommend on FacebookShare on FriendFeedBuzz it upShare on […]
Veramente un’ottima soluzione !!! complimenti e grazie^^ up!
Spettacolare! Implementato e funzionante in un nanosecondo.
Ciao Emanuele,
sto facendo un sito per la scuola, e come sfondo avevo intenzione di mettere delle foto in rotazione, ma sembrerebbe proprio che sia impossibile..
Riusciresti a darmi una mano?
Ciao Francesco, hai provato a seguire il metodo indicato nel post? Cosa non ti torna?
Ciao,
Emanuele
Si, certamente
utilizzo anche easyPHP però non ho nessun caricamento dell’immagini..