Sunday, November 1, 2009

[jQuery] help fixing a cycle+jcarousel setup where imgs are loaded after onload

Hello, here on this site http://www.visitnorthcentralidaho.org/ I have
a cycle + jcarousel for imgs on the right side.. it works in all but
IE... the issue is that I'm added the extra images after the load. I
have finally got the thumbs to act right but... well it's acting right
in all but IE... so this is what I have...


var stack = [];

// add images to slideshow
var stackNum = 0;
var num =$("#img1").attr("rel");
stackNum = num+2;
var imageGroup=$("#img1").attr("alt");
for (var i = 3; i < num+1; i++) {
var img = new Image(497,284);
img.src = 'http://media.visitnorthcentralidaho.org/uploads/
images/'+imageGroup+'/'+i+'.jpg
';
img.alt = imageGroup;
img.title = "IMG";
$(img).bind('load', function() {
stack.push(this);
});
//$(".bigimgers").append('<img src="http://
media.visitnorthcentralidaho.org/uploads/images/'+imageGroup+'/'+i
+'.jpg" alt="'+imageGroup+'" title="IMG" id="img'+i+'" width="497"
height="284" class="bigimger MainImg" style="display:none;"/>');

}


// homepage cycles
$('#feature_IMG_gallery .bigimger').wrapAll('<div
class="bigimgers">');
$('#IMGNavINNER').prepend('<ul class="menu"
id="feature_gallery_IMG_pager"></ul>')
var $Imgcontainer = $('.bigimgers').cycle({
fx: 'shuffle',
pause: 0,
timeout: 5000,
delay: 500,
speed: 300 ,
random: 1,
before: onBefore,/**/
/*slideExpr: '.bigimg',*/
pager: '#feature_gallery_IMG_pager',
pagerAnchorBuilder: function(idx, slide) {
var Timg=slide.src;
var str = Timg;
var number_1 = str.lastIndexOf('/') + 1 ;
var number_2 = str.lastIndexOf('.') ;
var Timg = str.substring(number_1, number_2) ;
return '<li class="'+slide.title+'tab jcarousel-item
jcarousel-item-horizontal jcarousel-item-'+Timg+' jcarousel-item-'+Timg
+'-horizontal" jcarouselindex="'+Timg+'"><a href="#"><img src="http://
media.visitnorthcentralidaho.org/uploads/SuperSizerTmp/'+slide.alt
+''+Timg+'.-w0-h35-p0_thumb.jpg" alt="'+slide.title+'" class=""
style="height:35px;width:61px;"/></a></li>';
}
});

$(function() {
$('#feature_gallery_IMG_pager').jcarousel({
btnNext: ".next",
btnPrev: ".prev",
size:stackNum,
scroll:3
});
Thewidth=stackNum*61;
$('#feature_gallery_IMG_pager').css({"min-width":"417px",width:
Thewidth+"px"})
});

// add images to slideshow
function onBefore(curr, next, opts) {
if (opts.addSlide) // <-- important!
while(stack.length)
opts.addSlide(stack.pop());
};

would anyone have an idea on what to do to fix it?

Thank you
Jeremy

No comments: