Cross Fade Image Gallery Messy On First Load

[Simon Matthews]

Hi Curtis,

Can you help me out with a little problem please? I need to create a cross fade image carousel like the one I use on my website but I want it to stop on the last image without going back to the first image again. I’m guessing it can be done by making an amendment to the code I’m already using?

Here is a link to a website that has the effect I’m trying to create:

https://www.fresherclean.co.uk/leather-cleaning-plymouth-exeter/

Note the small images that contain the place names fade between 3 different images and then just stop. I also want to have the images fading in slowly like they do in that website.

Can this be done by amending the following code?

https://www.simonbattersby.com/blog/simple-jquery-image-crossfade/

Thanks,

Simon.

[Demetri Tashie]

sorry for jumping in here….

simon – the very first example (Variations on the basic crossfade) from Simon Battersby’s Jquery image crossfade that Curtis provided for you is exactly what you are asking:

Variations on the basic crossfade

Cycle through images once and then stop

look at his example, view the source code, and you can see the slight modifications to the code to keep it from re-cycling a second time.

cheers

[Simon Matthews]

Hi,

Thanks for pointing that out, I hadn’t noticed that, although after sending in my question I did find the same solution further down the same page as a response to a question someone had sent in.

I do have another slight problem now though: I have my images fading in very, very slowly (as in the example website I attached), but as the first image fades in you can see the underlying images fading in as well. To achieve the fade in I set the display to none on both img and img.active in CSS, then I added the following script to the cycler to fade them in:

$(window).load(function(){
$(‘#cycler-sub-banner2 img.active’).fadeIn(3000);
$(‘#cycler-sub-banner2 img’).fadeIn(15000);
// run every 7s
setTimeout(‘cycleImages2()’, 7000);
})

The problem with this is, the active image and the other images start to fade in at the same time. I need a way to delay the fading in of the other images so that they don’t show through. Any ideas would be much appreciated!

Thanks,

Simon.

[Curtis Thompson]

hello…

the short answer is that you need chaining…here’s a fiddle i made to demonstrate this:

https://jsfiddle.net/sitruc/6JG8Z/

sitruc

[Simon Matthews]

Hi,

So could I put id=”one”, id=”two” etc. on each of my cycler images for this to work with a cycler?

Eg:

And then just add your function somewhere in the cycler script?

Thanks,

Simon.

[Simon Matthews]

Sorry, it won’t let me type out an example for some reason. Basically my example was adding an id of ‘one’, ‘two’, ‘three’ etc. to the image tag of each cycler image.

[Curtis Thompson]

hello…

no – that was just a simple example of chaining. while i definitely want to help you, i don’t have the time at the moment to write up a fully functional example using your code. it’ll be best if you study that, read up on jquery chaining a bit and give it a shot in your own code.

basically what is happening there is that the function listed as an argument is called after the fade. here’s the api docs for this:

https://api.jquery.com/fadeIn/

hope that helps. best you learn what is going on vs. us just writing it all for you, though. :-/

sitruc

[Simon Matthews]

Okay, thank you. Wasn’t really expecting you to write out something for me from scratch (though I really appreciate it when you do), was hoping that there was something out there already available. My knowledge of JS is extremely limited but hopefully I will find time to study it a bit more at some point.

Thanks,

Simon.

[Curtis Thompson]

hello…

[Simon Matthews] “hoping that there was something out there already available”

there are more plugins than you can probably count that do exactly this using jquery. i pointed you to one somewhere in this thread, but here it is again:

https://jquery.malsup.com/cycle/

or query “image cycle jquery” or the likes. you are currently trying to modify a simple example that this guy made, which is very good for learning, but if you just want a plugin and don’t want to understand the guts, try the one above.

sitruc

[Simon Matthews]

Thanks, the issue I am having occurs when the cycler fades in for the first time on page load. The cycler fades in very slowly, with the other images slightly visible as it fades in. Not sure which of the examples on the link you attached has this slow fade in effect from page load?