jQuery/CSS image issue. Opera only loading parts of the images for unkown reason.

Question

Not that it's a surprise you encounter daily problems with Internet Explorer, but when you actually do it with a browser like Opera - it kind of throws you off the chair.

I got most things working with Firefox, Chrome and IE (apart from the fact that fancybox isn't validating all the IE-fixes as green, but that's an issue for another time).

Anyway, the problem which I can't seem to figure out is best described with a screenshot!

http://patrikarvidsson.com/stuff/operaissue.jpg

Hover seems to work, lights up the images just as it is supposed to do. But it doesn't seem to correctly show the "faded out" images as it does in the rest of the browsers. As seen above only parts of the images are shown.

Opera-users can see the webpage at hxxp://www.patrikarvidsson.com/project/portfolio

I installed the latest Opera as of today to recreate this for myself, as it was reported by a friend a day ago.

// LiveQuery for Fade-Effect

$(".thumb").livequery(function(){ 
$(".thumb").css("opacity","0.6");
    $(".thumb").hover(function () {
        $(this).stop().animate({
           opacity: 1.0
        }, "fast");
},
 function () {
    $(this).stop().animate({
        opacity: 0.6
        }, "fast");
    });
});

The jQuery .load-code for one of the links;

    $("a.dartLink").click(function(){
    $('div#content').load("content/digitalart.php");
    return false;
});

The link to one of the gallery pages (surrounded by a list);

    <a href="index.php?l=digitalart" class="dartLink gallery"><span>Digital Illustrations</span></a>

The HTML for one of the thumbs;

<div class="thumbbox">
<a rel="digitalart" href="thumblink.jpg" class="thumb" title="Astralis"><img src="images/thumbs/AstralisSmall.jpg" alt="" /></a></div>

On second thought, however, this may not be related to jQuery. I added the CSS tag just in case. Although I still have no idea what is causing this. Unfortunately, since I edited this post, the image and hyperlink limit again applies as I am a new user.

Edited the post. I think I managed to include the needed code now.

Answer 1

Patrik,

This isn't the core of your question (and I will abstain from responding to that until you put up some code that we can analyze), but be careful with the lightbox plugin when using IE. It acts very weirdly when you have a lot of images on the page (i.e. [no pun intended] it will halt the execution of the entire browser and even slow down the operating system until all images are loaded). My solution to this problem was to use the colorbox plugin, which you can find here:

http://colorpowered.com/colorbox/

I find it to be just as snappy as lightbox, except it works perfectly in IE.