i want to highlight current item , how do i get the image source and current thumbnail ? http://jsfiddle.net/RL8MV/2/
$('#carousel span').append('<img src="http://coolcarousels.frebsite.nl/c/28/img/gui/carousel_glare.png" class="glare" />');
$('#thumbs a').append('<img src="http://coolcarousels.frebsite.nl/c/28/img/gui/carousel_glare_small.png" class="glare" />');
$('#carousel').carouFredSel({
responsive: true,
circular: false,
auto: true,
items: {
visible: 1,
width: 200,
height: '56%'
},
scroll: {
fx: 'directscroll'
}
});
$('#thumbs').carouFredSel({
responsive: true,
circular: true,
infinite: true,
auto: {
play:true
},
scroll:
{
items: 1,
onBefore: function() {
var pos = $("#thumbs").triggerHandler("currentPosition");
// alert( "The carousel is at item number " + pos );
}
},
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 6
},
width: 150,
height: '66%'
}
});
$('#thumbs a').click(function() {
$('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
$('#thumbs a').removeClass('selected');
$(this).addClass('selected');
return false;
});
Finally got it solved :)
function highlight( items ) {
items.filter(":eq(0)").css({
backgroundColor: "#ff9",
width : 140,
height : 100,
margin : 7
});
return items;
}
function unhighlight( items ) {
items.css({
backgroundColor: "#fff",
margin : 27
});
return items;
}
$('#carousel span').append('<img src="http://coolcarousels.frebsite.nl/c/28/img/gui/carousel_glare.png" class="glare" />');
$('#thumbs a').append('<img src="http://coolcarousels.frebsite.nl/c/28/img/gui/carousel_glare_small.png" class="glare" />');
$('#carousel').carouFredSel({
responsive: false,
circular: false,
auto: false,
items: {
visible: 1,
width: 540,
height: '56%'
},
scroll: {
fx: 'directscroll'
}
});
$('#thumbs').carouFredSel({
responsive: true,
circular: true,
infinite: true,
auto: {
play:true,
onBefore: function( data ) {
unhighlight( data.items.old );
},
onBefore : function( data ) {
highlight( data.items.visible );
$('#carousel').trigger('slideTo', '#' + data.items.visible.eq(0).attr("id").split('_').pop() );
$('#thumbs img').removeClass('selected');
$("#curimg").html(data.items.visible.eq(0).attr("id").split('_').pop());
//$(this).addClass('selected');
}
},
scroll:
{
items: 1,
},
prev:
{
button:'#prev',
onAfter: function( data ) {
unhighlight( data.items.old );
},
onBefore : function( data ) {
highlight( data.items.visible );
$("#curimg").html(data.items.visible.eq(0).attr("id").split('_').pop());
$('#carousel').trigger('slideTo', '#' + data.items.visible.eq(0).attr("id").split('_').pop() );
$('#thumbs img').removeClass('selected');
$("#curimg").html(data.items.visible.eq(0).attr("id").split('_').pop());
//$(this).addClass('selected');
}
},
next:
{
button:'#next',
onAfter: function( data ) {
unhighlight( data.items.old );
},
onBefore : function( data ) {
highlight( data.items.visible );
$("#curimg").html(data.items.visible.eq(0).attr("id").split('_').pop());
$('#carousel').trigger('slideTo', '#' + data.items.visible.eq(0).attr("id").split('_').pop() );
$('#thumbs img').removeClass('selected');
$("#curimg").html(data.items.visible.eq(0).attr("id").split('_').pop());
//$(this).addClass('selected');
}
},
items: {
visible: {
min: 2,
max: 6
},
width: 150,
height: '66%'
}
});
$('#thumbs img').click(function() {
$('#carousel').trigger('slideTo', '#' + this.id.split('_').pop() );
$("#curimg").html( this.id.split('_').pop());
$('#thumbs').trigger('slideTo', '#' + this.id);
$('#thumbs img').removeClass('selected');
$(this).addClass('selected');
return false;
});
Updated link for odd no of visible items to highlight middle one