views:

27

answers:

0

This is a small issue which started to appear in most browsers (as far as I know) after I added the liveQuery library together with the jQuery .load function.

LiveQuery is working just fine but since I have a opcaity effect on my portfolio that upon pageload lowers the opacity down to 0.6 on my thumbs via the following code;

// 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 issue that occurs is that when I switch page using the navigation in the footer (which is in first hand based on jQuery .load), liveQuery is reloading the DOM and lowering the opacity down to 0.6 first after the page is successfully loaded. The visual result of this would be that the .thumbs are unaffected by the opacity for a second, whereafter liveQuery initiates and successfully lowers the opacity as it is supposed to do.

I'm not encountering this problem with php-include for obvious reasons, but I find .load very handy and I can't seem to find a working fix for this!

The code above is placed at the top in a separate JS-file (right under $(document).ready(function() {). The three JS files are loaded in the following order in index.php.

jQuery main JS -> jQuery liveQuery JS -> custom JS

In the custom JS, at the bottom, the .load scripts are written as the following string. #content is the main-div used for the content of the links in index.php.

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

One possible fix that came to my mind was to add opacity on .thumb using CSS. But that would also fade out the images for users who have disabled JS completely which is something I wouldn't want. I could perhaps add another line of code for the hover-effect on .thumb that increases opacity to 1.0 again but I was hoping for a better way of solving this.

The page can be found at http://patrikarvidsson.com/project/portfolio/

I am still very new to jQuery but I am fairly sure I am missing something here.

UPDATE #1

It seems that upon deleting Fancybox, this issue was automatically fixed as well. Now, I do not plan on using fancybox anymore and instead move over to colorbox which seemed to work better overall with IE. I did however give colorbox a quick try and with it activated, this issue is again recreated.

This is the JS-code for the fancybox plugin, which is loaded after the above JS code for the opacity. I suspect it is the culprit here.

// FancyBox toggle for Portfolio Page + liveQuery

$("a.thumb").fancybox({
    'transitionIn'    :    'fade',
    'transitionOut'    :    'fade',
    'speedIn'        :    200, 
    'speedOut'        :    150, 
    'titlePosition'     :     'over',
    'overlayShow'        :    true
});

$("a.thumb").livequery(function(){ 
 $(this).fancybox({
        'titleShow' : false
    }); 
});


$("a[rel=digitalart]").fancybox({
    'transitionIn'        : 'fade',
    'transitionOut'        : 'fade',
    'titlePosition'     : 'over',
    'titleFormat'        : function(title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    }
});


$("a[rel=photography]").fancybox({
    'transitionIn'    : 'fade',
    'transitionOut'    : 'fade',
    'titlePosition'     : 'over',
    'titleFormat'        : function(title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    }
});