Response title
This is preview!
Move this topic
Initially for this page I was using Simple Gallery Controls for this page which used jquery and worked fine. However since switching to jQuery Cycle Plugin I notice the gallery displays artifacts in the images as it cycles through them. Is there anyway that I can fix this for IE8 and IE7?
4
Replies(27)
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.
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.
Leave a comment on capnhud's reply
Are you still having a problem with this? I just checked your page with IE8 and it looks good.
Leave a comment on malsup's reply
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.
Leave a comment on capnhud's reply
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.
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.
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.
Leave a comment on malsup's reply
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.
Sample issue here. http://demo.thaiis.biz/cycle/
will see a black shadow not transparent. During move to change slide.
Please advice.
Leave a comment on tumrai's reply
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
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
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;}
#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;}
This worked for me! Thank you.
Leave a comment on suldan's reply
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?
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
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.
Leave a comment on myradon's reply
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
Leave a comment on myradon's reply
My solution was to remove all references to opacity in the plugin. Since I'm only using the scroll effect, works for me.
Leave a comment on jeremydouglas's reply
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.
It is not limited to the cycle plug-in however, I ran into the problem with all custom fade effects that use variable transparency.
Leave a comment on frobdfas's reply
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 ...
Hope this helps someone ...
Leave a comment on fatfreeinteractive's reply
I found that suldan's solution above worked for me as well.
#image-container img {background:none !important;}
Thanks.
Leave a comment on lao3d1's reply
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
Thanks in advance
Update : I just blocked my lightning effect from ie so problem solved
Leave a comment on kulerbox's reply
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:
For more exemplo go to official cycle plugin website: http://malsup.com/jquery/cycle/
My Blog
http://www.linknacional.com.br/criar-site
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
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>
Leave a comment on souzadavi2's reply
neither
#image-container img {background:none !important;} or
#image-container img {background:none !important;filter:none !important;}
#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?
Leave a comment on testchromium's reply
@malsup - posted this elsewhere, and it did the trick for my issue...
set this:
cleartypeNoBg: true
set this:
cleartypeNoBg: true
Leave a comment on jawshchevyvan's reply
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!
Leave a comment on chadpriest's reply
i am jquery slider transparent png white background how can i fix it for ie8. please can you give solution on this
Leave a comment on eswacraw's reply
please give me step by step how use the code
Leave a comment on eswacraw's reply
Hi souzadavi2, "cleartype:false" saved my hairs :) Thanks a lot.
Leave a comment on paveloosha's reply
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?
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?
Leave a comment on mstudioil's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to capnhud's question
{"z2655295":[14737000000701708,14737000000703363],"z5158115":[14737000002980031],"z5544987":[14737000002020564],"z5414827":[14737000003648694],"z3122817":[14737000000700235,14737000000702247,14737000000703353,14737000000705057],"z4984616":[14737000001683659],"z3297233":[14737000000782301],"z4295904":[14737000001192322],"z21558665":[14737000003579060],"z19293735":[14737000003341721,14737000003341723],"z3911501":[14737000000943681,14737000001312913],"z4159732":[14737000001155118,14737000001206076],"z3931249":[14737000001324385],"z8673201":[14737000003088383],"z5854504":[14737000002150277],"z1455793":[14737000000731952],"z5684298":[14737000002067831],"z5187042":[14737000001868369],"z8034861":[14737000002886590],"z7865850":[14737000003943172],"z8746706":[14737000003103363]}
