Slideshow Flicker

JavaScript
1

I have been working with this code:

function heroSliders() {
	var $active = $('#slideshow img.active');

	if ( $active.length == 0 ) $active = $('#slideshow img:last');

	// use this to pul the divs in the order they appear in markup

	var $next = $active.next().length ? $active.next()
		: $('#slideshow img:first');
	
	$active.addClass('last-active');

	$next.css({opacity: 0.0})
		.addClass('active')
		.animate({opacity: 1.0}, 1000, function() {
			$active.removeClass('active last-active');
		});
	}

$(function() {
	setInterval( "heroSliders()", 3000 );
});

When the page loads all the images kind of load very quickly causing a flicker, and then the slideshow begins.

Is there anything wrong with this code?

2

Have worked it out - added an opacity 1.0 to the img in the css.

3

Ok, so it never worked.

Seems because I have a dynamically pulled list of images I need to find someway of applying an .active class to the first element.

Now I already have this jquery setup for other uses:

$(document).ready(function () {
$('dl:last-child').addClass('last');
$('ul li:first-child').addClass('alpha');
$('ul li:last-child').addClass('omega');
});

So I tried to add something similar to my slideshow code:

function heroSliders() {
	var	$active = $('#slideshow img.active');

	if ( $active.length == 0 ) $active = $('#slideshow img:last');

	// use this to pul the divs in the order they appear in markup

	var $next = $active.next().length ? $active.next()
		: $('#slideshow img:first');
	
	$active.addClass('last-active');

	$next.css({opacity: 0.0})
		.addClass('active')
		.animate({opacity: 1.0}, 1000, function() {
			$active.removeClass('active last-active');
		});
	}
	

$document.ready(function () {
    $('#slideshow img:first-child').addClass('active');
	setInterval( "heroSliders()", 5000 );
});

But it’s not working. I am learning at a steady pace, and this is probably a bit beyond where I am at the moment, but I will certainly learn from this.

Any advice on where I am going wrong?

4

anyone?

5

first()

Never thought I’d be making a “First!” post. :lol:

6

Yes but where would I add that in my code? Do I need to declare a variable and add that in? Do I add it before my if statement?

7

Compare this line of your code:


$('#slideshow img:first-child').addClass('active');

With a line of the example code:


$("p span").first().addClass('highlight');

What do you think you need to do?

8

Ok, so basically I would add this:

$("#slideshow img").first().addClass('active');

into my function call at the bottom?

Because that isn’t working.

9

If you could provide a demo of your page experiencing the problem, so that we can investigate it with our own browsers, that would help a lot.

10

I’ll respect your wish for privacy, and have had a look at the page.

I see on IE that the document ready part near the end of the heroSliders script only has a single line to start the sliders. There prior line that is supposed to set the active image isn’t up online.

11

Not sure what you mean?

12

I’m talking about the heroSliders.js file

You seem to want the following code at the end of the script:


$(function() {
    $("#slideshow img").first().addClass('active');
    setInterval( "heroSliders()", 3000 );
});

But instead of that, at the end of the script you currently have


$(function() {
    setInterval( "heroSliders()", 3000 );
});

It seems that this line hasn’t been uploaded:


$("#slideshow img").first().addClass('active');
13

yeah because it broke the booking form overlay.

I have the client coming in 30 mins - so although I can live with the fade in for now, I can’t have the booking form overlay not working.

Why would that make a difference though?

14

I’ll have a look after I get in to work tomorrow, as the midnight hour has struck.

15

thanks mate, appreciate it. If I figure it out before hand I will post it here.

16

This is now solved.

Here is the answer: