Grow your CSS skills. Land your dream job.

fade in/out thumbnails scroller

  • # February 7, 2012 at 5:31 pm

    This is the markup for the thumbnails:

















    and this is the css:

    #bgImages{
    list-style:none;
    position:absolute;
    left:0px;
    bottom:50px;
    height:92px;
    background: url('images/@{ThemePrefix}-bgImages.png');
    }
    #bgImages li{
    position:relative;
    margin:0;
    float:left;
    padding:3px;
    }
    #bgImages img.thumb{
    height:80px;
    margin:0;
    padding:3px 0 0 0;
    cursor:pointer;


    }
    #bgImages li .thumbType{
    opacity:0;
    position:absolute;
    width:20px;
    height:20px;
    right:3px;
    bottom:7px;
    background-color:@ColorFirst;
    }
    #bgImages li .thumbVideo{
    opacity:0;
    background-image: url('images/thumb_video.png');
    }
    #bgImages li .thumbImage{
    opacity:0;
    background-image: url('images/thumb_image.png');
    }

    And here is a part from the main javascript file :

    /* Sub Thumb Gallery */
    function galeriThumbsMouseMove(e)
    {
    // Horizontal Move
    galeriThumbsHorizontalMove(e.pageX);
    // Vertical Move
    if(e.pageY > $('#bgImages').position().top-10 && parseInt($('#bgImages').css('bottom'))<32)
    galeriThumbsMoveUp();
    else if(e.pageY < $('#bgImages').position().top-10)
    galeriThumbsMoveDown();
    }
    function galeriThumbsHorizontalMove(param_pageX){
    if((parseInt($('#bgImages').css('bottom'))>-40 && $('#bgImages').width()>$('#body-wrapper').width())){
    var posTop = parseInt((($('#body-wrapper').width()-$('#bgImages').width())/$('#body-wrapper').width())*param_pageX);
    if(posTop>0)
    posTop=0;
    $('#bgImages').animate({left:posTop}, {queue:false, duration:400, easing:'easeOutQuad'});
    }
    }
    function galeriThumbsMoveUp(){
    $('#bgImages').animate({bottom:32}, {queue:false, duration:300, easing:'easeOutQuad', complete:function(){ } } );
    $('#bgText').animate({bottom:147}, {queue:false, duration:300, easing:'easeOutQuad', complete:function(){ } } );
    }
    function galeriThumbsMoveDown(){
    $('#bgImages').animate({bottom:-0}, {queue:false, duration:300, easing:'easeOutQuad', complete:function(){ } } );
    $('#bgText').animate({bottom:64}, {queue:false, duration:300, easing:'easeOutQuad', complete:function(){ } } );
    }

    function bgImageMove(e){
    if(useFullImage && !useFitMode && activePlayer=='none')
    {
    if($('#body-wrapper').width()< $('#bgImageWrapper .new').width())
    var xPos = parseInt((($('#body-wrapper').width()-$('#bgImageWrapper .new').width())/$('#body-wrapper').width())*e.pageX);
    else
    var xPos = ($('#body-wrapper').width()-$('#bgImageWrapper .new').width())/2;
    if($('#body-wrapper').height()< $('#bgImageWrapper .new').height())
    var yPos = parseInt((($('#body-wrapper').height()-$('#bgImageWrapper .new').height())/$('#body-wrapper').height())*e.pageY);
    else
    var yPos = ($('#body-wrapper').height()-$('#bgImageWrapper .new').height())/2;
    $('#bgImageWrapper .new').animate({left:xPos, top:yPos}, {queue:false, duration:400, easing:'easeOutQuad'});
    }
    }

    function galleryThumbs(activeItem, mode){
    $('#bgImages li a').live('click',function(){
    return false;
    });

    var totalBgImagesWidth = 0;
    $('#bgImages li img.thumb').each(function(){
    totalBgImagesWidth+=$(this).width()+6;
    });
    totalBgImagesWidth+=2;
    $('#bgImages').css('width', totalBgImagesWidth+'px');

    $('#bgImages li').hover(function(){
    $(this).find('img.thumb').stop().animate({opacity:'1'}, 500);
    $(this).find('.thumbType').stop().animate({opacity:'1'}, 500);
    },function(){
    if(!$(this).hasClass('active')){
    $(this).find('img.thumb').stop().animate({opacity:'.3'}, 500);
    $(this).find('.thumbType').stop().animate({opacity:'0'}, 500);
    }
    }).click(function(){
    if(!$(this).hasClass('active') && !bgRunning)
    {
    clearInterval(bgTimer);
    $('#bgImages li').removeClass('active');
    $(this).addClass('active');
    runBg();
    }
    });


    }

    I want to make the bottom thumbnails visible on pageload and when I move my cursor outside of the thumbnails area ( like is now) to have a fadeout effect instead of movedown effect.
    Is this possible? (It’s very important for me)
    And if it’s possible give me some indications of how to do this.

    If you don’t understand exactly what I’m trying to achieve please look at this live example.
    Here is my approach.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".