I guess I should also post my current code: There's a lot of styling
going on in here to highlight the current thumbnails. Anyway... here
we go:
default_panel = 1 // else default to 1
// callback function when loaded...
function mainpanel_carousel_initCallback(carousel) {
// bind functions to click of scroller that effect the main panel
jQuery('#scroller_carousel a').bind('click', function() {
//carousel.scroll(jQuery.jcarousel.intval(2));
if(!$("#main_carousel").is(':animated') ) { // check if main
panel
is animated
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr("rel")));
// tells the main carousel to scroll
carousel.stopAuto(); // reset the
autoscroll timer
carousel.startAuto(10);
jQuery('.sc a .rollover').removeClass("panel_on"); //
remove
thickborder color
jQuery('.sc a .rollover').css({'opacity':0}); // hide
thick border
jQuery(this).find('.rollover').addClass("panel_on"); //set
selected
state color
jQuery(this).find('.rollover').css({'opacity':.4}); //set
opacity
of highlight state
jQuery('.sc a').removeClass("panel_on"); //
remove outer thin blue
border from all panels
jQuery(this).addClass("panel_on"); // add
outer thin border to
selected
return false;
}
});
// set roller state for scroller images
$('#scroller_carousel a').hover(
function() {
if($(this).find('.rollover').attr("class").split(' ').slice(-1)
!=
"panel_on"){
$(this).find('.rollover').fadeTo(200, 0.40);
}
},
function() {
if($(this).find('.rollover').attr("class").split(' ').slice(-1)
!=
"panel_on"){
$(this).find('.rollover').fadeTo(200, 0.00);
}
});
};
function main_carousel_itemVisibleInCallback(carousel, item, i, state,
evt) {
current_panel = i;
jQuery('.sc a .rollover').removeClass("panel_on");
jQuery('.sc a').removeClass("panel_on");
jQuery('.sc a .rollover').css({'opacity':0});
$('.sc a .rollover').css({'opacity':0});
$("#scroller_carousel li:nth-child(" + i + ")").find('a').addClass
("panel_on");
$("#scroller_carousel li:nth-child(" + i + ")").find('.rollover').css
({'opacity':.4}).addClass("panel_on");
tnScroller.scroll(jQuery.jcarousel.intval(i));
}
// set another function on the click of the scroller items that affect
the scroller
function scroller_carousel_initCallback(carousel) {
scrollerInstance = carousel;
jQuery('#scroller_carousel a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr("rel")));
// tell scroller to scroll
//carousel.stopAuto(); //reset scroller
//carousel.startAuto(10);
});
};
// on load....
jQuery(document).ready(function() {
// set main carousel instnance
jQuery('#main_carousel').jcarousel({
start: default_panel, // sets the default panel
scroll: 1,
visible: 1,
auto:10,
wrap:"both",
initCallback: mainpanel_carousel_initCallback,
itemFirstInCallback: {onBeforeAnimation:
main_carousel_itemVisibleInCallback},
animation: 500,
easing: "easeOutExpo",
buttonNextHTML:null,
buttonPrevHTML:null
});
// set scroller instance
tnScroller = jQuery('#scroller_carousel').jcarousel({
start: default_panel, // sets the default panel
vertical: true,
scroll: 1,
visible: 3,
//auto:10,
wrap:"both",
initCallback: scroller_carousel_initCallback,
animation: 500,
easing: "easeOutExpo"
});
// on load do these things
$('.sc a .rollover').css({'opacity':0}); // set opacity of thick
rollover to 0
$('#main_content').css({'opacity':0}); // set opacity of both
carousels to 0
$("#main_content").css("visibility", "visible"); // set
visibility
of both carousels to 0
$("#main_content").fadeTo(500, 0.0).fadeTo(500, 1.00); // this
function is a hack to delay the reveal so everythign sets up nicely
before visible
});
