[revolutionx]

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 Here

This is what I have so far Here It kind of works, it fades the inactive images. I've added the mouseout code, but it seems a little slow, also because it fades every image even the picture with the mouse over it fades and then goes back to 100% opacity, which isn't ideal.

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

Code:

 <script>
$(window).bind("load", function() {
	var activeOpacity   = 1.0,
		inactiveOpacity = 0.3,
		testOpacity = 0.3,
		fadeTime = 100,
		clickedClass = "selected",
		thumbs = "#mycarousel li";

  $(thumbs).fadeTo(fadeTime, 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).mouseout(function(){
   		$(thumbs).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);
	 });
});
  </script>

Thanks.

[Wimpy]

This might improve it a bit:

$(document).ready(function()
{
	var activeOpacity   = 1.0,
		inactiveOpacity = 0.3,
		testOpacity	 = 0.3,
		fadeTime		= 100,
		clickedClass	= "selected",
		thumbs		  = "#mycarousel li";

	$(thumbs).fadeTo(fadeTime, activeOpacity);

	$(thumbs).hover
	(
		function()
		{
			var me = $(this).fadeTo(fadeTime, activeOpacity);
			$(thumbs).each(function()
			{
				if($(this) != me)
				{
					$(this).fadeTo(fadeTime, inactiveOpacity);
				}			 
			});
		},
		function()
		{
			// Only fade out if the user hasn't clicked the thumb
			if(!$(this).hasClass(clickedClass))
			{
				$(this).fadeTo(fadeTime, activeOpacity);
			}
		}
	);
   
	$(thumbs).mouseout(function()
	{
		$(thumbs).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);
	});
});

Now only the images/thumbs not being hovered over will be faded out whilst the one you are in fact hovering over will be faded in. Note that I haven't tried this out and it might not be working, but I think it should! Hope it helps!

[revolutionx]

Thanks Wimpy for that code.

I have tested it: Here

Although it's not working as it should.

I'm just wondering if there's any other jQuery galleries that will work as I want they too, or if I could even find something flash based, that would allow me to define the images in an xml file, and fade the other 3 items to 30% opacity or so, whilst keeping the image with the mouse over it at 100% opacity.

I shall keep looking

I have found an issue using FadeTo. When you mouseover the 4 images really quickly for example the gallery goes nuts. It flashes from 30% - 100% Opacity. I thought this was due to the 250ms wait, but even when set to 0 it still did this :\

This post has been edited by revolutionx: 23 August 2009 - 08:50 AM

[Wimpy]

This part didn't seem to work, I tested it on my local setup:

if($(this) != me)

it seems that it does not find any differences in them, so if you do have some sort of special identifier on each item? Perhaps an ID or something? You should alter it to use that instead.

You can stop animations by using the stop()-method, if the matched element is currently running an animation-process the stop()-method will immediately interrupt it.

My Code now looks something like this (and it is working smooth as h*ll:

$(thumbs).hover
(
	function()
	{
		var id = $(this).fadeTo(fadeTime, activeOpacity).attr("id");
		$(thumbs).stop().each(function(i)
		{
			if($(this).attr("id") != id)
			{
				$(this).fadeTo(fadeTime, inactiveOpacity);
			}			
		});
	},
	function()
	{
		$(thumbs).stop().fadeTo(fadeTime, activeOpacity);
	}
);

Note that I use the stop()-method in there!

[revolutionx]

I have finally solved this issue!

I had the fade time set to 100ms, changed this to 1 and it's fixed!

I'm sure I did that before :\

Thanks for all your help Wimpy

[Wimpy]

No problem, but the test page you have doesn't work, perhaps you haven't updated that page? Would love to see the final result!

revolutionx, on 24 Aug, 2009 - 03:56 AM, said:

I have finally solved this issue!

I had the fade time set to 100ms, changed this to 1 and it's fixed!

I'm sure I did that before :\

Thanks for all your help Wimpy

[revolutionx]

And the final result for you - Here

[Wimpy]

It looks awesome! I noticed, though, that it's a little buggy from time to time, did you put the stop()-call in there?

I think it would look a little better if you had a little fading time on it as well! But it looks great and I'm happy to see you've got it working!

revolutionx, on 24 Aug, 2009 - 08:38 PM, said:

And the final result for you - Here