Pan photo with keys and on touch device

JavaScript
1

I have the following pen that allows a visitor to pan a photo using a mouse: https://codepen.io/gandalf458/pen/yLYWpgy

I would like to be able to do so using left and right arrow keys and on a touch device, but I’m stuck.

Any suggestions, please?

1 Like
2

Hi there Gandalf,

as I don’t have a “Smart Phone” I can’t help with
“touch”, but here is the left and right arrow code…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Official school photos</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
body {
  background-color: #f9f9f9;
  font: normal 1em / 1.5em verdana, helvetica, arial, sans-serif;
}

h1 {
  font-size: 1.33em;
  color: #444;
  text-align: center;
  text-transform: capitalize;
}
h2 {
  font-size: 1.12em;
  color: #444;
  text-align: center;
}
p {
  text-align: center;
}
#photo {
  background-image: url( http://www.southgatecountyschool.co.uk/school-photos/photo-1930.jpg);
  background-position: 50% 0;
  height: 35em;
  max-width: 50em;
  margin: 1em auto;
  border: 1px solid #999;
  box-sizing: border-box;
  box-shadow: 0.32em 0.32em 0.32em rgba(0, 0, 0, 0.3);
  transition: background-position 0.3s ease;
}   
</style>

</head>
<body>

<h1>Official school photos</h1>
<p>Use left and right arrow keys to pan left and right</p>
<h2>1930</h2>
<div id="photo"></div>

<script>
(function( d, w ) {
   'use strict';

  var count = 50, image = d.getElementById( 'photo' );

  w.addEventListener( 'keydown', function (e) {

    if ( e.keyCode === 37 && count > 1 ) { count = count - 1; }
    if ( e.keyCode === 39 && count < 100 ) { count = count + 1; }
  	
  	image.style.backgroundPosition =  count + '% 0';

  });
 
}( document, window ));
</script>

</body>
</html>

coothead

3 Likes
3

Thanks @coothead.

4

Hi there Gandalf,

note that I edited the post at 2.00pm GMT,
with a simplification of the script. Make sure
that your not using code prior to that time. :winky:

coothead

5

Hi there @coothead

Thanks and noted. And I’ve simplified it further still :wink:

G

6

Are you going to post this modification?

coothead

7

'Tis in the updated codepen.

8

Do touch devices have left and right keys?

Why don’t you just let touch devices swipe left as they usually would.

e.g.

1 Like
9

That sounds like just what I want. Thanks @PaulOB

1 Like
10

You can remove the touchstart code as I was just using that for testing.

  // detect touch
  if ("ontouchstart" in document.documentElement) {
    return;
  }
1 Like
11

I’ve implemented the changes but I’ll have to wait till tomorrow to wind up my ancient tablet.

12

Hope it’s not too old as support for anyhover media queries are modern browsers only.

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.