Home › Forums › JavaScript › fade in/out thumbnails scroller
- This topic is empty.
Viewing 1 post (of 1 total)
-
AuthorPosts
-
February 7, 2012 at 5:31 pm #36544dynamycMember
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. -
AuthorPosts
Viewing 1 post (of 1 total)
- The forum ‘JavaScript’ is closed to new topics and replies.