Rettangolo che si espande con gallery

[Chandler]

Ciao Mattia, resuscito questo thread per chiederti se potresti consigliarmi come realizzare un effetto come questo video.
In pratica l'elemento, al click si allarga e diventa la base per una gallery...

Hai consigli??

Grazie

Chand

[Mattia]

Non ho capito se deve essere possibile trascinare l'angolo o semplicemente, cliccandoci sopra, il quadrato aumenta di dimensioni.

[Chandler]

la seconda che hai detto, al click aumentano le dimensioni del rettangolo (come effetto simile a quello che vedi nel video)

[Mattia]

Se utilizzi jQuery, puoi utilizzare il metodo animate.

Quindi il codice HTML è:

Codice:

<div id="rettangolo">Contenuto del rettangolo a cui potresti dare la larghezza e l'altezza iniziale via CSS</div>

Il codice JavaScript è:

Codice:

$(document).ready(function() {
    $('#rettangolo').click(function() {
        $(this).animate({
            'width': 600, // Nuovo valore della larghezza in pixel
            'height': 400 // Nuovo valore dell'altezza in pixel
        });
    });
});

[Chandler]

e per il fatto che diventi una gallery con lightbox ci possono essere problematiche?

[Mattia]

Puoi utilizzare il parametro complete che permette di eseguire una funzione quando l'animazione è stata completata. In questo caso verrà mostrata la gallery all'interno del rettangolo.

Quindi il codice HTML diventa:

Codice:

<div id="rettangolo"><div class="gallery" style="display:none;">Contenuto della gallery</div></div>

Il codice JavaScript diventa:

Codice:

$(document).ready(function() {
    $('#rettangolo').click(function() {
        $(this).animate({
            'width': 600, // Nuovo valore della larghezza in pixel
            'height': 400 // Nuovo valore dell'altezza in pixel
        }, {
            'complete': function() {
                $(this).find('.gallery').show();
            }
        });
    });
});

[Chandler]

Perfetto, allora provo e ti dico!
Intanto grazie mille

Notte

[Chandler]

Buongiorno! Allora, sembra che questo codice non vada bene per il mio caso purtroppo, perché la libreria aggancia il suo handler all'evento onClick del div in automatico all'inizializzazione della pagina.

[Mattia]

Non so che galleria utilizzi, ma, se si aggancia al clic sul div con l'id "rettangolo", dovresti poterlo agganciare al div con la classe "gallery".

[Chandler]

Ciao Mattia,
lo sviluppatore ha provato QUI a seguire le tue istruzioni, ma il problema è quello che vedi... secondo te quale può essere il problema??

[Mattia]

Qual è la galleria che non funziona? Ho provato un po' di box a caso e aprono tutti la lightbox.

[Chandler]

hai ragione, non ti ho spiegato bene...
sulla sez I MANGIARI clicca sull'elemento "solo vini naturali"

[Mattia]

Dà errore, perché prova ad aprire le immagini http://fancyapps.com/fancybox/demo/1_b.jpg, http://fancyapps.com/fancybox/demo/2_b.jpg e http://fancyapps.com/fancybox/demo/3_b.jpg che sono un server esterno.
Al posto delle immagini d'esempio inserisci delle immagini presenti sul sito.

[Chandler]

Ciao Mattia,
adesso come puoi vedere QUI non mi da più errore, ma in ogni caso la lightbox si apre a parte, mentre io vorrei che fosse lo stesso box che si allarga a diventare la lightbox/gallery... è possibile?

[Mattia]

Per prima cosa potresti provare a utilizzare il parametro parent che permette di impostare un elemento diverso rispetto al body in cui inserire la lightbox (documentazione).

[Chandler]

Mi dicono che col parent non funzia!

[Mattia]

Allora devi cercare un'altra gallery che non sia una lightbox.