Presentazione immagini

+Benito+ · 29-04-2012, 20: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, 21:55

Voilà: http://www.jacklmoore.com/colorbox

+Benito+ · 01-05-2012, 08: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, 20: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):

Codice HTML:

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

Codice:

            $(document).ready(function () {
                $('a.gallery').colorbox();
            });

+Benito+ · 01-05-2012, 21: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, 22: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:

Codice:

        <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, 14:49

ottimo, ti ringrazio moltissimo, ci provo

29-04-2012, 20:44	#1
+Benito+ Senior Member Iscritto dal: Feb 2002 Messaggi: 7099	Presentazione immagini 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.

01-05-2012, 20:33	#4
wingman87 Senior Member Iscritto dal: Nov 2005 Messaggi: 2789	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): Codice HTML: <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: Codice: $(document).ready(function () { $('a.gallery').colorbox(); });

01-05-2012, 22:06	#6
wingman87 Senior Member Iscritto dal: Nov 2005 Messaggi: 2789	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: Codice: <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.

29-04-2012, 21:55	#2
wingman87 Senior Member Iscritto dal: Nov 2005 Messaggi: 2789	Voilà: http://www.jacklmoore.com/colorbox

01-05-2012, 08:25	#3
+Benito+ Senior Member Iscritto dal: Feb 2002 Messaggi: 7099	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.

01-05-2012, 21:36	#5
+Benito+ Senior Member Iscritto dal: Feb 2002 Messaggi: 7099	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.

02-05-2012, 14:49	#7
+Benito+ Senior Member Iscritto dal: Feb 2002 Messaggi: 7099	ottimo, ti ringrazio moltissimo, ci provo

Strumenti
Mostra una versione stampabile Invia questa pagina per email