Javascript Image Slider / Posts /

Transparent Images doubling effect

1
Ok, I saw the post at 1645 and his solution to use transparent gifs. Though I thought about this myself, before such a mark-up hack, I thought I'd describe the issue I'm having.

What I've noticed is that no matter the transition being used, after the first image, whenever an image comes in, it actually 'doubles' and comes in twice stacked on top of itself but about a pixel or two off. Then, that 2nd copy is destroyed just before the the transition starts into the next image. It 'blinks' away.

Using images w/o backgrounds and/or holes in them, especially with drop shadows really shows this.

I have tried different combinations of time in the pause/transition but haven't been successful in getting rid of this 'doubling' effect.

I tested solid blocks of color and it works fine but then I cut a hole and put a ragged edge on one and I could see the blink again. So might it be either something with the transparency or something else?

I'm now on a Mac and testing in Firefox, Chrome and Safari.
Kelly  11 years ago   viewed: 3824    

2 Answers

0
Hi Kelly,
Do you have a testing page on the Internet? That will help me to understand it better.

As John mentioned in the post http://www.menucool.com/1645/transparent-image, the image is being used as the background of a DIV element of the slider, and beneath the DIV, there will be another DIV which has a background of the previous slide image. The new coming DIV has a background-image, but no background-color. The previous DIV underneath has both background-image and background-color(defined by #slider { ... background:#fff url...). I don't understand how it is twice stacked. I am wondering if giving the new coming DIV a background color will help or not:
#slider div {background-color: #FFF; }
milo   11 years ago
0
I see... so I get that better this time. The issue is that the designer used a large background graphic with a four-sided inner shadow and the imagery on top are lcd screens and such randomly arranged, so the slide images have to be transparent pngs to let that background show through as it's literally impossible to align a piece of the background w/the overlaying image....and they want a slide effect! Fade could probably work.

As it's a drupal site, jquery is already being loaded and I've had conflicts with other jquery sliders but I'm just being lazy and not coding one myself. However, the notion of pure javascript sounded good although I'm only an intermediate at best so..

If I can intercept that 'bottom' div with the previous image and background and fade that out before the new image comes to rest at the final coordinates, then the visual jarring won't really be there.

If I'm understanding how it works. I'll try to post something, but thanks...
Kelly   11 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲