Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript fade in/out thumbnails scroller

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #36544
    dynamyc
    Member

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.