Jquery Cycle Plugin and Png Transparency in IE8 and IE7

capnhud

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

4 years ago

It appears that if you have the timeout and speed not set correctly IE7 and IE8 will render artifacts in a gallery, by using faster transitions (lower 'speed' value) and longer timeouts (larger 'timeout' value) this problem is prevented. Additionally it reduces the CPU usage on a gallery using this plugin. But in order to make it completely work I needed Unit PNG Fix
which dealt with the background container supplying the dropshadow around the images.

Update: whatever caused it to work all of the sudden stopped it from working.

Update 2: need to change the background image in order to prevent the problem.

malsup

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

4 years ago

Are you still having a problem with this? I just checked your page with IE8 and it looks good.

capnhud

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

4 years ago

What I did was change the background color of the background .png which seem to solve the problem. At first it was transparent with just a dropshadow which cause the artifacts when paging through the 3, 4 and back to the first image. It appears that the plugin does something different than the simple controls plugin which did not have the problem in IE7 and IE8. I can provide you with the original background if you would like to troubleshoot your plugin.

malsup

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

4 years ago

It's not a plugin problem it's an IE problem when using an opacity filter with using PNGs. Using a background color is the way to fix it.

capnhud

Re: Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

4 years ago

I couldn't understand how the Simple Controls Gallery plugin handled the problem since I used the same images for it, but just switching to the jquery plugin and the glitch surfaced.

jeremydou..

Re: Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

3 years ago

It would be nice to be able to use a transparent png as the background.

I have an instance where there are some slideshows on my page that have transparent pngs in a slideshow with a standard static background image.

If the issue that is causing this is the opacity in IE, it would be nice if opacity in IE could be selected not to be used for the slide transitions.

tumrai

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

4 years ago

I found the problem with IE7, 8 when used with transparent png
Sample issue here. http://demo.thaiis.biz/cycle/
will see a black shadow not transparent. During move to change slide.
Please advice.

suldan

Betreff: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

4 years ago

It isnt a problem with png-transparency since you dont use ie6

probably its the background of the image-element itself, set to opacity=1 by Cycle (why ever ie7+8 show a white background then)

#image-container img {background:none !important;} solved this problem in my case

joshuacoo..

Re: Betreff: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

3 years ago

This also worked for me:

#image-container img {background:none !important;}

But then I had this weird glow around the edge of my PNGs. I found this fixed it:

#image-container img {background:none !important;filter:none !important;}

chaseswork

Re: Betreff: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

2 years ago

This worked for me! Thank you.

myradon

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

3 years ago

Transparent png's with fading is making me crazy! I think i've tried everything but IE makes a mess of it. Not even png-transparency but also Cufon generated fonts with applied textShadow don't work with IE. Tested in IE7 and IE8. I'm figuring this !@@#$%#$ out on and off for weeks. Gecko and Webkit browser work like a charm.

I tried unitpngfix (on different elements) and all the tricks at stackoverflow.com, first tried innerFade-plugin same story. Suldan's solution didn't bring anything neither did "zoom: 1" so on and so on.

What I have is Cufon replacent on P's and let Cycle do the fade-transitions between these P's!

Check out my test-server

Is it even possible to have Cycle-plugin on Cufon (font-replacement)+transparent png's?

Attachments

Screen capture.jpg
Size : 296.35 KB Download : 2838

alertone

Re: Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

3 years ago

Did you ever find a solution?

I ran into this problem awhile ago. Someone told me this is a limitation with jQuery 1.4 (IE PNG feathering/shadows). Hopefully, they will update and make a fix.

myradon

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

3 years ago

Someone helped me at google-groups for Cufon and transparency problem wit IE. He coded a lot of CSS-tricks so my p-elements would have some kind of 'masked' background of it's parent-div with holds the background-image property. IE will look like it should have initially (damn Microsoft)! So i thought "wouldn't it be easier to let jQuery figure out which part of the image will be shown?!"

Have a jQuery script which will calculate the background-position for the html-element it will be assigned to, recalculates the position if element has different position (centered fixed html/CSS) AND you could assign which parent of the html-element will hold the background-image property. Take for all concerning elements left, top as reference (maybe assigned with jQuery). Isn't this all we need?!

code like;

$('p#maskedBackground').recalculate('parentElement'[, width, height])

And returns for example background-position: 12px -134px

jeremydou..

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

3 years ago

My solution was to remove all references to opacity in the plugin. Since I'm only using the scroll effect, works for me.

frobdfas

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

3 years ago

I have run into this problem before and have never found a solution.

It is not limited to the cycle plug-in however, I ran into the problem with all custom fade effects that use variable transparency.

fatfreein..

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

3 years ago

I have been having the same issue with IE8 only. The issue was related to my .show(200) and .hide(200) parameters during a .mouseover jquery function. I removed the 200 from both parameters, and it loads fine now.

Hope this helps someone ...

lao3d1

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

3 years ago

I found that suldan's solution above worked for me as well.

#image-container img {background:none !important;}

Thanks.

kulerbox

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

3 years ago

Im hoping someone can help me out here, ive come across the same issue, where my png images are getting a black background in IE and ive tried all of the above fixes but none of them seem to work. Im using this plugin a bit differently than intended so the bug is highly visible, take a look here. http://www.thegrandslamofslots.eu/gsos2/

Thanks in advance

Update : I just blocked my lightning effect from ie so problem solved

souzadavi2

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

2 years ago

I Found the solution to FIX PNG on cycle plugin just setting the cleartype to false
Under Here is an example for that plugin working with PNG at the boring IE:

<script language="javascript" type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" charset="utf-8">
//// SLIDE PHOTOS
$(document).ready(function(){
var inners = $('.inner-slideshow').cycle().cycle('stop');
var slideshow = $('#slideshow').cycle({
fx: 'fade',
speed: 380,
timeout: 0,
cleartype:false,
prev: '#prev',
next: '#next',
before: function() {
// stop all inner slideshows
inners.cycle('stop');
// start the new slide's slideshow
$(this).cycle({
fx: 'fade',
timeout: 2000000,
cleartype:false,
autostop: true,
end: function() {
// when inner slideshow ends, advance the outer slideshow
slideshow.cycle('next');
}
});
}
});
});
////END SLIDE PRODUTOS.
</script>
<div id="slideshow" class="pics" style="margin:auto;clear:left;margin-top:40px">
<img src="images/produtos/CA153.png" width="311" height="390" />
<img src="images/produtos/CA153.png" width="311" height="390" />
<img src="images/produtos/CA153.png" width="311" height="390" />
</div>
<a href="#"><span id="prev">PREVIOUS</span></a>
<a href="#"><span id="next">NEXT</span></a>

For more exemplo go to official cycle plugin website: http://malsup.com/jquery/cycle/

My Blog
http://www.linknacional.com.br/criar-site

ringelsch..

Re: Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

1 year ago

In my case i set "cleartype:false" in my code. Thanx souzadavi2

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade', timeout: 6000, speed: 4000, random: 1, cleartype:false,

    });
});
</script>

testchrom..

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

2 years ago

neither

#image-container img {background:none !important;}

or
#image-container img {background:none !important;filter:none !important;}

did help for me :( any other suggestions for fadeIn and fadeOut

did i have said, that i do hate IE?

jawshchev..

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

2 years ago

@malsup - posted this elsewhere, and it did the trick for my issue...

set this:

cleartypeNoBg: true

chadpriest

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

2 years ago

FIX

use the solution souzadavi2 suggested first and add.. cleartype:false,

then use unitpngfix.js to fix all your ie6 png issues

then wrap all your images in a div like below.

<div class="center slider" id="introslider">
<div><img src="css/slider_100resultsdriven.png" /></div>
<div><img src="css/slider_20return.png" /></div>
<div><img src="css/slider_25reductioninventory.png" /></div>
<div><img src="css/slider_40reductionoperatingcosts.png" /></div>
</div>

thank you for all your suggestions.

I hope this helps someone else out!

eswacraw

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

1 year ago

i am jquery slider transparent png white background how can i fix it for ie8. please can you give solution on this

eswacraw

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

1 year ago

please give me step by step how use the code

paveloosha

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

1 year ago

Hi souzadavi2, "cleartype:false" saved my hairs :) Thanks a lot.

mstudioil

Re: Jquery Cycle Plugin and Png Transparency in IE8 and IE7

1 year ago

Thanks the code {background:none !important;filter:none !important;}
I search for long time solution for the PNG problem on IE8.
That help me a lot, the only problem that it kill the effect on IE8, maybe there is better solution?

Response title

Attachments

jQuery Forum