[jQuery] Cycle removes background image from thumbnails (pager)

[jon randahl]

Right, here goes:

I'm using a modified "jQuery Cycle Plugin - 'goto' Demo 2 (aka: Poor
Man's pager)" implementation of the Cycle plugin, this works fine in
FF2+, Op9, Saf3+ and Chrome2 but in IE cycle stops the background-
image from repeating!

As usual I cannot give out a public link due to NDA but I can give you
these two image locations to see the differences:

http://area51.slnmedia.com/cycle/cycle-issue-ff.jpg
http://area51.slnmedia.com/cycle/cycle-issue-ie.jpg

Finally, thank you for reading up to this point, hopefully together we
can sort this out!

Jon

Here is my current code.

html:
    <div id="gallery">
                <div id="thumbnails"></div>
                <div id="slideshow">
                <img id="large" src="/_assets/img/gallery/gallery-
image01.jpg" alt="Gallery Image" width="738" height="578" />
                </div>
    </div>

css:
        #gallery { width: 738px; float: right; position: relative; text-
align: center; }
                #gallery #thumbnails { position: absolute; top: 0; left: 0; 
width:
738px; height: 70px; background: transparent url('/_assets/img/gallery/
fff-50.png') 0 0 repeat !important; z-index: 1000; border-bottom: 1px
solid #c50a33; }
                #gallery #thumbs { margin: 0; padding: 5px; width: 728px; 
height:
60px; z-index: 1001; }
                #gallery #thumbs li { width: 48px; height: 48px; margin: 5px;
padding:0; float: left; border: 1px solid #fff; }
                #gallery #thumbs li a { width: 48px; display: block; }

script:
                $('#thumbnails').append('<ul id="thumbs"></ul>');

                var $th = $('#thumbs');
                var $ss = $('#slideshow');

                // add slides to gallery
                for (i = 2; i < 13; i++ ) {
                    ( i < 10 ) ? x = '0' + i : x = i;
                        $ss.append('<img 
src="/_assets/img/gallery/gallery-image'+x+'.jpg"
alt="Gallery Image '+i+'" width="738" height="578" />');
                }

                // start the slideshow
                $ss.cycle({
                        fx: 'fade',
                        cssBefore: {
                                zIndex: 1
                        },
                        timeout: 3000,
                        speed: 1500,
                        fit: 1,
                        cssAfter: {
                        zIndex: 0
                }
                });

                // add the thumbnails to the DOM
                $ss.children().each(function(i) {
                        ( (i+1) < 10 ) ? x = '0' + (i+1) : x = (i+1);
                        // create thumbnails
                        $('<li><a class="thumb" 
href="/_assets/img/gallery/gallery-image'+x
+'.jpg"><img src="/_assets/img/gallery/thumbs/gallery-image'+x+'.jpg"
alt="Gallery Image '+x+'" width="48" height="48" /></a></li>')
                                // append it to thumbnail container
                                .appendTo($th)
                                // bind click handler
                                .click(function() {
                                        // cycle to the corresponding slide
                                        $ss.cycle(i);
                                        return false;
                                });
                });