TWEagle / galleriffic

Automatically exported from code.google.com/p/galleriffic
0 stars 0 forks source link

Image Preview Problems on IE8 #24

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
Hello,
Thank you for this great plugin but I want to ask a question about a 
problem.

Some thumbnail and original images sometimes have visual problems on 
Internet Explorer 7 & 8. Mostly on the black colors on an image, big white 
spots occur. Those spots sometimes occur bigger, sometimes smaller. On 
Firefox, there is not any problem.
I am sending a screenshot, and an original image for making a compare. 
I marked the problems on screenshot with red color.

Thank you,

Original issue reported on code.google.com by yigitdi...@gmail.com on 1 Sep 2009 at 7:36

Attachments:

GoogleCodeExporter commented 9 years ago
I'm having the same issue in IE 6, 7, and 8

Original comment by designer...@gmail.com on 13 Oct 2009 at 7:47

Attachments:

GoogleCodeExporter commented 9 years ago
I'm having the same issue in IE 6, 7, and 8! All those white spots in the 
image. Is
there a solution yet?

Original comment by nielsdev...@gmail.com on 23 Oct 2009 at 11:10

GoogleCodeExporter commented 9 years ago
http://www.designilez.com/mf/trouwen.php#11

Original comment by nielsdev...@gmail.com on 23 Oct 2009 at 11:13

GoogleCodeExporter commented 9 years ago
From Dan Walker
(http://forum.joomlaworks.gr/index.php?PHPSESSID=eab2713e0cca1ac4803158ac3b82db7
2&topic=2566.msg10513#msg10513):

"After some research, the problem with white dots in IE has something to do an 
IE bug
which shows very dark black as transparent with certain opacity filters. See 
this
forum post: http://dynamicdrive.com/forums/showthread.php?p=118396. The white 
dots
are the white background showing through transparency in the image. The simple 
fix is
to make your background color of the image rotator div black. White dots will 
be gone."

Original comment by trentfoley on 23 Oct 2009 at 2:08

GoogleCodeExporter commented 9 years ago
Hi

I have the problem with the missing pixels in jpg's in IE only.

..but .. because all the images in my slideshow are different sizes I can't 
make the
background of the whole slideshow black.

I've tried making the 'img' background black .. no better.

see my test page here ..
http://actevate.com/tester-009.html

Cheers
E.

Original comment by actevate...@gmail.com on 25 Feb 2010 at 11:36

GoogleCodeExporter commented 9 years ago
I have a solution to this - I have images of dynamic size in my galleriffic 
implementation and so I needed a way of making the slideshow image wrapper have 
a black background but only around the exact perimeter of the child image.

By default the .image-wrapper div is full width so I had to alter this in 
jQuery to give me a dynamic width which was equal to that of the current image 
it wraps. 

Here is the jQuery function I use: 

 jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}

and then I use it like so:

$('.slideshow .image-wrapper').center();

accompanied with the necessary CSS mods:

div.slideshow div.image-wrapper {
    z-index: 10000;
    background-color: #000;
    position: absolute;
    top: 35px;
}
div.slideshow img {
    position: absolute;
    top: 0;
    left: 0;
}

...it gives me exactly what I need - an underlaying div with a solid black 
background, completely invisible under the image and centered with the image in 
the middle of the page. I have a few other elements in my layout which aren't 
in the default galleriffic markup so the top: 35px; property adjusts for that. 
You may find it works with top: 0;

It works in all IE versions and fixes the IE6 problems. I have modified the 
original script and markup so much it is quite possible this relies on some 
other element positioned relatively or something but try it and adapt it 
yourself at least it's a start. :-) try putting text-align: center; in your CSS 
on some of the parent elements like .slideshow if you're running into issues 
centering images. My layout uses the whole screen with very large images and 
I've noticed the method I've described above has no real noticeable effect on 
performance either. Problem solved! ;-)

Original comment by oli...@foxleyphotography.com on 4 Oct 2012 at 4:09