dokładnie jak to ma wyglądać.
zbadac kod i zmodyfikować go pod kątem css (design) i dołożyłem dodatkową funkcję ("podświetlanie" miniatur na mouseover). po inspekcji kodu doszedłem do wniosku, że dalej już nie dam rady sam. podaję jak wygląda kod w powiązanych plikach
<div id="wrapper">
<div id="content">
<div id="gallery">
<div id="gallery-background">
<a href=" CO TUTAJ NALEŻY WPISAC? ">
<img src="<?php bloginfo('template_url'); ?>/images/img/1.jpg" alt="" width="600" height="340" align="left" class="output" />
</a></div>
<div id="gallery-bgthumb">
<ul class="thumbnails">
<li class="imgHoover"><a href="1.html"><img src="images/img/1.jpg" title="" alt="" width="150" height="112" /></a></li>
<li class="imgHoover"><img src="images/img/3.png" title="" alt="" width="150" height="112" /></li>
<li class="imgHoover"><img src="images/img/2.png" title="" alt="" width="150" height="112" /></li>
<li class="imgHoover"><img src="images/img/4.jpg" title="" alt="" width="150" height="112" /></li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#gallery').gallerax({
outputSelector: '.output', // Output selector
thumbnailsSelector: '.thumbnails li img', // Thumbnails selector
fade: 'fast', // Transition speed (fast)
navNextSelector: '.nav li a.navNext', // 'Next' selector
navPreviousSelector: '.nav li a.navPrevious' // 'Previous' selector
});
</script>
<!-- end -->
</div>
jeśli potrzebne będzie jeszcze coś to piszcie. wtedy umieszczę.