Implementare photo gallery sito

Printable View

20-05-2018, 11.34.11

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
20-05-2018, 15.01.29
alemoppo

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!
20-05-2018, 15.47.32

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
20-05-2018, 18.32.50
alemoppo
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!
20-05-2018, 20.16.56

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ì:

Citazione:

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
20-05-2018, 20.34.19
alemoppo

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

Ciao!
20-05-2018, 21.08.18

Hai ragione, ho corretto ma ora si ripresenta il risultato che puoi vedere aprendo il sito e non carica nulla. Come mai?
20-05-2018, 21.28.10
alemoppo

Tutti i file non sono raggiungibili correttamente:
http://fishingtime.altervista.org/css/prettyPhoto.css
http://fishingtime.altervista.org/js...prettyPhoto.js
Così come le immagini:
http://fishingtime.altervista.org/im...llscreen/2.jpg

Controlla i nomi dei file/cartelle.

Ciao!
20-05-2018, 22.06.29

E' tutto nella cartella prettyphoto, ma i percorsi li ho messi
20-05-2018, 22.07.13
alemoppo

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

Ricontrolla.

Ciao!
20-05-2018, 22.27.03

Citazione:

<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?
20-05-2018, 22.35.26
alemoppo

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

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

Ciao!
20-05-2018, 22.48.25

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
20-05-2018, 23.10.48
alemoppo

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!
20-05-2018, 23.32.52

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
20-05-2018, 23.37.27
alemoppo

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!
21-05-2018, 00.11.01

Scusami, sto leggendo ma non ho capito cosa mettere in .open
21-05-2018, 01.40.47
alemoppo

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!
21-05-2018, 21.29.01

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. :lol:

Non so se mi sono spiegato. Com faccio a fare questo?
21-05-2018, 21.45.11
alemoppo

Io lo visualizzo così:
https://i.imgur.com/zTAJz6Pm.png
E quindi mi sembra funzionante.

Ciao!
21-05-2018, 21.48.47

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ì
21-05-2018, 22.13.05
alemoppo

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!