slideshow problems

[Violet_82]

Hi there, I am a little stuck with a slideshow I am developing.
On this site http://antobbo.webspace.virginmedia.com/petras/home.htm the slideshow is working fine, it is a javascript slideshow:

<script type = "text/javascript">
		var imageList = new Array(
				"images/homepage/home_0.jpg",
				"images/homepage/home_1.jpg",
				"images/homepage/home_2.jpg");

				var frame = 0;
				var image;

				function init(){
					setInterval("animate()",1000);
					image = document.getElementById("home_page_image");

					}

				function animate(){

					frame += 1;

					if ( frame >= imageList.length ){

										frame = 0;

									}

					image.src = imageList[frame];

			}
		</script>

But then I thought to myself: let's add a bit of fading and I changed the script and inserted a bit of jquery but it is not working http://antobbo.webspace.virginmedia.com/petras/test/home.htm. I was wondering if somebody could help me to determine why this is not working. The code, I think, makes sense...but, I might be wrong : - )

<script type = "text/javascript">
		var imageList = new Array(
				"images/homepage/home_0.jpg",
				"images/homepage/home_1.jpg",
				"images/homepage/home_2.jpg");

				var frame = 0;


				function init(){
					setInterval("animate()",2000);

					}

				function animate(){

					$("#"+ imageList[frame]).hide('fast');
					frame += 1;

					if ( frame >= imageList.length ){

										frame = 0;

									}

					$("#" + imageList[frame]).show('fast');

			}
		</script>

Any idea at all? I thought it would have been straightforward.
thanks

[Violet_82]

Sorry I have run few tests, and here there is a slightly different version with fadeIn() and fadeOut() but still no joy it doesn't work:

<script type = "text/javascript">
		var imageList = new Array(
				"images/homepage/home_0.jpg",
				"images/homepage/home_1.jpg",
				"images/homepage/home_2.jpg");
		var frame = 0;
				function init(){
					setInterval("animate()", 2000);
				}

				function animate(){
					$('#' + imageList[frame]).fadeOut('fast', function(){

						frame++;
						if ( frame >= imageList.length ){

														frame = 0;

									}
						$('#' + imageList[frame]).fadeIn('fast');
					});



				}
		</script>

[Airshow]

The jQuery selector is wrong. Try $("#home_page_image") . This does not vary.

The image URLs in the array imageList should be used to set $("#home_page_image").attr('src', ...) .

You probably also want to preload the images and start the animation when all are loaded. Try it without preloading and you will probably see what I mean (depending on broadband speed and browser caching. Preloading is slightly tricky.

fadeOut/fadeIn will definitely give a better effect then hide/show.

Airshow

[Violet_82]

Hi Airshow, thanks for the suggestion.
I have given it a go, but I have a few problems stills.
This is the new script I came up with:

<script type = "text/javascript">
		var imageList = new Array(
				"images/homepage/home_0.jpg",
				"images/homepage/home_1.jpg",
				"images/homepage/home_2.jpg");

				var frame = 0;


				function init(){
					setInterval("animate()",3000);

					}

				function animate(){

					$("#home_page_image").attr('src', 'imageList[frame]').fadeOut('slow');
					frame += 1;
					$("#home_page_image").attr('src', 'imageList[frame]').fadeIn('slow');

					if ( frame >= imageList.length ){

										frame = 0;

									}



			}
		</script>

I have replaced the selector and and use the .attr() method. Now, rather than the url of the picture I have used the array element with an index that should change and display the next picture (I even tried with the actual URL but it doesn't work), but it is not working the way I have envisage it would, here's the test link http://antobbo.webspace.virginmedia.com/petras/test/home.htm. In chrome the images don't display at all, in firefox only the first image home_0.jpg displays, the animation works but it is always the same picture. The thinking behind this was that this line $("#home_page_image").attr('src', 'imageList[frame]').fadeOut('slow'); would change the src attribute of the current image and insert the new url contained in the imageList[frame] and fade the image out. then increase the index by 1 and change again the src with the new url contained in the next imageList[fade] element $("#home_page_image").attr('src', 'imageList[frame]').fadeIn('slow'); and fade in the picture.
Somehow the frame variable is not increasing or something like that. I have tried to debug in firefox but it is almost impossible because strangely enough when it goes through the script it jumps onto the jquery library and I get completely lost.

What I wanted to achieve in the end was something similar to this animation http://www.twickenhamtennis.org/ but I am not getting there as yet.

[Airshow]

Violet,

The code doesn't work in quite the way you want because the fadeOut and the fadeIn fight each other. Remember that when fadeOut() is called, it only starts the fadeOut animation, so it's not complete when the statements following it are executed, including fadeIn() . Therfore fadeOut and fadeIn are simultaneous and work antagonistically on the same img node.

Looking at the tennis site, it seems that you want something known as a "crossfade", ie. current image fades out as the next image fades in.

The best you can hope for with a single img node is to fade out the current image, change it's src while it is fully faded out, then fade it back in. But that would not be a crossfade.

You could persist with your code and eventually get it working or use something ready-developed. If you choose the latter, then you might be interested in this; about as good and concise a crossfade as you'll find, and very well explained.

Airshow

[Violet_82]

thanks Airshow,
I will keep going with the code trying to get it right - I will leave this thread open and post probably some more at some point hope you don't mind - and then I will give the crossfade a go, I really like the link you sent me, but probably in about a week, I am off on holiday now : - )!

[Airshow]

Holiday! What's that?

[Violet_82]

eheh, sorry, I had a week off, so I went abroad.
On a second thought, I will do a crossfade effect, leaving off the rest. I will open a separate thread for that, because surely I will need some help. I will follow what's on the website you mentioned and try to re-do it again
thanks

[Violet_82]

Airshow, one question before I dive into the crossfade.
Take the previous code again, specifically the following bit:

...
      var $next = ($('#portfolio_cycler .active').next().length > 0) ? $('#portfolio_cycler .active').next() : $('#portfolio_cycler img:first');
...

basically the author says that this is to assign the next image to the variable next. If there is no other image, he assigns the first image to next. I am not quite sure how this happens though. From what I remember ? and : represents a sort of if statement. So that is to say that if the next element (in this case an image) with a class of active descendent of #portfolio_cycler is not the first image (>0) then the variable next is assigned the next image, otherwise it is assigned the first image. so, he has 4 images in his script, so say that we are at image 4 before the above line runs (therefore image 4 has a class active). When we say ($('#portfolio_cycler .active').next().length > 0 we are attempting to select a fifth image that in fact doesn't exist but how does the script know?! We are not in an array I don't think, so we can easily go out of bounds...or as usual I am missing sth obvious?! Why would the condition be false?
thanks

[Airshow]

Violet, your analysis is just about perfect.

The reason why the code doesn't generate an error is that we are working with a jQuery object not an array. The object's next() method returns a modified version of itself but now containing (if it exists) the next sibling of the active image. If there is no next sibling, then the object will hold an empty selection and its .length property will be 0 (zero). Otherwise it will be 1.

The statement is actually longer and less efficient than it might be. As the previous statement is var $active = $('#portfolio_cycler .active'); , it could (and should) be simplified to :

var $next = ($active.next().length > 0) ? $active.next() : $('#portfolio_cycler img:first');

Or, in longhand :

if ($active.next().length > 0) { //if there's a next img,
	var $next = $active.next(); //then use it.
}
else { //if there's no next img,
	var $next = $('#portfolio_cycler img:first'); //then use the first img.
}

This gives the desired "wraparound" action from the last img back to the first.

Airshow

[Violet_82]

Hi Airshow thanks for that, crystal clear now : - )!