Slider images won’t fade with .png

[joepk]

Hey guys,

Got a little issue with this [awesome responsive slider](http://tympanus.net/codrops/2011/11/21/elastic-image-slideshow-with-thumbnail-preview “Slider”) The problem is that the images wont fade out when .png are used. There must be a little fix that .png images also fade out right?

Here on my [portfolio](http://www.joepklunhaar.nl/ “portfolio”) you can see the slider in action with the png’s. As you see the images slide you wont get that gentle fade out moment :(

I’m not quite the coder so I was hoping I’d get some help from you helpfull fellas ;)

Thanks!

[Kitty Giraudel]

I’m pretty sure it has nothing to do with PNG. Have you tried using JPG to affirm this statement?

Edit: okay, it has to do with PNG transparency. The problem is that the previous image only disappears when the current image opacity is set to 1.

When using opaque images, it’s not a problem since the current image is on top of the previous one.
When using transparent PNG however, we still can see the image below. I guess you will have to edit the code of the plugin in order to make this work.

[joepk]

Yes but im not capable of adjusting the code haha. I was hoping someone else could do a quickfix!

[Kitty Giraudel]

I’m not comfortable enough with jQuery to fix it without risking breaking the whole thing, sorry.

[CrocoDillon]

Try this (seemed to work for me for your slideshow, but not for the original source, so no guarantees :P )

Change line 305 in jquery.eislideshow.js from:

`$currentSlide.css( ‘z-index’ , 1 ).find(‘div.ei-title > *’).stop().fadeOut( this.options.speed / 2, function() {`

to

`$currentSlide.css( ‘z-index’ , 1 ).stop().fadeOut( this.options.speed / 2, function() {`

So the whole slide fades out, not just the title

[joepk]

YES!! Awesome haha, it worked :D I knew it was a simple fix haha. Thanks allot!

[Author]

Posts