Ciao ragazzi, vorrei creare una gallery con transizioni a sfumare, ho cercato delle guide su google e ne ho trovata una che utilizza jquery.

http://www.twospy.com/galleriffic/#1

Premetto che non voglio farla OBBLIGATORIAMENTE così: se avete una guida da linkarmi o un codice da darmi per fare una galleria semplice, con effetti fade in js, va benissimo lo stesso!


In ogni caso per il momento ho cercato di riprodurla, in modo da modificarla io successivamente, una volta imparati un pò i meccanismi...ma non riesco a far funzionare nemmeno la demo!

Ditemi se sbaglio qualcosa, finora ho fatto questo:

1) Inserito queste righe nella mia pagina html e caricato entrambi i file nella posizione indicata:

codice:
<head>
    ...
    <script type="text/javascript" src="/media/jquery-1.3.min.js"></script>
    <script type="text/javascript" src="/media/jquery.galleriffic.min.js"></script>
    ...
</head>
2) Il primo file è quello di jquery, il secondo l'ho creato inserendo questo test in un txt e rinominandolo come sopra:

codice:
$(document).ready(function() {
    var gallery = $('#gallery').galleriffic('{thumbsContainerSel}', {
        delay:                  3000,
        numThumbs:              20,
        preloadAhead:           40, // Set to -1 to preload all images
        enableTopPager:         false,
        enableBottomPager:      true,
        imageContainerSel:      '',
        controlsContainerSel:   '',
        captionContainerSel:    '',
        loadingContainerSel:    '',
        renderSSControls:       true,
        renderNavControls:      true,
        playLinkText:           'Play',
        pauseLinkText:          'Pause',
        prevLinkText:           'Previous',
        nextLinkText:           'Next',
        nextPageLinkText:       'Next &rsaquo;',
        prevPageLinkText:       '&lsaquo; Prev',
        enableHistory:          false,
        autoStart:              false,
        onChange:               undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
        onTransitionOut:        undefined, // accepts a delegate like such: function(callback) { ... }
        onTransitionIn:         undefined, // accepts a delegate like such: function() { ... }
        onPageTransitionOut:    undefined, // accepts a delegate like such: function(callback) { ... }
        onPageTransitionIn:     undefined  // accepts a delegate like such: function() { ... }
    });
});
3) Sono andati a vedere i sorgenti della pagina linkata all'inizio (la guida con l'esempio) e ho inserito nella mia pagina la parte di html relativa alla galleria, che non ricopio per brevità, basta che voi stessi guardiate nei sorgenti di quella pagina ciò che è contenuto tra

codice:
...
...
...
Provo a visualizzare il tutto, ma il risultato è questo:

http://www.ivanisevic82.com/pages/prova.php

Cosa sbaglio?

Grazie!