Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Jquery / Fancybox / farinspace glitch

    Hi,

    I've created a photo gallery which has the thumbnails in a div below a preview area div. Once a thumbnail is clicked, the preview area shows a larger version of the thumbnail image. I'm using both fancy box and farinspace.

    The small glitch I have is that when changing images, there is a moment when the thumbnail bar is being displayed in the preview area. It's brief, but annoying, and I can't figure it out.

    Occassionally, the problem isn't visible, so I assume the problem is with the pre-load.

    www.artmarcsimon dot com

    Thanks

    Javascript
    Code:
    // JavaScript Document
    
        $(document).ready(function(){                  
        $('.gallery_thumbnails a').click(function(e){
                                                 
        e.preventDefault();
        // set up vars from thumbnail   
        var photo_caption = $(this).attr('title');   
        var photo_fullsize = $(this).attr('href');
        var photo_preview = photo_fullsize.replace('_fullsize','_large');
       
        $('.gallery_preview').fadeOut(200, function(){
       
            $('.gallery_preload_area').html('<img src="'+photo_preview+'"/>');
            $('.gallery_preload_area img').imgpreload(function(){
                                                          
                $('.gallery_preview').html('<a class="overlayLink" href="'+photo_fullsize+'" title="'+photo_caption+'" style="background-image:url('+photo_preview+');"></a>');
                $('.gallery_caption').html('<p>'+photo_caption+'</p>');                                           
                $('.gallery_preview').fadeIn(200);   
               
                setFancyboxLinks();
                updateThumbnails();
           
            });
       
       
       
            });   
       
        });                                                                    
       
        // initialize gallery on load
        var first_photo_caption = $('.gallery_thumbnails a').first().attr('title');   
        var first_photo_fullsize = $('.gallery_thumbnails a').first().attr('href');
        var first_photo_preview = first_photo_fullsize.replace('_fullsize','_large');
       
        $('.gallery_preview').fadeOut(200, function(){
       
                $('.gallery_preload_area').html('<img src="'+first_photo_preview+'"/>');
                $('.gallery_preload_area img').imgpreload(function(){
                                                          
                    $('.gallery_preview').html('<a class="overlayLink" href="'+first_photo_fullsize+'" title="'+first_photo_caption+'" style="background-image:url('+first_photo_preview+');"></a>');
                    $('.gallery_caption').html('<p>'+first_photo_caption+'</p>');                                           
                    $('.gallery_preview').fadeIn(200);   
               
                    setFancyboxLinks();
                    updateThumbnails();
           
                });
       
        });   
       
    });
       
       
    function setFancyboxLinks(){
       
        $('a.overlayLink').fancybox({
                                   
            'titlePosition' : 'inside',
            'overlayColor' : '#000',
            'overlayOpacity' : 0.8,
            'transitionOut' : 'none',
            'transitionIn' : 'none',
            'autoScale' : true
       
        });
       
    }
    
    function updateThumbnails(){
       
        $('.gallery_thumbnails a').each(function(){
           
            if ( $('.gallery_preview a').attr('href') == $(this).attr('href') ){
                $(this).addClass('selected');
                $(this).children().fadeTo(250, .4);
            }else{   
                $(this).removeClass('selected');
                $(this).children().css('opacity', '1');
               
            }
                                                 
        });

  • #2
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hi

    Hi I have the same problem as you! I saw your website and it seems like you've solved the problem, could you please tell me how you did that because it's been driving me mad and I can't seem to find anything online!

    Thanks in advance.

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    25
    Thanks
    0
    Thanked 1 Time in 1 Post
    I think the problem is with FOUC(flash of unstyled content) as per jquery document before the dom has been properly loaded by the browser the unstyled content may get displayed and then your code will be excuted on document.ready function,to overcome this use the oldschool method of visibilty:hidden and visibilty:visible before and after domready

    See an example here which i faced while dealing with jquery tabs

    Overcoming FOUC example in jQuery tabs


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •