Visualizzazione risultati 1 fino 6 di 6

Discussione: Vedere dettagli foto senza ricaricare la pagina

  1. #1
    tuttainformatica non è connesso Utente giovane
    Data registrazione
    05-03-2020
    Messaggi
    55

    Predefinito Vedere dettagli foto senza ricaricare la pagina

    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

  2. #2
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,061

    Predefinito

    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!

  3. #3
    tuttainformatica non è connesso Utente giovane
    Data registrazione
    05-03-2020
    Messaggi
    55

    Predefinito

    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

  4. #4
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,061

    Predefinito

    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!

  5. #5
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,252

    Predefinito

    Citazione Originalmente inviato da tuttainformatica Visualizza messaggio
    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.
    Ultima modifica di dreadnaut : 23-05-2023 alle ore 23.33.23

  6. #6
    tuttainformatica non è connesso Utente giovane
    Data registrazione
    05-03-2020
    Messaggi
    55

    Predefinito

    Ciao,
    La galleria la creo con questo codice:
    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!
    Ultima modifica di tuttainformatica : 24-05-2023 alle ore 10.42.28

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •