[Aiuto] Js - Slideshow

[M3kH]

Salve ragazzi, vorrei creare uno slideshow, da inserire nella mia homepage e vorrei che fosse come quello del sito Oh! Media.ca (una pagina di web master candesi)

Ora io ho visto i loro script e li adattati al mio progetto.
Ho di conseguenza questa struttura di file

Mio sito
|-- |css|
       L- "style.css"
|-- |js|
       L- "homepage.js"
|-- |stage|
          L- "x.html"
|-- |immagini|
    L |navigator|
       L- "xx.png"
       L- "xx_B.png"
       L- "xx_A.png"
|--index.html

E contengono

[i]index.html[/i]
...

<script type="text/javascript" src="js/homepage.js"></script> 
<div id="ultimi_lavori">
     <div id="preview">
         <div id="pw_left">[img]images/barn_16.png[/img]</div>
             <div id="pw_center">
             <div id="screen"> [img]images/navigator/01_B.png[/img] </div>
 <div id="testo"> Questo è assolutissimamente un testo di prova! </div>
             </div>
         <div id="pw_right">[img]images/barn_20.png[/img]</div>
     </div>
     <div id="lavori_menu">
         <div id="lm_left">[img]images/img_18.png[/img]</div>
             <div id="lm_center">
                 <a title="1" id="menuitem1" class="menuitem" onclick="GTPItem(1);"></a>
                 <a title="2" id="menuitem2" class="menuitem" onclick="GTPItem(2);"></a>
                 <a title="3" id="menuitem3" class="menuitem" onclick="GTPItem(3);"></a>
                 <a title="4" id="menuitem4" class="menuitem" onclick="GTPItem(4);"></a>
                 <a title="5" id="menuitem5" class="menuitem" onclick="GTPItem(5);"></a>
             </div>
         <div id="lm_right">[img]images/img_21.png[/img]</div>
     </div>
     </div>
... 

Questo è il Javascript adattato

[i]homepage.jsl[/i]
$(document).ready(function(){

    //preload portfolio images
    image1 = new Image();
    image2 = new Image();
    image3 = new Image();
    image4 = new Image();
    image5 = new Image();
    image6 = new Image();
    image7 = new Image();
    image8 = new Image();
    image9 = new Image();
    image10 = new Image();
    image11 = new Image();
    image12 = new Image();
    image13 = new Image();
    image14 = new Image();
    image15 = new Image();
    image16 = new Image();
    
    image1.src = '/images/navigator/01_B.png';
    image2.src = '/images/navigator/02_B.png';
    image3.src = '/images/navigator/03_B.png';
    image4.src = '/images/navigator/04_B.png';
    image5.src = '/images/navigator/05_B.png';
    image6.src = '/images/navigator/01_O.png';
    image7.src = '/images/navigator/02_O.png';
    image8.src = '/images/navigator/03_O.png';
    image9.src = '/images/navigator/04_O.png';
    image10.src = '/images/navigator/05_O.png';
    image11.src = '/images/img_09.png';
    image12.src = '/images/img_10.png';
    image13.src = '/images/img_11.png';
    image14.src = '/images/img_12.png';
    image15.src = '/images/img_09.png';
    image16.src = '/images/navigator/nav.png';    
});

function GTPItem(id) {
    
    //what's the left margin?
    if(id == 1) {
        leftmar = '0px';
    }
    if(id == 2) {
        leftmar = '107px';
    }
    if(id == 3) {
        leftmar = '215px';
    }
    if(id == 4) {
        leftmar = '322px';
    }
    if(id == 5) {
        leftmar = '430px';
    }
    
    //reset all to blank
    resetAll();
    
    //fade stage
    fadeStage();
    
    $('#portfolio_hover').animate({"marginLeft": leftmar}, "normal", function() {
        $('#menuitem'+id).css('background-image', 'url(/images/navigator/0'+id+'_O.png)');
        
        //load stage
        loadStage(id);
        
    });
    
}

function resetAll() {
    
    $('#menuitem1').css('background-image', 'url(/images/navigator/01.png)');
    $('#menuitem1').hover(function() {
        $('#menuitem1').css('background-image', 'url(/images/navigator/01_O.png)');
    }, function() {
        $('#menuitem1').css('background-image', 'url(/images/navigator/01.png)');
    });
    $('#menuitem2').css('background-image', 'url(/images/navigator/02.png)');
    $('#menuitem2').hover(function() {
        $('#menuitem2').css('background-image', 'url(/images/navigator/02_O.png)');
    }, function() {
        $('#menuitem2').css('background-image', 'url(/images/navigator/02.png)');
    });
    $('#menuitem3').css('background-image', 'url(/images/navigator/03.png)');
    $('#menuitem3').hover(function() {
        $('#menuitem3').css('background-image', 'url(/images/navigator/03_O.png)');
    }, function() {
        $('#menuitem3').css('background-image', 'url(/images/navigator/03.png)');
    });
    $('#menuitem4').css('background-image', 'url(/images/navigator/04.png)');
    $('#menuitem4').hover(function() {
        $('#menuitem4').css('background-image', 'url(/images/navigator/04_O.png)');
    }, function() {
        $('#menuitem4').css('background-image', 'url(/images/navigator/04.png)');
    });
    $('#menuitem5').css('background-image', 'url(/images/navigator/05.png)');
    $('#menuitem5').hover(function() {
        $('#menuitem5').css('background-image', 'url(/images/navigator/05_O.png)');
    }, function() {
        $('#menuitem5').css('background-image', 'url(/images/navigator/05.png)');
    });
    
}

function fadeStage() {
    $('#pw_center').fadeOut('fast');
}

function loadStage(id) {
    //grab data
    $("#pw_center").load('/stages/'+id+'.html', function() {
        $("#pw_center").fadeIn('fast');
    });
    
    $('#menuitem'+id).hover(function() {
        $('#menuitem'+id).css('background-image', 'url(/images/navigator/0'+id+'_O.png)');
    }, function() {
        $('#menuitem'+id).css('background-image', 'url(/images/navigator/0'+id+'_O.png)');
    });
    
} 

Qui ci sono quelli originali

[i]index.html di Oh! Media[/i]
<script type="text/javascript" src="/js/homepage.js"></script>

        <div id="portfolio">
            
            [img]images/fwtop.jpg[/img]
            [img]images/fwright.jpg[/img]
            
            <div id="stage">
                
                [img]images/veritebrowser.jpg[/img]

                
                <div id="portfolio_info">
                    
                    [img]images/veritetitle.png[/img]
                
                    <div id="portfolio_address">VERITEFILMS.CA</div>
                    
                    <p id="portfolio_description">The Verite Films website is a unique, flash-based solution that allows staff members to update textual elements within the 
site through a customized version of our OH!CMS content management software.</p>
    
                    [url="/portfolio/8"][/url]
                    
                </div>
            
            </div>
                        
        </div>

        
        [img]images/portfolio_hover.png[/img]
        
        <div id="portfolio_menu">
            [img]images/pmenu_featured.jpg[/img]
            
            <a title="Corner Gas - Verite Films" id="menuitem1" class="menuitem" onclick="GTPItem(1);"></a>
            <a title="University of Regina - External Relations" id="menuitem2" class="menuitem" onclick="GTPItem(2);"></a>
            <a title="Saskatchewan New Democrat Party" id="menuitem3" class="menuitem" onclick="GTPItem(3);"></a>
            <a title="ALCAT" id="menuitem4" class="menuitem" onclick="GTPItem(4);"></a>
            <a title="The Back of the Napkin" id="menuitem5" class="menuitem" onclick="GTPItem(5);"></a>
            
        </div> 

Ed il Javascript che lo trovate qui

Il problema? Il mio script non funziona. Anche se le uniche modifiche sono state fatte soltanto su i nomi dei file ed alcune cose della posizione.

Se mi aiutereste ricompeserei la comunità con un tutorial sul come costruirlo.

Grazie anticipatamente.

[M3kH]

In caso non riceva nessun aiuto, accetterei anche consigli per altri componenti simili.
Grazie