Getting simple Javascript / jQuery to work (ScrollTo by Ariel Flesler)
<p><strong>UPDATE: Outstanding mr. tpaksu solved my problems and you can see the horizontal ScrollTo in action @</strong> <a href="http://www.visioville.fi/en/" rel="nofollow">www.visioville.fi/en/</a></p>

<p>I had my time fiddling around with CSS, but i came to conclusion that this is pretty much the only thing i cannot get done without Javascript / jQuery.</p>

<p>I've been trying to implement Goro's suggested <a href="http://demos.flesler.com/jquery/scrollTo/" rel="nofollow">jQuery.ScrollTo by Ariel Flesler</a>, but i can't seem to get it working in any way. Add to the fact that i'm a total newbie with Javascript and you'll get my point. I downloaded the newest jQuery and named it as 'jquery.js'</p>

<p>Here's some source:</p>

<pre><code>&lt;head&gt;
&lt;script type='text/javascript' src='../js/jquery.scrollTo-1.4.2-min.js'&gt;&lt;/script&gt;
&lt;script type='text/javascript' src='../js/jquery.js'&gt;&lt;/script&gt;
&lt;/head&gt;
...
&lt;div&gt;
    &lt;p id="gallerytext"&gt;...&lt;/p&gt;
    &lt;a title="$(div.smallpics).scrollTo( '0%', 800, {axis:'x'} );" id="previmg" href="#image1"&gt;&lt;/a&gt;
        &lt;div id="smallwindow"&gt;
            &lt;div class="smallpics"&gt;
                &lt;ul&gt;
                &lt;li&gt;&lt;a href="#image1"&gt;&lt;img alt="Jerseys" src="../images/peliasuja.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
                ...
                &lt;li&gt;&lt;a href="#image14"&gt;&lt;img alt="Drawing" src="../images/kynailya.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
           &lt;/div&gt;
        &lt;/div&gt;
    &lt;a title="$(div.smallpics).scrollTo( '50%', 800, {axis:'x'} );" id="nextimg" href="#image8"&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>And then CSS:</p>

<pre><code>#smallwindow    { float:left; overflow/*-y*/: hidden; width:890px; } /* overflow-y whips out the vertical scrollbar */

div.smallpics   { float:left; position:relative;  width:1595px; }

#previmg, #nextimg { float: left; width: 17px; height: 54px; background: white; overflow: hidden; background: url("images/galleryarrows_17x54.jpg"); }
#previmg        { background-position: left top; margin-right: 1px; left top; }
#nextimg        { background-position: right top; position: absolute; float: right; left: 935px; margin-left: 1px; margin-right: 1px; }
#previmg:hover  { background-position: left bottom; }
#nextimg:hover  { background-position: right bottom; }

.smallpics ul   { list-style: none; padding: 0; margin: 0; }

.smallpics li   { float: left; text-align: center;  margin-right: 1px; margin-bottom: 1px; white-space: nowrap; }
</code></pre>

<p>Goro mentioned binding click() event to my arrow buttons, but i don't know what "function" i should type or where to put the code. I'm guessing in front of the .scrollTo event, assuming click() is even needed.</p>

<p>Thank you in advance! You guys are absolutely the best when it comes to programming and coding.</p>
