!-- Start Advanced Gallery Html Containers -->
                <div id="gallery" class="content">
                    <div id="controls" class="controls"></div>
                    <div class="slideshow-container">
                        <div id="loading" class="loader"></div>
                        <div id="slideshow" class="slideshow"></div>
                    </div>
                    <div id="caption" class="caption-container"></div>
                </div>

                <div id="thumbs" class="navigation">

                    <ul class="thumbs noscript">
                        <li>
                            <a class="thumb" name="leaf" href="images/slideshow/home/imageTEST.jpg" title="Title #0">
                                <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #0" />
                            </a>
                            <div class="caption">
                                <div class="image-title"></div>
                                <div class="image-desc"></div>
                            </div>
                        </li>

                        <li>
                            <a class="thumb" name="drop" href="images/slideshow/home/image2.jpg" title="Title #1">
                                <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #1" />
                            </a>
                            <div class="caption">

                            </div>
                        </li>

                        <li>
                            <a class="thumb" name="bigleaf" href="images/slideshow/home/image3.jpg" title="Title #2">
                                <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #2" />
                            </a>
                            <div class="caption">
                                <div class="image-title"></div>
                                <div class="image-desc"></div>
                            </div>
                        </li>

                        <li>
                            <a class="thumb" name="lizard" href="images/slideshow/home/image4.jpg" title="Title #3">
                                <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #3" />
                            </a>
                            <div class="caption">
                                <div class="image-title"></div>
                                <div class="image-desc"></div>
                            </div>
                        </li>

                        <li>
                            <a class="thumb" href="images/slideshow/home/image5.jpg" title="Title #4">
                                <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #4" />
                            </a>
                            <div class="caption">
                                <div class="image-title"></div>
                                <div class="image-desc"></div>
                            </div>
                        </li>

                        <li>
                            <a class="thumb" href="images/slideshow/home/image6.jpg" title="Title #5">
                                <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #5" />
                            </a>
                            <div class="caption">
                                <div class="image-title"></div>
                                <div class="image-desc"></div>
                            </div>
                        </li>

                        <li>
                            <a class="thumb" href="images/slideshow/home/image7.jpg" title="Title #6">
                                <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #6" />
                            </a>
                            <div class="caption">
                                <div class="image-title"></div>
                                <div class="image-desc"></div>
                            </div>
                        </li>

                        <li>
                            <a class="thumb" href="images/slideshow/home/image8.jpg" title="Title #7">
                                <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #7" />
                            </a>
                            <div class="caption">
                                <div class="image-title"></div>
                                <div class="image-desc"></div>
                            </div>
                        </li>
                        <!--<li>
                            <a class="thumb" href="images/slideshow/home/image8.jpg" title="Title #7">
                                <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #7" />
                            </a>
                            <div class="caption">
                                <div class="image-title">Title #7</div>
                                <div class="image-desc">Description</div>
                            </div>
                        </li>-->
                    </ul>



...



<script type="text/javascript">
            jQuery(document).ready(function($) {
                // We only want these styles applied when javascript is enabled
                $('div.navigation').css({'width' : '300px', 'float' : 'right', 'margin-right' : '-170px', 'margin-top' : '-50px'});
                $('div.content').css('display', 'block');

                // Initially set opacity on thumbs and add
                // additional styling for hover effect on thumbs
                var onMouseOutOpacity = 0.67;
                $('#thumbs ul.thumbs li').opacityrollover({
                    mouseOutOpacity:   onMouseOutOpacity,
                    mouseOverOpacity:  1.0,
                    fadeSpeed:         'fast',
                    exemptionSelector: '.selected'
                });

                // Initialize Advanced Galleriffic Gallery
                var gallery = $('#thumbs').galleriffic({
                    delay:                     10000,
                    numThumbs:                 8,
                    preloadAhead:              1,
                    enableTopPager:            false,
                    enableBottomPager:         true,
                    maxPagesToShow:            1,
                    imageContainerSel:         '#slideshow',
                    controlsContainerSel:      '#controls',
                    captionContainerSel:       '#caption',
                    loadingContainerSel:       '#loading',
                    renderSSControls:          true,
                    renderNavControls:         false,
                    playLinkText:              false,
                    pauseLinkText:             false,
                    prevLinkText:              '&lsaquo; Previous Photo',
                    nextLinkText:              'Next Photo &rsaquo;',
                    nextPageLinkText:          'Next &rsaquo;',
                    prevPageLinkText:          '&lsaquo; Prev',
                    enableHistory:             false,
                    autoStart:                 true,
                    syncTransitions:           true,
                    defaultTransitionDuration: 900,
                    onSlideChange:             function(prevIndex, nextIndex) {
                        // 'this' refers to the gallery, which is an extension of $('#thumbs')
                        this.find('ul.thumbs').children()
                            .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                            .eq(nextIndex).fadeTo('fast', 1.0);
                    },
                    onPageTransitionOut:       function(callback) {
                        this.fadeTo('fast', 0.0, callback);
                    },
                    onPageTransitionIn:        function() {
                        this.fadeTo('fast', 1.0);
                    }
                });
            });
        </script>