It should be as simple as it describes on the website, but it seems like it is missing a lot of information.

I have set my containers up like so:

1. <div id="gallery" class="content">
   <div id="controls" class="controls"></div>       <div id="loading" class="loader"></div>       <div id="slideshow" class="slideshow"></div>

         <div id="thumbs">
2.             <ul class="thumbs noscript">
3.                   <li>
4.                         <a class="thumb" name="optionalCustomIdentifier"                               href="path/to/my/image">
5.                               <img src="path/to/my/thumbnail" />
6.                         </a>
7.                   </li>
8.             </ul>
9.       </div>
10. </div>
11.             

And then i obv include the jquery file downloaded, as well as the galleriffic.js file downloaded and im using the galleriffic-1.css file to style it.

then just before i close </body> i initialize the gallery with the following:

2. jQuery(document).ready(function($){
3.                     $('div.navigation').css({'width' : '300px','float' : 'left'});
4.                     $('div.content').css('display','block');
5.                     
6.                     var onMouseOutOpacity = 0.67;
7.                     $('#thumbs ul.thumbs li').opacityrollover({
8.                         mouseOutOpacity : onMouseOutOpacity,
9.                         mouseOverOpacity : 1.0,
10.                         fadeSpeed : 'fast',
11.                         exemptionSelector : '.selected'
12.                     });
13.                 })
14.         
15.         
16.                 jQuery(document).ready(function($) {
17.                     var gallery = $('#gallery').galleriffic('#thumbs',{
18.                         delay:                     3000, // in milliseconds
19.                         numThumbs:                 10, // The number of thumbnails to show page
20.                         preloadAhead:              -1, // Set to -1 to preload all images
21.                         enableTopPager:            false,
22.                         enableBottomPager:         true,
23.                         maxPagesToShow:            7,  // The maximum number of pages to display in either the top or bottom pager
24.                         imageContainerSel:         '#slideshow', // The CSS selector for the element within which the main slideshow image should be rendered
25.                         controlsContainerSel:      '#controls', // The CSS selector for the element within which the slideshow controls should be rendered
26.                         captionContainerSel:       '#caption', // The CSS selector for the element within which the captions should be rendered
27.                         loadingContainerSel:       '#loading', // The CSS selector for the element within which should be shown when an image is loading
28.                         renderSSControls:          true, // Specifies whether the slideshow's Play and Pause links should be rendered
29.                         renderNavControls:         true, // Specifies whether the slideshow's Next and Previous links should be rendered
30.                         playLinkText:              'Play',
31.                         pauseLinkText:             'Pause',
32.                         prevLinkText:              'Previous',
33.                         nextLinkText:              'Next',
34.                         nextPageLinkText:          'Next &rsaquo;',
35.                         prevPageLinkText:          '&lsaquo; Prev',
36.                         enableHistory:             false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
37.                         enableKeyboardNavigation:  true, // Specifies whether keyboard navigation is enabled
38.                         autoStart:                 false, // Specifies whether the slideshow should be playing or paused when the page first loads
39.                         syncTransitions:           false, // Specifies whether the out and in transitions occur simultaneously or distinctly
40.                         defaultTransitionDuration: 1000, // If using the default transitions, specifies the duration of the transitions
41.                     });
42.                 });

So far all i get are my thumbnails and the loading image. no correct links are generated and the main image is not put into the slideshow div. i've look all over the net for solutions but no one seems to have my problem, so im sure its me missing something. however, i must say the instructions on the galleriffic page are obv not good enough, he tells you to set the containers up but misses out the crucial class names and just gives the id for them.

can anyone help me get this working as id love to get it up and running, it's such a nice functioning gallery.

atm, u can see it's status at http://www.mymediaventure.com/galleries.php?gallery=charity. i have deactivated my css incase that was interfering. but of course it's just the javascript.