Scroll background image left to right or up and down.
Hello, I'm fairly new to JQuery, and am using some coding I found online to scroll a background image vertically based on the height of the mouse in the browser window. This works fine for the image that are taller than they are wide, but doesn't work so well for images that are wider than they are tall.
I'm pretty sure a couple of if else-if statements can solve my problem, I just can't figure out where to put them. Could someone help me locate the code that re-sizes the background image to fit the browser window?
Here's the code:
- <script type="text/javascript">
$(function() {
//current thumb's index being viewed
var current = -1;
//cache some elements
var $btn_thumbs = $('#fp_thumbtoggle');
var $loader = $('#fp_loading');
var $btn_next = $('#fp_next');
var $btn_prev = $('#fp_prev');
var $thumbScroller = $('#thumbScroller');
//total number of thumbs
var nmb_thumbs = $thumbScroller.find('.content').length;
//preload thumbs
var cnt_thumbs = 0;
for(var i=0;i<nmb_thumbs;++i){
var $thumb = $thumbScroller.find('.content:nth-child('+parseInt(i+1)+')');
$('<img/>').load(function(){
++cnt_thumbs;
if(cnt_thumbs == nmb_thumbs)
//display the thumbs on the bottom of the page
showThumbs(2000);
}).attr('src',$thumb.find('img').attr('src'));
}
//make the document scrollable
//when the the mouse is moved up/down
//the user will be able to see the full image
makeScrollable();
//clicking on a thumb...
$thumbScroller.find('.content').bind('click',function(e){
var $content= $(this);
var $elem = $content.find('img');
//keep track of the current clicked thumb
//it will be used for the navigation arrows
current = $content.index()+1;
//get the positions of the clicked thumb
var pos_left = $elem.offset().left;
var pos_top = $elem.offset().top;
//clone the thumb and place
//the clone on the top of it
var $clone = $elem.clone()
.addClass('clone')
.css({
'position':'fixed',
'left': pos_left + 'px',
'top': pos_top + 'px'
}).insertAfter($('BODY'));
var windowW = $(window).width();
var windowH = $(window).height();
//animate the clone to the center of the page
$clone.stop()
.animate({
'left': windowW/2 + 'px',
'top': windowH/2 + 'px',
'margin-left' :-$clone.width()/2 -5 + 'px',
'margin-top': -$clone.height()/2 -5 + 'px'
},500,
function(){
var $theClone = $(this);
var ratio = $clone.width()/120;
var final_w = 400*ratio;
$loader.show();
//expand the clone when large image is loaded
$('<img class="fp_preview"/>').load(function(){
var $newimg = $(this);
var $currImage = $('#fp_gallery').children('img:first');
$newimg.insertBefore($currImage);
$loader.hide();
//expand clone
$theClone.animate({
'opacity' : 0,
'top' : windowH/2 + 'px',
'left' : windowW/2 + 'px',
'margin-top' : '-200px',
'margin-left' : -final_w/2 + 'px',
'width' : final_w + 'px',
'height' : '400px'
},1000,function(){$(this).remove();});
//now we have two large images on the page
//fadeOut the old one so that the new one gets shown
$currImage.fadeOut(2000,function(){
$(this).remove();
});
//show the navigation arrows
showNav();
}).attr('src',$elem.attr('alt'));
});
//hide the thumbs container
hideThumbs();
e.preventDefault();
});
//clicking on the "show thumbs"
//displays the thumbs container and hides
//the navigation arrows
$btn_thumbs.bind('click',function(){
showThumbs(500);
hideNav();
});
function hideThumbs(){
$('#outer_container').stop().animate({'bottom':'-160px'},500);
showThumbsBtn();
}
function showThumbs(speed){
$('#outer_container').stop().animate({'bottom':'0px'},speed);
hideThumbsBtn();
}
function hideThumbsBtn(){
$btn_thumbs.stop().animate({'bottom':'-50px'},500);
}
function showThumbsBtn(){
$btn_thumbs.stop().animate({'bottom':'0px'},500);
}
function hideNav(){
$btn_next.stop().animate({'right':'-50px'},500);
$btn_prev.stop().animate({'left':'-50px'},500);
}
function showNav(){
$btn_next.stop().animate({'right':'0px'},500);
$btn_prev.stop().animate({'left':'0px'},500);
}
//events for navigating through the set of images
$btn_next.bind('click',showNext);
$btn_prev.bind('click',showPrev);
//the aim is to load the new image,
//place it before the old one and fadeOut the old one
//we use the current variable to keep track which
//image comes next / before
function showNext(){
++current;
var $e_next = $thumbScroller.find('.content:nth-child('+current+')');
if($e_next.length == 0){
current = 1;
$e_next = $thumbScroller.find('.content:nth-child('+current+')');
}
$loader.show();
$('<img class="fp_preview"/>').load(function(){
var $newimg = $(this);
var $currImage = $('#fp_gallery').children('img:first');
$newimg.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(2000,function(){$(this).remove();});
}).attr('src',$e_next.find('img').attr('alt'));
}
function showPrev(){
--current;
var $e_next = $thumbScroller.find('.content:nth-child('+current+')');
if($e_next.length == 0){
current = nmb_thumbs;
$e_next = $thumbScroller.find('.content:nth-child('+current+')');
}
$loader.show();
$('<img class="fp_preview"/>').load(function(){
var $newimg = $(this);
var $currImage = $('#fp_gallery').children('img:first');
$newimg.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(2000,function(){$(this).remove();});
}).attr('src',$e_next.find('img').attr('alt'));
}
function makeScrollable(){
$(document).bind('mousemove',function(e){
var top = (e.pageY - $(document).scrollTop()/2) ;
$(document).scrollTop(top);
});
}
});
</script>