inserire slideshow javascript in allrounder

[bardzero]

ciao a tutti,
volendo imparare ad inserire dei javascript in joomla ho deciso di provare ad aggiungere una piccola gallery in header (gallery=tinyfader; template=allrounder; link=http://www.bardzero.com)

sono a questo punto:
ho copiato il ".js" nella cartella /templates/allrounder-j1.6/js/
ho copiato il ".css" nella cartella /templates/allrounder-j1.6/css/ (ho ripulito anche il css)

in index.php ho aggiunto

Codice: [Seleziona]

<div id="header">
        <?php
        $document = &JFactory::getDocument();
        $document->addScript( '/templates/allrounder-j1.6/js/tinyfader.js' );
        ?>
--- </div>
in head_includes.php ho scritto

Codice: [Seleziona]

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/tinyfader.js"></script>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/tf-style.css" rel="stylesheet" type="text/css" media="all" />
ho inoltre caricato via ftp le cartelle con le immagini che servono alla gallery

ora però non so più cosa fare ....
nello zip originale dello script c'era un file html con

Codice: [Seleziona]

<div id="wrapper">
    <div>
        <div class="sliderbutton"><img src="images/left.gif" width="32" height="38" alt="Previous" onclick="slideshow.move(-1)" /></div>
        <div id="slideshow">
            <ul id="slides">
                <li id="content">
                    <h1>TinyFader - Simple JavaScript Slideshow</h1>
                    <p>This super lightweight (1.3 KB) fading JavaScript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume and an active class on a navigation list if applicable.</p>
                    <p><em>For complete details visit <a href="http://www.leigeber.com/">leigeber.com</a>.</em></p>
                </li>
                <li><img src="photos/sea-turtle.jpg" width="500" height="300" alt="Sea turtle" /></li>
                <li><img src="photos/coral-reef.jpg" width="500" height="300" alt="Coral Reef" /></li>
                <li><img src="photos/blue-fish.jpg" width="500" height="300" alt="Blue Fish" /></li>
            </ul>
        </div>
        <div class="sliderbutton"><img src="images/right.gif" width="32" height="38" alt="Next" onclick="slideshow.move(1)" /></div>
    </div>
    <ul id="pagination" class="pagination">
        <li onclick="slideshow.pos(0)">1</li>
        <li onclick="slideshow.pos(1)">2</li>
        <li onclick="slideshow.pos(2)">3</li>
        <li onclick="slideshow.pos(3)">4</li>
    </ul>
</div>
<script type="text/javascript">
var slideshow=new TINY.fader.fade('slideshow',{
    id:'slides',
    auto:3,
    resume:true,
    navid:'pagination',
    activeclass:'current',
    visible:true,
    position:0
});
</script>

dove inserisco queste parti?