Apertura pagina con fade delle immagini

[Pepo06]

Ciao a tutti,

ho una pagina con quattro immagini che formano un quadrato.

Esiste qualche script (o plugin di jQuery) che impostando una sequenza di "apertura" mi visualizzi le immagini con effetto fade seguendo un certo ordine?

Esempio:
1 2
3 4

sono le immagini e la loro disposizione a formare un quadrato.
A questo punto lo script dovrebbe visualizzarmi prima l'immagine 1, visualizzandola tramite una dissolvenza, una volta terminato il caricamento della prima immagine dovrebbe passare alla 2 con lo stesso effetto e così via.

E' realizzabile?

Grazie.

[Shores]

Credo tu possa farlo con una semplice chiamata a jquery fadein, usando il parametro callback per attivare il fadein successivo e così via...

[Pepo06]

Hai ragione!

E' proprio quello che mi serve, grazie mille!!

Ho dato un'occhiata e mi sono subito bloccato in un problema, che credo, di facile risoluzione:

$(document).ready(function(){
$("div_img1").fadeIn(3000, function () {
...

Come faccio a dirgli di farmi il fadein all'elemento <div id="div_img1">?

[Shores]

$(document).ready(function(){
$("#div_img1").fadeIn(3000, function () {
...

Ciao!

[Pepo06]

Che idiota

Grazie ancora!

[ivanisevic82]

Scusate ragazzi, mi intrufolo per collegare una domanda.

Ipotizzate la stessa situazione: 4 immagini che entrano con fade in.
Però al posto di "entrare" automaticamente una dopo l'altra, devono essere chiamate da un click.

Es:
- clicco su "A" e mi si apre (con fadeIn) l'immagine "1".
- clicco su "B" e mi si apre (con fadeIn) l'immagine "2".

Se dopo aver cliccato prima su A e poi su B, clicco nuovamente su A, l'immagine 1 non ritorna, perchè sta "sotto" l'immagine 2.

Come si può risolvere questo problema?

Grazie!

PS L'ideale sarebbe far si che al posto di un fadeIn, ci sia un "passa da 1.jpg a 2.jpg".
Come si può fare?

Grazie!

[Shores]

Devi spiegare meglio che cosa intendi per "sotto"!

Io comunque farei in modo che la funzione chiamata su onclick facesse insieme un fadeout degli altri riquadri e un fadein del riquadro cliccato, le funzioni di jquery che una volta selezionati tutti i quadrati, ti permettono di rimuovere solo l'elemento cliccato mi sembrano ottimali!

[ivanisevic82]

In effetti "sotto" è sbagliato.

Kmque, la tua soluzione potrebbe essere giusta, ma mi sembra un pò complicata...io ne vorrei una più semplice possibile, svelo i miei scopi

Vai a vedere questa semplicissima gallery (è solo un esempio): ogni volta che clicchi su una miniatura-link, si apre l'immagine grande.
http://www.ivanisevic82.com/pages/prova2.php
Vorrei fare questa identica cosa, ma con effetto fade!

La gallery la vorrei creare con html e css e l'effetto con js.

In alternativa, volend fare tutto via js, la gallery che ho linkato sopra è costruita così:

  /* elementi variabili */
  ncol=2;
  // numero colonne;
  nfoto=10;
  // numero foto;
  folder="/media/";
  //cartella in cui sono contenute le immagini
  prefisso="image";
  // elemento costante delle foto (image1.jpg,image2.jpg => image)
  suf_big="_big";
  // suffisso per le foto grandi
  suf_small="";
  // suffisso per le foto piccole
  ext=".jpg";
  // estensione foto
  /* fine elementi variabili */

function photo_grande(){
  document.write("<img src=\""+folder+prefisso+"0"+suf_big+ext+"\" name=\"grande\" border=\"0\">");
}
function photo_gallery(){
  document.write("<table cellspacing=\"0\" cellpadding=\"2\" border=\"0\">");
  for (i=1;i<=nfoto;i++){
  if (i%ncol==1) document.write("<tr>");
  document.write("<td><a href=\"#a\" onclick=\"document.grande.src='"+folder+prefisso+(i-1)+suf_big+ext+"'\">");
  document.write("<img src=\""+folder+prefisso+(i-1)+suf_small+ext+"\" border=\"0\"></a></td>");
  if (i%ncol==0) document.write("</tr>");
  }
  document.write("</table>");
}

Ci sarebbe il modo di infilarci dentro un effetto fade?

Grazie!

[Shores]

var newsrc;

function photo_grande(){
  document.write("<img src=\""+folder+prefisso+"0"+suf_big+ext+"\" id=\"grande\" border=\"0\">");
}

function photo_gallery(){
  document.write("<table cellspacing=\"0\" cellpadding=\"2\" border=\"0\">");
  for (i=1;i<=nfoto;i++){
  if (i%ncol==1) document.write("<tr>");
  document.write("<td><a href=\"#a\" onclick=\"newsrc='"+folder+prefisso+(i-1)+suf_big+ext+"';$('#grande').fadeOut('slow',change_src);\">");
  document.write("<img src=\""+folder+prefisso+(i-1)+suf_small+ext+"\" border=\"0\"></a></td>");
  if (i%ncol==0) document.write("</tr>");
  }
  document.write("</table>");
}

function change_src(){
	document.getElementById('grande').src=newsrc;
	$('#grande').fadeIn("slow");
}

E' un po' brutale, perchè non c'è nulla che contrlli che l'immagine nuova sia stata già caricata, ma dovrebbe funzionare!

[ivanisevic82]

L'ho inserito al posto del precedente, ma la differenza è che ora non si vede più niente

Creado che sia per colpa di alcuni errrori che mi pare ci siano nel cdice che mi hai mandato...nel senso che ci sono certi simboli strani tipo &lt; al posto di <
Credo siano errori di formattazione del testo.

Ho provato a correggere io ma continua a non andare, probabilmente sbaglio qualcosa.