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
Non ho capito se deve essere possibile trascinare l'angolo o semplicemente, cliccandoci sopra, il quadrato aumenta di dimensioni.
la seconda che hai detto, al click aumentano le dimensioni del rettangolo (come effetto simile a quello che vedi nel video)
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
});
});
});
e per il fatto che diventi una gallery con lightbox ci possono essere problematiche?
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();
}
});
});
});
Perfetto, allora provo e ti dico!
Intanto grazie mille
Notte
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.
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".
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??
Qual è la galleria che non funziona? Ho provato un po' di box a caso e aprono tutti la lightbox.
hai ragione, non ti ho spiegato bene...
sulla sez I MANGIARI clicca sull'elemento "solo vini naturali"
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?
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).
Mi dicono che col
parent non funzia!
Allora devi cercare un'altra gallery che non sia una lightbox.