Front & Back Development

Easy Slider 1.7 – Fade, Cross Fade Effect

Fade effect for Easy Slider 1.7

This is a “patch” usefull but a patch.  Just comment  some lines and add few lines.
I recommend you follow these steps, drop me a comment if you need help.

Modification of jQuery Plugin Easy Slider 1.7, By CSS GLOBE, to use fade effect between transitions.

1) Add this CSS
#slider ul{ position: relative; }
#slider li{position:absolute;top:0;left:0;z-index:8;width:653px;height:341px;
overflow:hidden;}
#slider li.active {z-index:10;}
#slider li.last-active {z-index:9;}

2) Open EasySlider1.7.js
Go to line #131. Comment these lines. All of them or just 132 and 134.

#131 if(!options.vertical) {
#132 // $("ul",obj).css("margin-left",(t*w*-1));
#133 } else {
#134 // $("ul",obj).css("margin-left",(t*h*-1));
#135 }

3) Comment from line #163
/*
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
{ queue:false, duration:speed, complete:adjust }
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
{ queue:false, duration:speed, complete:adjust }
);
};
*/

4) After, Add this:
Here is the fade effect. Adjust Speed and duration as you want.

var $active = $('ul li.active',obj);
if ( $active.length == 0 ) $active = $('ul li:first',obj);
var $next = $active.next().length ? $active.next() : $('li:first',obj);
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
adjust();
});

Finished) After the last piece comes …
if(!options.continuous && options.controlsFade){ …..

That’s all folks!

Thanks to Jon Raasch for his example http://jonraasch.com/blog/a-simple-jquery-slideshow

Beto López
"Full stack" web developer focused in maintenance and bug fixing.Wordpress, Prestashop, HTML, CSS, Javascript, Php and Mysql. Also open source collaborator. Linkedin y Twitter.


We fix things, you rest easy
We fix websites. You rest easy. Ninjas get the job done. No excuses. No matter the problem, no matter the code, we’re here to help you.


Any doubts? Contact us
by Beto