PDA

View Full Version : Presentazione immagini

+Benito+
29-04-2012, 21:44
Per un sito che sto facendo vorrei richiamare tramite un link un qualcosa che mi faccia vedere le immagini, ma non tipo slideshow automatico fighissimo, vorrei uno di quei visualizzatori che sembrano popup, appaiono cioè in semitrasparenza sopra la pagina aperta dove si vedere solo la foto, e avvicinando il puntatore ai suoi bordi appaiono le freccette per andare alla foto precedente o successiva.

Mi sono guardato un po' in giro e trovo un sacco di programmi più o meno complessi per fare slideshow tutti arzigogolati anche con la musica, ma niente che faccia una cosa semplice come tra l'altro se ne vedono su tantissimi siti.
wingman87
29-04-2012, 22:55
Voilà: http://www.jacklmoore.com/colorbox
+Benito+
01-05-2012, 09:25
ok grazie.
Riesci a darmi qualche info in più su come si usa quello strumento? Nella cartella di installazione è presente un file readme in un formato (.md) che non apro con nulla.
wingman87
01-05-2012, 21:33
Dunque, in effetti il pacchetto zip non mi sembra organizzato molto bene... quello che ti serve del pacchetto è:
jquery.colorbox-min.js
colorbox.css
la cartella images

colorbox.css e la cartella images la puoi prendere da una qualunque delle cartelle "example#", invece il file .js è nella cartella colorbox.

Questo è ciò che compone colorbox, poi ti serve jquery che puoi scaricare da qui: http://code.jquery.com/jquery.min.js

Ed ecco un piccolo esempio (riciclato dalla breve guida del sito di colorbox):
<html>
<head>
<link rel="stylesheet" href="styles\colorbox.css" />
<script src="js\jquery-1.7.2.min.js"></script>
<script src="js\jquery.colorbox-min.js"></script>
<script>
$(document).ready(function () {
$('a.gallery').colorbox();
});
</script>
</head>
<body>
<a class='gallery' href='images\img1.jpg'>Photo_1</a>
<a class='gallery' href='images\img2.jpg'>Photo_2</a>
<a class='gallery' href='images\img3.jpg'>Photo_3</a>
</body>
</html>
Nella cartella di questo html ho creato 3 cartelle: js, styles e images.
in js ho messo i file js, in styles ho messo colorbox.css e la cartella con le sue immagini, in images ho messo 3 immagini che ho chiamato img1.jpg, img2.jpg e img3.jpg.
Non so se sei pratico di jquery, se non lo sei avrai bisogno di altre spiegazioni, comunque questo è lo script che associa il popup al click sui link:

$(document).ready(function () {
$('a.gallery').colorbox();
});
+Benito+
01-05-2012, 22:36
non ho capito una cosa fondamentalissima: jquery e questo codice che mi hai scritto vanno installati da qualche parte sul server o vanno copiati nella pagina dove voglio far funzionare il visualizzatore? Il sito che ho fatto l'ho elaborato partendo da un template che usa i css.

Scusa le domande banali ma di programmazione non so quasi nulla ma non posso permettermi al momento di dare 2000 euro a qualcuno per farmi il sito.
wingman87
01-05-2012, 23:06
I file vanno messi sul server (come probabilmente avrai già fatto per altri file js e css) e nella pagina che li usa devi includerli. Per intenderci, nel codice che ho scritto prima, le righe per includere i file sono:

<link rel="stylesheet" href="styles\colorbox.css" />
<script src="js\jquery-1.7.2.min.js"></script>
<script src="js\jquery.colorbox-min.js"></script>

Quelli in rosso sono i percorsi in cui si trovano i file da includere.
+Benito+
02-05-2012, 15:49
ottimo, ti ringrazio moltissimo, ci provo