[jQuery] Cycle removes background image from thumbnails (pager)
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;
});
});