Hi, So far I have got jCarousel to display, and load the images via a txt file,
What I want to do is show 4 images at a time, then when the user puts the mouse over 1 of the images the other 3 images to fade opacity, to 30%. Then if they move the mouse to the image next to it I want that image to be 100% opacity and the other 3 images 30% opacity.
So the image with the mouse over it will always be 100% opacity, and the others 30%, so it stands out. When the user moves the mouse out of the jCarousel box I want all images to show 100% opacity.
I'm using code similar to stackoverflow.com/questions/901194/jquery-mouse-over-fade-in-out-click-opacity-100-other-click-op
Thanks.
Edit
Sorry I should have added code before, here it is: http://pastebin.com/m54cd73d8 This is what I have so far nickrance.co.uk/jcarousel/dynamic_ajax.html It kind of works, it fades the inactive images, but I think it needs a mouseout event to restore the opacity of all images when the mouse moves out of the jCarousel div. Also, it seems to be only working for the first 4 images, and I have 10 images in the carousel, the others don't seem to do anything :s
New Current code: So far
$(window).bind("load", function() {
var activeOpacity = 1.0,
inactiveOpacity = 0.3,
testOpacity = 0.3,
fadeTime = 50,
clickedClass = "selected",
thumbs = "#mycarousel li";
$(thumbs).fadeTo(1.0, activeOpacity);
$(thumbs).hover(
function(){
$(thumbs).fadeTo(fadeTime, inactiveOpacity);
$(this).fadeTo(fadeTime, activeOpacity);
},
function(){
// Only fade out if the user hasn't clicked the thumb
if(!$(this).hasClass(clickedClass)) {
$(this).fadeTo(fadeTime, activeOpacity);
}
});
$(thumbs).click(function() {
// Remove selected class from any elements other than this
var previous = $(thumbs + '.' + clickedClass).eq();
var clicked = $(this);
if(clicked !== previous) {
previous.removeClass(clickedClass);
}
clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
});
});