Oke i am trying to make this task more easy for myself. I started with simpler version of this. You can see it working at:

http://appleton.me/galleryview/

So far i do belive i did most of it correct.

In define_mane_page.php i added the following code in head

PHP Code:
<link rel="stylesheet" href="includes/templates/wxt/css/galleryview.css" type="text/css" />

<script src="includes/templates/wxt/jscript/jquery-1.3.2.min.js"></script>
<script src="includes/templates/wxt/jscript/jquery.easing.1.3.js"></script>
<script src="includes/templates/wxt/jscript/jquery.galleryview-2.1.1-pack.js"></script>
<script src="includes/templates/wxt/jscript/jquery.timers-1.2.js" type="text/javascript"></script>

<script type="text/javascript">

        $(document).ready(function(){
            $('#gallery').galleryView({
            panel_width: 800,
            panel_height: 300,
            frame_width: 50,
            frame_height: 50,
            transition_speed: 350,
            easing: 'easeInOutQuad',
            transition_interval: 0
            });
            }); 
</script> 
Now i can see my gallery react to changes in called css file and i hope i did everythink correct with java scripts.

In body i added folowing code
PHP Code:
<div id="gallery" class="gallery" style="visibility: visible; padding: 0px; position: relative; width: 810px; height: 367px;">
<div class="panel" style="width: 800px; height: 300px; position: absolute; overflow: hidden; top: 5px; left: 5px; display: none;"><img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/01.jpg" style="height: 300px; width: 800px; position: relative; top: 0px; left: 0px;"><span class="panel-overlay" style="position: absolute; z-index: 999; width: 778px; left: 0pt; bottom: 0px;">This is an overlay</span>
        <div class="overlay-background" style="position: absolute; z-index: 998; width: 800px; left: 0pt; opacity: 0.7; bottom: 0px;"></div></div>
<div class="panel" style="width: 800px; height: 300px; position: absolute; overflow: hidden; top: 5px; left: 5px; display: none;"><img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/02.jpg" style="height: 300px; width: 800px; position: relative; top: 0px; left: 0px;"><span class="panel-overlay" style="position: absolute; z-index: 999; width: 778px; left: 0pt; bottom: 0px;">This is another overlay</span>
        <div class="overlay-background" style="position: absolute; z-index: 998; width: 800px; left: 0pt; opacity: 0.7; bottom: 0px;"></div></div>
<div class="panel" style="width: 800px; height: 300px; position: absolute; overflow: hidden; top: 5px; left: 5px; display: none;"><img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/03.jpg" style="height: 300px; width: 800px; position: relative; top: 0px; left: 0px;"><span class="panel-overlay" style="position: absolute; z-index: 999; width: 778px; left: 0pt; bottom: 0px;">This is yet another overlay</span>
        <div class="overlay-background" style="position: absolute; z-index: 998; width: 800px; left: 0pt; opacity: 0.7; bottom: 0px;"></div></div>
<div class="panel" style="width: 800px; height: 300px; position: absolute; overflow: hidden; top: 5px; left: 5px;"><img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/04.jpg" style="height: 300px; width: 800px; position: relative; top: 0px; left: 0px;"><span class="panel-overlay" style="position: absolute; z-index: 999; width: 778px; left: 0pt; bottom: 0px;">This is an overlay too</span>
        <div class="overlay-background" style="position: absolute; z-index: 998; width: 800px; left: 0pt; opacity: 0.7; bottom: 0px;"></div></div>
<div class="strip_wrapper" style="position: absolute; overflow: hidden; top: 305px; left: 293.5px; width: 223px; height: 57px;"><ul style="visibility: visible; margin: 0pt; list-style: none outside none; padding: 0pt; width: 228px; position: absolute; z-index: 900; top: 0px; left: 0px; height: 57px;" class="filmstrip">
    <li class="frame" style="float: left; position: relative; height: 52px; width: 52px; z-index: 901; padding: 0pt; cursor: pointer; margin-top: 5px; margin-right: 5px;"><div class="img_wrap" style="height: 50px; width: 50px; position: relative; top: 0px; left: 0px; overflow: hidden;"><img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/01.jpg" style="opacity: 0.3; height: 50px; width: 133.333px; position: relative; top: 0px; left: -41.6667px;"></div></li>
    <li class="frame" style="float: left; position: relative; height: 52px; width: 52px; z-index: 901; padding: 0pt; cursor: pointer; margin-top: 5px; margin-right: 5px;"><div class="img_wrap" style="height: 50px; width: 50px; position: relative; top: 0px; left: 0px; overflow: hidden;"><img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/02.jpg" style="opacity: 0.3; height: 50px; width: 133.333px; position: relative; top: 0px; left: -41.6667px;"></div></li>
    <li class="frame" style="float: left; position: relative; height: 52px; width: 52px; z-index: 901; padding: 0pt; cursor: pointer; margin-top: 5px; margin-right: 5px;"><div class="img_wrap" style="height: 50px; width: 50px; position: relative; top: 0px; left: 0px; overflow: hidden;"><img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/03.jpg" style="opacity: 0.3; height: 50px; width: 133.333px; position: relative; top: 0px; left: -41.6667px;"></div></li>
    <li class="frame current" style="float: left; position: relative; height: 52px; width: 52px; z-index: 901; padding: 0pt; cursor: pointer; margin-top: 5px; margin-right: 5px;"><div class="img_wrap" style="height: 50px; width: 50px; position: relative; top: 0px; left: 0px; overflow: hidden;"><img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/04.jpg" style="opacity: 1; height: 50px; width: 133.333px; position: relative; top: 0px; left: -41.6667px;"></div></li>
</ul></div><div class="loader" style="position: absolute; z-index: 32666; opacity: 1; top: 0px; left: 0px; width: 810px; height: 367px; display: none;"></div><div class="pointer" style="position: absolute; z-index: 1000; width: 0px; font-size: 0px; line-height: 0%; border-width: 8px; border-style: solid; top: 294px; left: 483px; border-top: 8px solid transparent; border-right: 8px solid transparent; border-left: 8px solid transparent;"></div><img class="nav-next" src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/jscript/themes/dark/next.gif" style="position: absolute; cursor: pointer; top: 325px; right: 266.5px;"><img class="nav-prev" src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/jscript/themes/dark/prev.gif" style="position: absolute; cursor: pointer; top: 325px; left: 266.5px;"></div> 
Everythink seems correct to me so far. I got this all from example while using firebugs.

At my site u can see what i got so far. It still not good.

BTW if u look at my site with smaller monitor it might look weird i will correct it later but first trying to get this gallery thing working.

Kelvyn

i think u right with javascript being not in head of loaded page, it in head of myn define_mane_page.php

How do i get it in right place? and i want gallery only on main page so i thought it was oke.

My english is pretty bad in writing but when i read i can understand almost everythink so i can work with english instruction with out problem