PNG Images

[JoshuaNovak919]

If you use png images with transparent backgrounds you see them all stacked until you cycle through all the images once.

[JoshuaNovak919]

If you put the negative width of your image for every image except the first as an inline style on the image it fixes the problem. It seems the images just need to be positioned during the setup portion, but for some reason aren't.

[nopersonalive]

It seems that opacity value is not being animated back to 0, when the z-index becomes :1.

I tried to copy the animation line used to get opacity from 0 to 1, and set it to animate from 1 to 0, but had no luck.

[geebru]

Also found this issue. The negative width didn't work for me. While they didn't stack, they refused to show afterwards (unless I did it wrong).

If you let the slider run (cycle through all slides) it works, but on initial load it will load every slide at once.

[zocoi]

Well I found a quick fix for this issue by adding white background to the image using CSS:

div.orbit > img {
    background: white;
    ....
}

at least it works for me in FF

[Varix]

the background for my pages isn't a solid colour.

Is there a fix that doesnt require me to lose the transparency of the images? or to change the images to rectangle jps?

thanks for any help you guys can give

[riggerz29]

Varix i have the same problem, ive been playing with the code and i have got it to work with transparent png's when it auto slides but not when it first loads so i still have the problem that when the page loads they all appear but after the first slide its all good i could post the code so far if you like?, im going to see if i can fix the last problem now

EDIT i have fixed it now varix all works for me :)

edit the jquery.rotate-1.2.3.js file on the following lines.

Line : 88 to 94 looks like this //Set initial front photo z-index and fades it in slides.eq(activeSlide) .css({"z-index" : 3}) .fadeIn(function() { //brings in all other slides IF css declares a display: none slides.css({"display":"block"}) });

change it to

//Set initial front photo z-index and fades it in slides.eq(activeSlide) .css({"z-index" : 3}) .fadeIn(function() { //brings in all other slides IF css declares a display: none //slides.css({"display":"block"}) });

then go to line 305 and edit it to look like this .css({"z-index" : 1, "display" : "none"});

line 337 change it to this .css({"z-index" : 2, "display" : "none"});

line 343 to this .css({"opacity" : 0, "z-index" : 3 , "display" : "block"})

line 351 to this .css({"left": orbitWidth, "z-index" : 3, "display" : "block"})

line 357 to this .css({"left": -orbitWidth, "z-index" : 3, "display" : "block"})

line 366 to this .css({"top": orbitHeight, "z-index" : 3, "display" : "block"})

line 372 to this .css({"top": -orbitHeight, "z-index" : 3, "display" : "block"})

line 381 to this .css({"left": orbitWidth, "z-index" : 3, "display" : "block"})

line 390 to this .css({"left": -orbitWidth, "z-index" : 3, "display" : "block"})

[Varix]

riggerz29 I want to thank you so much for your help. I am going to be implementing your changes now and will post back with the results ASAP... thanks again :)

[Edit] That works perfectly! Tested in the newest versions of Chrome, IE, and Firefox

[Varix]

ok so it works sorta... the fix does fix the problem of all the images loading ontop of each other.

however it doesnt quite work the way it did before. the old image no longer slides out. it just disappears, and the new image has to load from scratch before it slides in each time, regardless of how many times it has loaded and slided before.

working on a way to fix this now. will let you know if I make any break throughs

[riggerz29]

hi varix ok ive had a look back at mine and the images load okay however they do still disappear everytime as you said so i will also have a look into this and post back asap :)

[riggerz29]

Okay again ive had a play with the code and all seems to be ok so far with mine try this out

go to line 305 and edit it to look like this again .css({"z-index" : 1});

then on line 333 where is says slides .eq(prevActiveSlide) .css({"z-index" : 2});

change it to this but notice where i have 1200px change that to the width of your slide and you should be ok

if(slideDirection == "next") { slides .eq(prevActiveSlide) .css({"z-index" : 2}) .animate({"left": "-=1200px"}, options.animationSpeed); } if(slideDirection == "prev") { slides .eq(prevActiveSlide) .css({"z-index" : 2}) .animate({"left": "+=1200px"}, options.animationSpeed); }

[Varix]

that worked and fixed the animation, thanks riggerz29! Chrome and Firefox the effect looks perfect. And it does the job in IE if not a little more shaky. but alot of ajax/javascript and css heavy things dont always work perfectly in IE anyway and I am very happy with the results.

Thanks again riggerz29 for your help with troubleshooting my problem... i owe you a coffee...

[riggerz29]

No problem at all glad I could help you out :), I'll have a tea if you don't mind tho as I'm not a coffee fan lol, feel free to message me if you have any other problems as I'm always having a tinker with jQuery on my sites