Come creo una sequenza automatica di immagini?

**esacerbare** · 02-09-2009, 21:39

Per capire di cosa parlo andate qui:
http://demo.joomlatd.com/
In tutti i template trovate un riquadro dove si susseguono una certa serie di fotografie con un certo ordine e tramite diversi effetti grafici (dissolvenza, offuscamento, ecc...). Esiste un software che permette, scegliendo un certo numero di immagini, la creazione di questo riquadro in modo che poi possa essere importato con dreamweaver? Sono interessato sia a soluzioni mediante l'ausiglio di applicativi sia mediante l'introduzione diretta del codice.
Non sono interessato ad una soluzione superadattabile, mi basta che sia carina, punto e basta! Un software o un file che mi chiede le 3 o 4 immagine da mettere in sequenza é più che sufficiente!

Non voglio una supersoluzione ma una cosa bella esteticamente. Voglio affascinare ma senza grondare sudore

P.S.: Avevo un problema analogo per i menu, un utente mi ha detto di leggere la guida jquery e poi di adattare qualco modello già pronto... Voi che dite? La discussione principale é questa:
http://forum.html.it/forum/showthrea...readid=1353890
dunque, vediamo un po'... :master: ... si ho chiesto tutto!

**esacerbare** · 04-09-2009, 09:50

up!

**esacerbare** · 15-09-2009, 23:04

Devo creare questo riquadro animato, potreste postarmi il codice oppure consigliarmi qualche guida da leggere? Perché nessuno mi risponde?

Se qualcosa non é chiaro per favore chiedete ma non dimenticatevi di me! Per favore!!!

La prossima settimana leggerò qualche guida di javascript e una di jquery. Con questi strumenti posso fare questa cosa semplicissima oppure devo leggermi anche una guida di flash? Se si quale per favore?

Ciao e grazie

**Enzaccio** · 16-09-2009, 09:19

Originariamente inviato da esacerbare
Sono interessato sia a soluzioni ... / ... sia mediante l'introduzione diretta del codice.

Intanto puoi cominciare a compilare un Array con gli URL delle immagini, come questo qua sotto.

Nello SCRIPT trovi anche una function, che attivata cambia il Valore di SRC a un Tag IMG prelevandolo dall' Array; il numero d' indice da prendere in considerazione viene passato alla function dai singoli link/pulsanti, che di volta in volta la richiamano.

Basilare, è che il Tag IMG abbia un NAME e che questo sia riportato identico nell' istruzione JavaScript :

<img name="giorgio">
con:
document.images['giorgio'].src

codice:

<html>
<head><title>Basic JS Images Viewer</title>

<script type="text/javascript">

 var pictures = new Array();

  pictures[1] = "immagine.jpg";
  pictures[2] = "percorso/file.jpg";
  pictures[3] = "immagine12.jpg";
  pictures[4] = "cartella/foto-fiori.gif";


 function show(which){

    document.images['viewer'].src = pictures[which];
    
 }

</script>

</head>
<body>

<div align="center">


 | 1 | 2 |
   3 | 4 | 



   [img][/img]
</div>


</body>
</html>

**Enzaccio** · 16-09-2009, 20:54

Originariamente inviato da esacerbare
... fotografie con un certo ordine e tramite diversi effetti grafici (dissolvenza, offuscamento, ecc...).

Questo effetto viene ottenuto gestendo la OPACITY che è una proprità di STYLE.
Fatto è che i diversi Browser avevano iniziato a supportarla con diversi linguaggi.
Ora ci si può affidare a:

<img src="image.jpg" style="opacity: 0.4;">

con valore che va da 0 a 1 per gradi decimali, che è quella "ufficiale" secondo il W3C ed è supportata da tutti i Browser recenti -tranne- IExplorer che continua a rispondere solo alla sua proprietà, con valori da 0 a 100.
Per cui faremo:

<img src="image.jpg" style="opacity: 0.4; filter: alpha(opacity=40)">

Per avere l' effetto dissolvenza, dovremo gestire questi valori via JavaScript ed anche qui, per lo stesso motivo di cross-browsers compatibility, l' istruzione dovrà essere doppia (almeno).

Ci si avvale anche di azioni temporizzate, che possono essere programmate con setTimeout() e setInterval() che sono i timer di JavaScript.

N.B.: L' applicazione mostrata dal link che hai allegato, è in Adobe Flash (Macromedia); che è tutta un' altra "bestia".

**esacerbare** · 16-09-2009, 21:32

Grazie enzaccio, ho capito subito tutto il tuo listato senza sapere cosa fosse javascript! In questo caso lo trovo molto intuitivo, se poi sottolineassi le parole che scegli te e non sono del linguaggio di visualizzazione (show, viewer, ecc...) allora mi sarebbe tutto ancora molto più veloce ed intuitivo. Bastava capire che esiste una funzione 'document.images' che associa il nome di una variabile particolare di javascript chiamata array ad un tag immagine. Purtroppo il programmino non funziona perché quando apro il file html bisogna premere almeno su un numerino prima di visualizzare un'immagine.
Comunque il gradirei che le immagini si succedessero da sole senza che io prema sul tastino, devo usare flash per questo oppure posso fare tutto con javascript?

Grazie enzaccio!! Continua a scrivere!!

**Enzaccio** · 16-09-2009, 21:52

Originariamente inviato da esacerbare
La prossima settimana leggerò qualche guida di javascript e una di jquery. Con questi strumenti posso fare questa cosa semplicissima oppure devo leggermi anche una guida di flash? Se si quale per favore?

Può essere una cosa semplicissima da fare, se trovi uno script "preconfezionato" da aggiustare alla pagina; ma su questo non ti posso essere di aiuto.
Quanto all' intenzione di avvicinarsi a JS, puoi poi trovarlo meno ostico se prima "rompi il ghiaccio" con qualche esercitazione pratica come quella che ho riportato, che non buttarsi a capofitto solo in una guida teorica.

Se nello SCRIPT lasci l' Array invariato e sostituisci le altre righe in questo modo, ottieni già un qualcosa che aiuta a capire il fade-in (immagine che "entra" in dissolvenza, fade-out quando si applica per la sua "uscita").
Manca ancora l' istruzione per IExplorer, però:

codice:

<script type="text/javascript">

 var pictures = new Array();

  pictures[1] = "immagine.jpg";
  pictures[2] = "percorso/file.jpg";
  pictures[3] = "immagine12.jpg";
  pictures[4] = "cartella/foto-fiori.gif";


 var level = 0;

 function show(arturo){

    document.images['viewer'].style.opacity = "0";

    document.images['viewer'].src = pictures[arturo];

    level = 0;
    fadein();
 }


 function fadein(){

    document.images['viewer'].style.opacity = level;
    level = level + 0.1;
    setTimeout('fadein();', 200);
    
 }

</script>

La function show() adesso, per prima cosa rende completamente trasparente l' immagine nel Tag img name="viewer" con l' istruzione:

document.images['viewer'].style.opacity = "0";

poi assegna il Valore a SRC come già faceva prima, ed infine richiama una seconda funzione function fadein() che fa crescere il Valore di OPACITY per il solito Tag IMG "aggiornandolo" ogni 200 milli-secondi (puoi cambiare il numero).

Ci sono tuttavia, un paio di cose ancora da aggiustare ...

Originariamente inviato da esacerbare
... quando apro il file html bisogna premere almeno su un numerino prima di visualizzare un'immagine.

Puoi mettere l' URL di una immagine di partenza nel Tag IMG !!!!   Come normale HTML.
Poi JS la cambierà.

<img name="viewer" src="default-image.jpg">

Originariamente inviato da esacerbare
Comunque il gradirei che le immagini si succedessero da sole senza che io prema sul tastino, devo usare flash per questo oppure posso fare tutto con javascript?

Restando a JS, sarà ancora questione di funzioni temporizzate, con setTimeout() o setInterval()

**Enzaccio** · 17-09-2009, 12:18

Originariamente inviato da esacerbare
... se poi sottolineassi le parole che scegli te e non sono del linguaggio di visualizzazione (show, viewer, ecc...) allora mi sarebbe tutto ancora molto più veloce ed intuitivo.

Sono lasciati all' inventiva:

- i nomi dati alle funzioni create: function nomeCheVuoi(){ le istruzioni da eseguire, tra parentesi graffe }

- i nomi dati ai parametri che (eventualmente) raccolgono valori che vengono passati alla funzione:

    function nomeCheVuoi(parola_veicolo){
     rendi un dato valore uguale a quello veicolato dalla parola_veicolo
   }

- i nomi dati alle variabili var miaVariabile
   e come queste, gli Array var archivio = new Array()
   una variabile col seguito = new Array() che dichiara la creazione di un Array che risponderà al nome archivio

e poi i NAME e gli ID che assegni agli Elementi nel BODY perché JavaScript possa individuarli.

Questi termini, possono scriversi con lettere, numeri e _ (underscore)
non devono contenere spazi e non devono iniziare con un numero; sono sensibili al maiuscolo/minuscolo, come tutto il linguaggio JS (case-sensitive).

Esistono poi delle reserved words che vanno evitate nelle nominazioni, perché riservate al linguaggio JS, come: true false undefined
come pure i nomi di certe funzioni native del JS.
Su questo puoi fare ricerche in seguito.

Un Array può essere considerato un piccolo Database.
Puoi scriverlo anche in questa forma (dense o condensed):

var pictures = new Array(

    "immagine.jpg",
    "percorso/file.jpg",
    "immagine12.jpg",
    "cartella/foto-fiori.gif"   // non più la virgola nell' ultimo!

  );

anche restando su unica riga, però togli la doppia slash // (e il commento che la accompagna), perché quello che segue la // non viene più processato, per tutto il resto della riga.

In un Array così compilato però, accedi a immagine.jpg con pictures[0] perché gli Array iniziano a contare da zero; nell' altro modo di compilazione (regular), invece assegnamo il numero d' indice riga-per-riga e io sono partito con [1] per chiarezza, ma ci può sempre stare un pictures[0] = "prima_foto.jpg";

La prima versione di JS introdotta, non contemplava l' Oggetto Array.
Allora si poteva lavorare coi numeri nominando le immagini   unaparola1.jpg   unaparola2.jpg   unaparola3.jpg   e si seguiva un metodo che "ricompone" il filename+chenumero+'.jpg' (si può fare anche con il JS corrente).

Discussione: Come creo una sequenza automatica di immagini?

Strumenti discussione

Ricerca discussione

Visualizza

Come creo una sequenza automatica di immagini?

Un visualizzatore di immagini basilare

Fade-in Fade-out

Not use invalid characters in naming

Permessi di invio