Galleria dinamica-random

**Vatbury** · 07-03-2007, 12:42

Ciao, ormai sono giorni che sto impazzendo per creare una galleria dinamica.
Mi spiego:
Devo visualizzare in home page circa 30 foto (6 per riga, quindi 5 righe) e ad ogni foto è collegato un link.
Io vorrei che ogni volta che si accede a questa home page si vedessero sempre tutte e 30 le foto ma disposte in maniera diversa.
Qualcuno può aiutarmi?
Grazie

Vatbury

**pietro09** · 07-03-2007, 13:22

vedi se ti può servire. Nota: l'esempio va adattato. Le immagini le nominerei all'incirca così:

img_0, img_1, ..., img_29

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Pagina senza titolo</title>

    <script language="javascript" type="text/javascript">
// <!CDATA[
window.onload = function()
{
    //vettore del percorso delle immagini
    var v = ["/ArchivioEsempi2/immagini/aggiorna.gif",
                "/ArchivioEsempi2/immagini/annulla.gif",
                "/ArchivioEsempi2/immagini/cancella.gif" 
            ];
    //vettore degli indici dei percorsi delle immagini
    //in sequenza casuale
    var vr = getRandomIndex(v);
    
    //aggiungo le immagini al contenitore
    for(var i = 0; i < vr.length; i++)
    {
        var img = document.createElement("img");
        img.setAttribute("src", v[vr[i]]);
        document.getElementById("div1").appendChild(img);
        document.getElementById("div1").appendChild(document.createElement("br"));
        document.getElementById("div1").appendChild(document.createElement("br"));

    }
    
}

//restituisce un vettore con gli elementi di array
//in sequenza casuale
function getRandomIndex(array)
{
    var n = array.length;
    
    //creo un vettore di indici
    var a = new Array(n);
    for(var i = 0; i < n; i++) a[i] = i;
    
    //mescolo gli indici
    for(var i = a.length - 1; i > 0; i--)
    {
        //scambio l'elemento i-esimo con un elemento
        //il cui indice è nell'intervallo [0-i]
        /*
        nota: ho scelto [0-i] e non [0-i[ per dare la possibilità
        di non scambiare l'elemento (anche questo è casuale)
        */
        var j = random(0, i);
        var tmp = a[i];
        a[i] = a[j];
        a[j] = tmp;
    }
    return a;
   
}



//restituisce numero casuale compreso tra min e Max, compresi
function random(min, Max)
{
	return Math.floor(min + (Math.random() * (Max - min + 1)));
}

// ]]>
    </script>
</head>
<body>
    <h3>Posizionamento di tre immagini in ordine casuale</h3>
    <div id="div1"></div>
</body>
</html>

**Vatbury** · 07-03-2007, 16:23

mamma mia, è davvero arabo per me

non capisco nemmeno quali sono le cose da sostituire.
Pensavo fosse sufficiente solo cambiare il percorso e il nome delle immagini...invece cosa bisogna modificare ancora?
Grazie

Vatbury

**pietro09** · 07-03-2007, 16:35

Il dono di spiegare bene io proprio non l'ho. Spero che intervenga qualche altro amico. Ciao.

**pierofix** · 07-03-2007, 17:19

Si potrebbe anche fare un'altra cosa.

In primis, si crea una pagina con tutte le foto in ordine. Così, scritte tranquillamente e semplicemente nel mark-up.

Al completo caricamento della pagina, facciamo partire uno script che: legga e archivi tutte le foto in un array; cancelli tutte le foto dalla pagina; le riposizioni a caso estraendole dall'array e riscrivendole nella pagina.

Tutto in automatico, senza parametri da personalizzare.

Questo però avrebbe senso solo se le immagini non sono troppo pesanti. Si tratta di piccole gif o di foto dettagliate?

**Vatbury** · 07-03-2007, 20:04

Pierofix, le immagini sono piccole 113*170 e pesano circa 10kb l'una.
E'necessario che siano .gif o .jpg vanno bene lo stesso?
Possono andare bene come dimensioni? Se sì come procedo?
Grazie

Vatbury

**pietro09** · 07-03-2007, 20:44

Originariamente inviato da pierofix
Si potrebbe anche fare un'altra cosa.

In primis, si crea una pagina con tutte le foto in ordine. Così, scritte tranquillamente e semplicemente nel mark-up.

Al completo caricamento della pagina, facciamo partire uno script che: legga e archivi tutte le foto in un array; cancelli tutte le foto dalla pagina; le riposizioni a caso estraendole dall'array e riscrivendole nella pagina.

Tutto in automatico, senza parametri da personalizzare.

Questo però avrebbe senso solo se le immagini non sono troppo pesanti. Si tratta di piccole gif o di foto dettagliate?

sono al 99.9% daccordo con te:

In primis, si crea una pagina con tutte le foto in ordine. Così, scritte tranquillamente e semplicemente nel mark-up.

Al completo caricamento della pagina, facciamo partire uno script che: legga e archivi tutte le foto in un array; legga il src casuale dal vettore e lo modifichi
qualcosa del genere (pseudo script)

for var i=0; i< v.lenth; i++)
{
document.getlementbyid("img_" + i).src = valore casuale estratto dal vettore
etc. etc.

per il resto è una questione di gusti

ciao

**pierofix** · 08-03-2007, 11:04

Originariamente inviato da Vatbury
Pierofix, le immagini sono piccole 113*170 e pesano circa 10kb l'una.
E'necessario che siano .gif o .jpg vanno bene lo stesso?
Possono andare bene come dimensioni? Se sì come procedo?

Sì, direi che possiamo provarci. L'estensione del file è ininfluente. Andiamo con un esempio base (poi magari lo affiniamo):

codice:

XHTML

<ul id="elenco">[*]
      <a href="/home">
         [img]home.jpg[/img]
      </a>
   [*]
      <a href="/blog">
         [img]blog.jpg[/img]
      </a>
   
   [/list]


Javascript

window.onload = function()
{
   // Prepariamo tutti gli 'attori' dello script
   var elenco = document.getElementById('elenco')
   var immagini = elenco.getElementsByTagName('li')
   var contenuto = new Array()
      for (var i = 0; i < immagini.length; i++)
      {
         contenuto.push(immagini.item(i).innerHTML)
      }

   // Ordiniamo le immagini in ordine casuale
   function numero_casuale()
   {
      var numero = Math.round(Math.random()) - 0.5
      return numero
   }
   contenuto.sort(numero_casuale)

   // Riscriviamo le immagini nella pagina
   var codice = ''
   for (var i = 0; i < immagini.length; i++)
   {
      codice += '[*]' + contenuto[i] + ''
   }
   elenco.innerHTML = codice
}

Secondo me sarebbe bene eliminare l'uso di 'innerHTML' a favore del DOM, però ci vuole un po' più tempo per ragionarci sopra. Intanto prova a vedere se così ti va bene.

**Vatbury** · 08-03-2007, 11:33

Innanzitutto grazie delle risposte

Ho provato a copiare e incollare lo Javascript togliendo solo le parti verdi, però mi da errore. Ho sbagliato io a limitarmi a togliere le parti verdi e devo fare qualcos'altro?

Vatbury

**pierofix** · 08-03-2007, 11:41

Stai attento però, perché anche la struttura XHTML deve ricalcare l'esempio che ti ho portato io.

Discussione: Galleria dinamica-random

Strumenti discussione

Ricerca discussione

Visualizza

Galleria dinamica-random

Permessi di invio