Hi Sami

The slider add-on is based on the Orbit Slider that is part of the Zurb Foundation framework. I have just tried your scenario using Orbit straight out of Foundation (ie I am not using the C5 add-on). It has the same issues.

The fade-in and fade-out seems to work fine if consecutive images do not have captions. I will dig into the Foundation code and see if I can fix the problem. One solution might be to fade out the caption on the first image before the next image slides in and caption fades in.

Regards

James

Hi Sami

I think I have worked this out. Attached is an updated copy of the foundation.js file (just unzip the attached). Can I get you to replace the foundation.js file in the Orbit Slider block with the attached version?

The foundation.js file can be found under directory...

packages/tra_orbit_slider/blocks/tra_orbit_slider/js

Let me know if it does the trick and I will upgrade the block in the C5 marketplace.

I have tested it and it seems to work fine. Let me know if it works ok for you.

Thanks

James

Hi,

I tried your updated JS file, and the fade in works now. However, it still doesn't look so good because now the caption fades in, but it doesn't fade out. It would be great if it fades out smoothly too. When i modified the foundation.js, i managed to fadeout caption but while fading, it moved towards the bottom right corner.

Thanks for help anyway.

I will continue digging - hopefully I can get it to work the way you want.

Thanks for your feedback

Hi,

I think I have managed to achieve the effect you are after. Can you try the attached javascript file and let me know what you think.

If you want to speed up the fade out of the caption, take a look in the preshift function and modify the fadeout duration. For example, you could halve the fadeout duration by changing the code to look like the following...
[code]
this.$caption.fadeOut(this.options.captionAnimationSpeed / 2,
function() {
e.shift(d)
})
[\code]

Regards

James

Hi

Have you had a change to test out the js file from my previous response? Does it give you the effect you are looking for?

Regards

James