lightbox/grid flessibile/zoom (?)

[ppauloff]

salve a tutti!
sono nuovo nel forum e in generale nel html css e quant'altro.

premetto che non mi intendo moltissimo di codici o termini specifici quindi chiedo in anticipo perdono se la mia domanda risulterà stupida, poco comprensibile o con termini sbagliati...

sto costruendo un sito in wordpress da utilizzare come portfolio dei miei lavori, ho una homepage con una griglia di preview (mi piacerebbe fosse "masonry" o stili simili ma magari approfondisco in un altro post) e mi piacerebbe che cliccando su una delle immagini non si aprisse una nuova pagina col singolo lavoro, ma una sorta di lightbox o, meglio, si creasse uno zoom dell'immagine e tutte le altre nella griglia si spostassero così da lasciare spazio a questa e magari alla descrizione, così:

Allegato 28911

non so se sia chiaro, ma quello che vorrei ottenere è che cliccando un'immagine (azzurra), questa venisse zoommata in modo da avere maggiori dettagli (tipo lightbox quindi semplice immagine zoommata o slide) e che quindi le altre immagine della griglia slittassero in modo da permetterlo lasciando magari anche lo spazio per la descrizione o info (grigio).
questo perchè personalmente non mi piacerebbe avere mille milioni di pagine con un singolo progetto ciascuna, ma vorrei che restasse tutto su un'unica pagina (che è la home/preview) e allo stesso tempo non mi piacciono molto le classiche lightbox che si aprono sovrastando semplicemente tutto il resto!

non so se sia riuscito a rendere l'idea o se effettivamente sia una cosa fattibile, in ogni caso spero possiate aiutarmi!

ps. non fatevi problemi a chiedere chiarimenti o ad insultarmi ahahah

grazie in anticipo e scusate la filippica!

[KillerWorm]

Ciao e benvenuto, purtroppo non vedo l'allegato, il link mi da un messaggio "Allegato specificato non è valido". Se si tratta di un'immagine, prova ad allegarla usando l'apposito strumento "Insert Image" e adoperando uno dei formati consentiti.

La richiesta in questo caso risulta poco chiara se non ambigua. Riguardo il tipo di layout masonry (da chiarire meglio cosa intendi perché non vedo l'allegato), questo è spesso creato attraverso l'uso di plugin/librerie JavaScript/jQuery (puoi trovarne diversi sul web, anche per WP). Non vedendo l'allegato non riesco quindi a capire se l'effetto che vuoi ottenere può essere slegato dal fatto che tu utilizzi o no quel tipo di layout ma suppongo che l'effetto si debba integrare proprio all'interno del layout stesso. In questo caso ho l'impressione che tu debba prima definire il layout e quindi affrontare poi il discorso dell'effetto (zoom e spostamento degli altri elementi) o quantomeno cercare, se esiste, un qualche plugin che, oltre il layout masonry, integri già un tale effetto. Penso che la difficoltà maggiore stia nel calcolare il posizionamento degli elementi adiacenti (da quel che ho capito senza vedere l'allegato) in modo da creare lo spazio per l'elemento zoomato senza sfasciare il layout stesso.

Intanto sposto la discussione sul relativo forum, magari qualcuno può aver già avuto a che fare con un effetto simile.

Prova magari a riallegare un'immagine e definire meglio i dettagli.

[ppauloff]

ciao a te e grazie per la risposta!
si scusa, copiando ed incollando il testo mi sono perso l'allegato...

era questo griglia-01.jpg magari non è chiaro nemmeno così...la cosa che mi premeva chiedere comunque è se esista un modo (e se si quale ovviamente) per fare una cosa del genere, la questione masonry ecc è secondaria!
certo ovviamente invece se mi dici che le due cose sono collegate allora come non detto

grazie di nuovo!

[ciro78]

ciao ppauloff
e benvenuto sul forum. Ti invito a leggere il regolamento qualora non lo avessi fatto.

In particolar questa sezione del forum non è della serie chiavi in mano. Non forniamo codice fatto su misura(tranne qualche buona anima che lo fa se capita). Qui ci si aiuta a risolvere eventuali problemi legati al codice che abbiamo creato.

Detto questo cosa sei riuscito a fare fino ad ora?

[KillerWorm]

Vedendo l'allegato è certamente più chiaro.

la cosa che mi premeva chiedere comunque è se esista un modo (e se si quale ovviamente) per fare una cosa del genere, la questione masonry ecc è secondaria!
certo ovviamente invece se mi dici che le due cose sono collegate allora come non detto

Sinceramente non ho esperienza di effetti del genere e, che io ricordi, non ne ho visto in giro; non tanto del layout masonry ma del tipo di effetto zoom che vuoi integrare in un layout del genere.

Se preso singolarmente, tale effetto non è nemmeno così difficile da elaborare; in fondo si tratta di ridimensionare un'immagine e far comparire dei dettagli; ma mi pare evidente che tale effetto debba essere valutato sulla base del layout in cui sarà integrato. Questo perché non è solo un effetto zoom a sé stante, di un qualsivoglia elemento, ma coinvolge lo spostamento degli elementi che gli stanno accanto e che fanno parte di uno schema a griglia gestito probabilmente da qualche JavaScript. Non è chiaro come vorresti che questi elementi reagiscano con l'esecuzione di tale effetto.

Lo schemino allegato è comunque limitativo perché non copre le varie eventuali possibilità in cui l'elemento selezionato sia collocato tra le differenti posizioni, quindi non fornisce una chiara visione della logica da utilizzare per il riposizionamento dei vari elementi.

Se utilizzi un qualche plugin JavaScript/jQuery (uno tra tanti), in generale il posizionamento viene calcolato via script secondo l'ingombro dei vari elementi. In teoria, e molto a grandi linee, una soluzione potrebbe essere quella di estendere le dimensioni dell'elemento (o di quello che è il suo contenitore) in modo che questo contenga l'immagine zoomata e i vari dettagli, quindi chiamare in qualche modo la funzione di ricalcolo delle posizioni e lasciare che il plugin stesso si occupi di riposizionare i vari elementi. Chiaramente l'elemento potrà essere largo quanto l'intera larghezza della pagina così che gli altri elementi saranno forzati a posizionarsi sotto di questo. Ma il comportamento degli elementi che devono spostarsi è gestibile e configurabile solo conoscendo le caratteristiche, i parametri e i metodi che il plugin stesso offre.

Quindi ripeto, a mio parere sarebbe più sensato fare una ricerca sui differenti plugin che già esistono, quindi valutare quali possono offrirti la possibilità di integrare un effetto come quello da te richiesto. Possibile anche che esista già qualche plugin che offre entrambe le cose.

Di più, nin zo'.

[ppauloff]

grazie a tutti per le risposte e scusate se ho inteso il post nel modo sbagliato...

Detto questo cosa sei riuscito a fare fino ad ora?

purtroppo non molto, sia perchè non sono un grande asso della programmazione sia perchè volevo cercare di capire se una cosa del genere fosse fattibile prima!

Lo schemino allegato è comunque limitativo perché non copre le varie eventuali possibilità in cui l'elemento selezionato sia collocato tra le differenti posizioni, quindi non fornisce una chiara visione della logica da utilizzare per il riposizionamento dei vari elementi.

si me ne sono reso conto anche io dopo averlo fatto, in ogni caso era solo per dare l'idea di movimento del circondario!

comunque proverò a vedere un po' meglio se esiste qualcosa del genere oppure se manualmente si riesce a farlo!
grazie a tutti, e ovviamente se invece vi viene in mente qualcosa fatemi sapere