[jQuery] Muoversi all'interno del DOM

[blinkshow87]

Salve, chiedo il vostro aiuto, ecco il codice base:

<div id="group">
  <div>                
      [img]img.jpg[/img]                 
      

Lorem ipsum dolor</p>             
  </div>  
  <div>                
      [img]img.jpg[/img]                 
      

Lorem ipsum dolor</p>             
  </div>
  <div>                
      [img]img.jpg[/img]                 
      

Lorem ipsum dolor</p>             
  </div> 
</div>

questo è la parte jQuery, al click mi si ingrandisce l'immagine:

$(".group div").children('img').click(function () {
//ingradimento dell'immagine
)}

Una volta grande, accanto all'immagine vi sono dei bottoni, la mia domanda è:

come posso passare all'immagine successiva presente all'interno dell'HTML?
Ho provato con parent() e next() ma niente.

Grazie a tutti!!! Un saluto

[Xinod]

cioe' uno di questi bottoni che appaiono insieme all' immagine ingrandita dovrebbe emulare il click sulla prossima immagine piccola?

questa immagine ingrandita cos'e'? una manipolazione della medesima <img>? una nuova immagine? dove viene appesa? ce n' e' una sola per documento o puoi averne molteplici allo stesso tempo?

specie quando si parla di traversing non si puo' tirare a indovinare,
bisogna vedere tutto il codice e il risultato dello stesso

[blinkshow87]

Grazie per la tua risposta, purtroppo il codice è lungo e ho cercato di postare solo le parti principali.

L'immagine ingrandita è la stessa immagine cliccata ma con una classe diversa, in questo caso più grande.

Il bottone dovrebbe far comparire, al posto dell'immagine cliccata in precedenza, quella contenuta nel div successivo, sempre con la stessa classe.

Viene appensa in un div creato nello script e posizionato al centro della pagina.

Nel documento c'è ne una sola.

Dovrebbe essere una specie di slideshow, so che ci sono molti tutorial in rete ma vorrei provarci con le mie mani, anche con qualche aiutino così da poter conoscere qualche comando nuovo

[Xinod]

Originariamente inviato da blinkshow87
Viene appensa in un div creato nello script e posizionato al centro della pagina.

Nel documento c'è ne una sola.

perfetto, quindi sospetto venga appesa al body e non cercherei di tenere traccia della relativa miniatura, per puntare alla prossima, via traversing

piuttosto, se l' ordine ed il numero di miniature non cambia dopo il primo caricamento, passerei in un data l' indice di quel div in "group" espanso al momento

se il click e' registrato su questi div, quindi this e' il div
$('#idContenitoreImmagineIngrandita').data("indice ",$(this).index())

al click sul pulsante "avanti"
var indice= $('#idContenitoreImmagineIngrandita').data("indice ");
// qui incrementi l' indice verificando che esista, altrimenti per esempio lo azzeri, e punti al nuovo indice
$('#group div').eq(indice).trigger('click');

giusto per spiegare il concetto

ciao

[blinkshow87]

$('#idContenitoreImmagineIngrandita').data("indice ",$(this).index())
$('#group div').eq(indice).trigger('click');

questi comandi non li ho mai usati, ho provato così ma non funziona:

 
// il div che ho cliccato in una var
var global = $(this);

$("#buttonAvanti").click(function() {    
           $(divImgBig).data("indice",global.index());          
           var indice= $(divImgBig).data("indice");            
           $('#group div').eq(1).trigger('click');         
});

[blinkshow87]

Ho risolto così:

var PPP = elemCliccato.data('indice',$(this).index());
 $("#buttonAvanti").click(function() {
                PPP.children().eq(1).attr('id','imgBig').appendTo(divgrande);
            });

Giusto qualche ritocco e sarà perfetto, grazie per il tuo aiuto