Visualizzazione risultati 1 fino 22 di 22

Discussione: Implementare photo gallery sito

  1. #1
    fishingtime non  connesso Neofita
    Data registrazione
    24-04-2018
    Messaggi
    14

    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
    10,554

    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
    fishingtime non  connesso Neofita
    Data registrazione
    24-04-2018
    Messaggi
    14

    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
    10,554

    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
    fishingtime non  connesso Neofita
    Data registrazione
    24-04-2018
    Messaggi
    14

    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
    10,554

    Predefinito

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

    Ciao!

  7. #7
    fishingtime non  connesso Neofita
    Data registrazione
    24-04-2018
    Messaggi
    14

    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
    10,554

  9. #9
    fishingtime non  connesso Neofita
    Data registrazione
    24-04-2018
    Messaggi
    14

    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
    10,554

    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
    fishingtime non  connesso Neofita
    Data registrazione
    24-04-2018
    Messaggi
    14

    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
    10,554

    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
    fishingtime non  connesso Neofita
    Data registrazione
    24-04-2018
    Messaggi
    14

    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
    10,554

    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
    fishingtime non  connesso Neofita
    Data registrazione
    24-04-2018
    Messaggi
    14

    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
    10,554

    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
    fishingtime non  connesso Neofita
    Data registrazione
    24-04-2018
    Messaggi
    14

    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
    10,554

    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
    fishingtime non  connesso Neofita
    Data registrazione
    24-04-2018
    Messaggi
    14

    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
    10,554

    Predefinito

    Io lo visualizzo cos:

    E quindi mi sembra funzionante.

    Ciao!

  21. #21
    fishingtime non  connesso Neofita
    Data registrazione
    24-04-2018
    Messaggi
    14

    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
    10,554

    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
  •