Visualizzazione risultati 1 fino 22 di 22

Discussione: Implementare photo gallery sito

  1. #1
    Guest

    Predefinito Implementare photo gallery sito

    Salve a tutti, dovrei integrare una photo gallery nel sito che sto realizzando.

    http://fishingtime.altervista.org/

    Il sito su cui sto lavorando è questo. Sto facendo alcuni tentativi ma non ottengo i risultati sperati. La fotogallery che ho scaricato è questa:

    http://www.html.it/movie/photo-tab-gallery/

    La vorrei proprio così con miniature in orizzontale. Mi potete aiutare a inserirla? Io proprio non ho capito come fare.

    Sto provando da giorni ma non ne trovo una già pronta simile e non capisco come inserirla nel codice.

    Anche una simile consigliata da voi, purchè sia così.

    Potete aiutarmi?


    Grazie mille

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

    Predefinito

    Io ti sconsiglierei di utilizzare Flash.

    Potresti utilizzare ad esempio prettyphoto, personalmente mi piace, ha le miniature orizzontali come richiedi, prova le demo nel sito. Inoltre è molto personalizzabile (vedi documentazione).

    Ciao!

  3. #3
    Guest

    Predefinito

    Anche io vorrei evitare di usare flash ma è l'unica che avevo provato. Potresti darmi una mano a integrarla? Non ho capito bene come fare. Grazie

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

    Predefinito

    I passi sono questi:
    • Includere il file CSS di prettyphoto (esempio:
      Codice HTML:
      <link rel="stylesheet" href="prettyPhoto.css" type="text/css" media="screen" />
      , ovviamente nel tuo spazio deve esserci il file css da includere)
    • fare la stessa cosa con jquery.js e prettyPhoto.js, quindi:
      Codice HTML:
      <script src="./jquery.js"></script>
      <script src="./prettyPhoto.js"></script>
      (i nomi dei file probabilmente saranno differenti, i miei sono soltanto di esempio)
    • Dove vuoi far apparire le immagini, inserire una cosa del tipo:
      Codice HTML:
      <a href="immagine1.jpg" rel="prettyPhoto[1]" title="eventuale descrizione1"><img src="immagine1.jpg" width="60" height="60" alt="eventuale titolo immagine1" /></a>
      
      <a href="immagine2.jpg" rel="prettyPhoto[1]" title="eventuale descrizione2"><img src="immagine2.jpg" width="60" height="60" alt="eventuale titolo immagine2" /></a>
      
      <a href="immagine3.jpg" rel="prettyPhoto[1]" title="eventuale descrizione3"><img src="immagine2.jpg" width="60" height="60" alt="eventuale titolo immagine3" /></a>...


    Ciao!

  5. #5
    Guest

    Predefinito

    Ciao, grazie mille per la risposta, purtroppo non funziona, o meglio, non viene il risultato sperato. Evidentemente sbaglio qualcosa.

    http://fishingtime.altervista.org/

    Ho fatto così:

    <head>
    <link rel="stylesheet" href="prettyphoto/css/prettyPhoto.css" type="text/css" media="screen" />
    <script src="prettyphoto/js/jquery-1.3.2.min.js"></script>
    <script src="prettyphoto/js/jquery/prettyPhoto.js"></script>
    </head>

    <body>
    <a href="gal01/1.jpg" rel="prettyPhoto[1]" title="eventuale descrizione1"><img src="gal01/1.jpg" width="60" height="60" alt="" /></a>

    <a href="gal01/2.jpeg" rel="prettyPhoto[1]" title="eventuale descrizione2"><img src="gal01/2.jpeg" width="60" height="60" alt="" /></a>

    <a href="gal01/3.jpeg" rel="prettyPhoto[1]" title="eventuale descrizione3"><img src="gal01/3.jpeg" width="60" height="60" alt="" /></a>
    </body>

    Ho dobuto solo cambiare i percorsi sennò dentro si creavano dei doppioni.

    Inoltre dentro la cartella js i file si chiamano così:

    jquery.prettyPhoto.js
    jquery-1.3.2.min.js
    jquery-1.4.4.min.js
    jquery-1.6.1.min.js
    Cosa c''è che non va?

    Cioè alla fine è come se non mi accettasse la jquery

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

    Predefinito

    Non esiste l'ultimo file prettyphoto.js:
    A questo indirizzo non c'è nulla: http://fishingtime.altervista.org/pr...prettyPhoto.js

    Ciao!

  7. #7
    Guest

    Predefinito

    Hai ragione, ho corretto ma ora si ripresenta il risultato che puoi vedere aprendo il sito e non carica nulla. Come mai?
    Ultima modifica di fishingtime : 20-05-2018 alle ore 21.13.53

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

  9. #9
    Guest

    Predefinito

    E' tutto nella cartella prettyphoto, ma i percorsi li ho messi

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

    Predefinito

    Se sono nella cartella "prettyphoto", devi metterla nell'URL: non c'è segno di "prettyphoto":
    http://fishingtime.altervista.org/css/prettyPhoto.css

    Ricontrolla.

    Ciao!

  11. #11
    Guest

    Predefinito

    <link rel="stylesheet" href="prettyphoto/css/prettyPhoto.css" type="text/css" media="screen" />
    <script src="prettyphoto/js/jquery-1.3.2.min.js"></script>
    <script src="prettyphoto/js/jquery.prettyPhoto.js"></script>
    No il percorso giusto l'ho messo, vedi?

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

    Predefinito

    Stiamo parlando di questa pagina? http://fishingtime.altervista.org/

    Guarda il sorgente di quella pagina, non sono come li hai scritti ora.

    Ciao!

  13. #13
    Guest

    Predefinito

    Hai ragione, stavo facendo un pò di confusione. Ora è aggiornato, fatto sta che non elabora l'effetto ma vedo solo le immagini che ho messo in mianiatura

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

    Predefinito

    Ora è corretto; prova ad inserire questo codice nella pagina (puoi metterlo dopo <body> o dove vuoi nel body):
    Codice HTML:
    <script type="text/javascript">
      $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
      });
    </script>
    (comunque è tutto scritto qui)

    Ciao!
    Ultima modifica di alemoppo : 20-05-2018 alle ore 23.12.59

  15. #15
    Guest

    Predefinito

    Così funziona, solo che c'è un problema, funge solo se clicco su una delle immagini. Come posso metterlo già appena apro il sito?

    Grazie ancora

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

    Predefinito

    Sempre nella solita pagina, a fondo pagina si vede un metodo .open():
    Codice:
    http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone//documentation/
    Vedi anche qui (o in internet in generale).

    Ciao!

  17. #17
    Guest

    Predefinito

    Scusami, sto leggendo ma non ho capito cosa mettere in .open

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

    Predefinito

    Vanno passate le varie immagini: se vuoi che la galleria si apra immediatamente all'accesso della pagina, le anteprime (quelle che hai messo in html <a href=...>) non hanno più senso perché non si visualizzerebbero. Quindi eliminale e sostituisci il js con:

    Codice HTML:
    <script type="text/javascript">
    $(document).ready(function(){
    $.fn.prettyPhoto();
    api_images = ['1.jpg','2.jpg','3.jpg'];        // <--- Qui i vari percorsi delle immagini
    api_titles = ['Title 1','Title 2','Title 3'];  // <--- qui i titoli
    api_descriptions = ['Description 1','Description 2','Description 3']; //<-- qui le descrizioni
    $.prettyPhoto.open(api_images,api_titles,api_descriptions); //avvii la presentazione
    });
    Ciao!

  19. #19
    Guest

    Predefinito

    Ciao, ho modificato i percorsi ma il risultato è quello che vedi. Come mai non funziona?

    EDIT:

    Mi sono accorto che avevi dimenticato di chiudere il tag, ora funziona; Però io vorrei che sia sopra al testo, non che mi si apra a schermo intero rendendomi inacessibile l'uso del sito.

    Non so se mi sono spiegato. Com faccio a fare questo?
    Ultima modifica di fishingtime : 21-05-2018 alle ore 21.45.18

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

    Predefinito

    Io lo visualizzo così:

    E quindi mi sembra funzionante.

    Ciao!

  21. #21
    Guest

    Predefinito

    Ciao, si scusa. Ho editato il messaggio. Ora funziona. Però non lo vorrei in questa maniera, lo vorrei sopra al testo, non che si apra in anteprima così

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

    Predefinito

    Ah, allora scusami ma ho capito male fin dall'inizio, dovresti cercarne una simile che si integri nel sito, ma non ne conosco una ma se ne dovrebbero trovarne tante online.

    Ciao!

Regole di scrittura

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