Sliding a large image across the screen

Hi Guys,
I am working on setting up a image that is over 7000 px wide and i want it to slide back and forth when you roll over the edges.
Please review here
http://creativeness.com/MLK_POC/MLK_proof_rfa.html

Right now I had set it up to jump to center to start and then using jquery localscroll I jump to certain divs by clicking on the bottom right buttons in the link. But right now I need it to scroll right and left by rolling over the buttons in the middle of the sides. Any ideas?
I want it to scroll smoothly on rollover until you reach the ends then go no where else.
All help is really appreciated.
Thanks,
Randy
CREATiVENESSAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Appologies for not posting earlier - was a bit tied up.

Here is some sample code that I think will do the trick. You can play with the animation speed. I used a gradient to emulate large image - you will need to use in FF
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
// Some parameters
var imageWidth = 2000;
var viewPortWidth = 600;
var animationSpeed = 5000; // Increase for slower animation, decrease for quicker
var delta = imageWidth - viewPortWidth;
var imageId = '#sampleimage';

$(function() {
  $('a.navigate.').hover(
    function() {
    var left = ($(this).attr('id') == 'forward') ? '-' + delta + 'px' : 0;
    $(imageId).animate({left: left}, animationSpeed);
  },
  function() {
    $(imageId).stop();
  }
  );
});
</script>
<style type="text/css">
#viewport {
   width: 600px;
   height: 200px;
   overflow: hidden;
   position: relative;
   margin: 300px auto 0 auto;
   z-index: 1;
}
#sampleimage {
   width: 2000px;
   height: 200px;
   position: absolute;
   background: -webkit-gradient(linear, left top, right top, from(#fff), to(#000)); /* for webkit browsers */
   background: -moz-linear-gradient(left,  #fff,  #000); /* for firefox 3.6+ */ 
   z-index: 1;
}
a.navigate {
  text-decoration: none;
  display: block;
  opacity: 0.5;
  color: #aaaaff;
  width: 75px;
  height: 200px;
  position: absolute;
  font-size: 50px;
  background: #555;
  z-index: 200;
  top: 0;
  text-align: center;
  line-height: 200px;
}
#backward {
  left: 0;
}
#forward {
  right: 0;
}
</style>
</head>
<body>
<div id="viewport">
  <div id="sampleimage"></div> 
  <a href="#" id="forward" class="navigate">&gt;</a>
  <a href="#" id="backward" class="navigate">&lt;</a>
</div>
</div>
</body>
</html>

Open in new window

0
 
Julian HansenCommented:
0
 
CREATiVENESSAuthor Commented:
Well I would like to concentrate it to the buttons though. Maybe using a code like this.

 	function goRight() { 
	    document.images['ball1'].style.left = parseInt(document.images['ball1'].style.left)+2 +"px"; 
	} 
	function goLeft() { 
	 	document.images['ball1'].style.left = (parseInt(document.images['ball1'].style.left)-2) +"px"; 
 	} 
	

Open in new window


Than using a setInterval or something to use on a rollover and rollout. Any Ideas? Thanks.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Julian HansenCommented:
So you want it to pan when you click the buttons or mouse over them?
0
 
CREATiVENESSAuthor Commented:
mouseover would be preferred.
0
 
Julian HansenCommented:
Ok, but do you want the scroll to happen with the mouse over or with a click?
0
 
CREATiVENESSAuthor Commented:
when you rollover the buttons it should move and when you rollout it should stop.
0
 
Slick812Commented:
greetings : CREATiVENESS, , I wasn't going to post here, but no one has offered any suggestions to "Move" your image. I do image animation all the time, and to me it is not difficult. You start by setting the image to an absolute position, If it is in a "Container" you MUST set the container to relative position, for this to work. Next set three variables, one to keep track of the changing position as posY , one to have the DOM of the image, and one to change the "Stop position" as imgStop .  In the function you add or subtract to the posY the number of pixels to move per frame, change the top or left or both of the style of the DOM image object domR ,  Be sure to stop the animation by testing for  "less than" or " greater than" the  imgStop value.  Some code below. If you have not done this sort of thing before, do NOT try first on your production page, try some animations on a "Test" page, with simple movements, to get a working knowledge of this method, then apply it to your large image. You can get the movement started with a onmouseover="moveit( )" for an image or container, you'll need to add a "stopIt" variable if you want to stop the animation with a onmouseout="stopIt( )"

<script>
var posY=-208;
var imgStop = -1;
var domR = document.getElementById("rocket1");

function soar2( ){
    posY+=4;
    domR.style.top=posY+'px';
    if (posY < imgStop) setTimeout("soar2( )",30);
    }
</script>
<img id="rocket1" src="rockt.jpg" width="240" height="75" style="position:absolute;top:-208px;right:16pxz-index:2;"/>

Open in new window


ask questions if you need more info
0
 
Julian HansenCommented:
Any reason for the B rating ...?
0
All Courses

From novice to tech pro — start learning today.