Question

I have been dabling with a javascript image panner to which I have hacked and shredded together from code on here… I have now abandoned this for a simpler method but need advice on how to do a couple of things.

I have this code for left and right buttons.

<div id="wrap">

<div class="entrance-hall pan-image">


</div>
</div>

<input type="button" value="Move Left" class="nav-left" onclick="pan_animate('-=20%')"  />
<input type="button" value="Move Right" class="nav-right"  onclick="pan_animate('+=20%')" />

and this for the javascript.

function pan_animate(px) {
$('.pan-image').animate({
    'marginLeft' : px
});
}

It pans an image left or right 20% within the wrapping div however I want to…

1. make it scroll smoothly rather than in increments of a percentage
2. stop going past the edge of the left and right container
3. start at the center of the image.

Not asking for much eh? Hope this makes sense and someone can help!

Cheers.

css added

#wrap {
margin-bottom:60px;
border:4px solid white;
overflow:hidden;
}


 .pan-image {
position:relative;
width:2106px; 
height:395px;
left:50%;
margin-left:-1053px;
 }

 /* -- ===entrance hall=== -- */

.entrance-hall { 
background:url(/staging/kennawayhouse.org.uk/images/1-entrance-hall.jpg);
}

Answer 1

• Make it scroll smoothly rather than in increments of a percentage

One way to achieve this is simply using easing functions. From the jQuery animate api:

Easing

The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

Your code could be then, changed to:

function pan_animate(px) {
    $('.pan-image').animate({'marginLeft' : px}, 'linear'); // Swing and Linear comes in jQuery, but swing is the default value.
}

And some smooth will be perceived.

• Stop going past the edge of the left and right container

This one will need some css hack, but position:absolute;left:5x;top:5px may solve your problem about the inner element. If you want an answer more accurate than may, you can post your css code.

EDIT

Based on your css code, I’ve achieved a function that alert if your margin has trespassed the limit of it’s parent when moving:

function pan_animate(px) {
    
    $marginLeftCss = $(".pan-image").css("marginLeft").replace(/[^-\d\.]/g, '');
    $n = px.replace(/[^-\d\.]/g, '');
    $x = (px.indexOf("-")==0) ? 1 - ($n/100):($n/100);
    
    $marginLeft = $marginLeftCss * $x;
    
    $width = $(".pan-image").width();
    $width += $(".pan-image").parent().width();
    
    if($marginLeft > - $width && $marginLeft < $width) //4212 = width*2
        $('.pan-image').animate({'marginLeft' : px}, 'linear');
    else
        alert("pan image reached it\'s end "  + $marginLeft);
}

You can check it a fiddle: http://jsfiddle.net/brunovieira/3wHn3/7/

• Start at the center of the image.

In order to center your $(".pan-image") elements you can use two approaches, the css one: position:relative;margin-left:auto;margin-right:auto, or, in case position relative is not an option, you can center your element using jQuery like:

$parentHeight = $(".pan-image").parent().height();
$parentWidth = $(".pan-image").parent().width();

$panImageHeight = $(".pan-image").height();
$panImageWidth = $(".pan-image").width();

$(".pan-image").css('position','absolute','top',($parentHeight - $panImageHeight)/2 + 'px', 'left',($parentWidth - $panImageWidth)/2+'px');

Again, depending of your coding, the conditions above answered may not work.