I'm currently building my site with the Thesis theme and Wordpress and I have a header banner using the jquery slideshow using the "wipe" cycle effect.  Every thing lines-up and cycles properly, but I'm having a problem when the page reloads.  After soem research, it seems I'm having a stacking problem - when the page first loads, all eight images/slides are viewable, or should I say, stacked, whcih is what it looks like.  It only stays like that for a second, but it looks god awful.  From my research, it seems I need to pre-load the first few slides before the slideshow starts, but since I don't understand jquery programming yet, I can't figure out how to add-in the preloader.  If someone can help, I would be eternally grateful.  I've included the css and custom_functions coding for your reference.  My site is currently under maintenace mode, or I would provide the link.  Thank you in advance for assistance.

 

CSS:

 

/*---:[ Slideshow ]:---*/
.custom .slideshow .slide { display: block; height: 169px; width: 990px; outline: none; border-bottom: 1px solid #e8e3c8; }
.custom .slideshow #slide1 { background: url('images/image-1.png') no-repeat; }
.custom .slideshow #slide2 { background: url('images/image-2.png') no-repeat; }
.custom .slideshow #slide3 { background: url('images/image-3.png') no-repeat; }
.custom .slideshow #slide4 { background: url('images/image-4.png') no-repeat; }
.custom .slideshow #slide5 { background: url('images/image-5.png') no-repeat; }
.custom .slideshow #slide6 { background: url('images/image-6.png') no-repeat; }
.custom .slideshow #slide7 { background: url('images/image-7.png') no-repeat; }
.custom .slideshow #slide8 { background: url('images/image-8.png') no-repeat; }
.custom .slideshow #slide9 { background: url('images/image-9.png') no-repeat; }

 

Custom_Functions

 

/* Slideshow */

function slideshow() {
/*if (is_front_page()) {*/
?><div class="slideshow">
    <a id="slide1" class="slide" href="/contact/"></a>
    <a id="slide2" class="slide" href="/contact/"></a>
    <a id="slide3" class="slide" href="/contact/"></a>
    <a id="slide4" class="slide" href="/contact/"></a>
    <a id="slide5" class="slide" href="/contact/"></a>
    <a id="slide6" class="slide" href="/contact/"></a>
    <a id="slide7" class="slide" href="/contact/"></a>
    <a id="slide8" class="slide" href="/contact/"></a>
    <a id="slide9" class="slide" href="/contact/"></a>
  </div>
<?php
}/*}*/
add_action('thesis_hook_after_header','slideshow');

function slide_script() {
echo "\n\n";
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
 fx:     'wipe',
   speed:   500,
   timeout: 2000,
   clip:   'l2r'
});
});
</script>
<?php
}
add_action('wp_head','slide_script');

?>