Vedere dettagli foto senza ricaricare la pagina

[tuttainformatica]

Buongiorno a tutti,
ho una galleria composta da una griglia contenente tutte le foto, vorrei che cliccando una qualsiasi foto si apra un popup con tutti i dettagli (un po' come succede su Wordpress)senza ricaricare la pagina tutte le volte. Suppongo che questo vada fatto con una chiamata asincrona e una pagina in PHP che crea il popup ma non ne sono certo.
Qualcuno può darmi consigli?

Grazie

[alemoppo]

Personalmente non vedo necessità di utilizzare né le chiamate asincrone né PHP: puoi caricare/creare una immagine conoscendo il suo URL da javascript, ad esempio con Image()

Ciao!

[tuttainformatica]

Ciao,
oltre ai dati che posso ricavare da Image() ci sono altri dati che vengono dal db tipo chi ha caricato la foto sul server, data del caricamento, categorie, ...scusa mi ero dimenticato di specificarlo!

Ho provato a dare un array a Javascript ma ovviamente stampa tutto l'array nel codice sorgente.

Grazie

[alemoppo]

Ah chiaro, se devi prelevare informazioni da database sì, o meglio dipende quante informazioni sono.

Se le informazioni non sono troppe (qualche centinaio di KB?) puoi anche pensare di caricare tutto in una struttura dati JS e quindi leggerle al momento senza far richieste asincrone verso il server.
Altrimenti sì, dovresti utilizzare come hai fatto un array o meglio una struttura dati. Puoi utilizzare json_encode e passare il suo contenuto a JS, o meglio leggerlo con response.json(), ovviamente non devi stampare il dato ma leggerlo e utilizzare le info come vorresti.
Se hai difficoltà posta pure pezzi di codice e vedremo di aiutarti, io o altri utenti del forum.

Ciao!

[dreadnaut]

Buongiorno a tutti,
Suppongo che questo vada fatto con una chiamata asincrona e una pagina in PHP che crea il popup ma non ne sono certo.
Qualcuno può darmi consigli?

Come dice Alemoppo, le opzioni sono due: se la galleria e le informazioni non sono enormi, puoi inserirle direttamente nella pagina; altrimenti, puoi fare una richiesta via javascript (vedi fetch()) ed inserire il contenuto che arriva dal server nel punto giusto della pagina.

La prima soluzione ha meno parti in movimento, quindi è più facile e robusta. La cosa più semplice è infilare i dettagli in un tag <details>, a cui poi puoi dare la forma che vuoi via CSS.

[tuttainformatica]

Ciao,
La galleria la creo con questo codice:

<div class="gallery-grid">
   <?php foreach($datas as $data){ ?>
   <div onClick="openModal(<?php echo $data['id']; ?>)">
      <img class="gallery-image" src="<?php echo $data['file_link']; ?>" alt="<?php echo $data['description']; ?>">
   </div>
   <?php } ?>
</div>

Le informazioni sono contenute in questo array $datas perché oltre a visualizzare le foto in griglia le posso visualizzare anche in lista, ecc. quindi faccio una sola query e poi gestisco tutto usando lo stesso array che contiene in ordine: id, name, extension, file_link, id_author, date, category, description.

Come potete vedere l'intenzione sarebbe di creare una finestra modale che si apre cliccando sulla foto e alla funzione passo il parametro id della foto. L'idea era di usare questo id per poi recuperare i dati dall'array che, come ho anticipato, l'avevo stampato tutto e non era finita benissimo...

Grazie mille!