How do I script such that my panoramic image can be panned left and right up to its edges?

Question

Say my image (panoramic) is 10,000 pixels long, but I want to be able to view only 1000 pixels wide at a time, and in order to view more of it, I can just hover my mouse either left or right, and then the image will move accordingly please? If possible, a simple script on HTML? (I'm not sure how to use Javascript or CSS, but if it needs to come down to that, do guide me step by step?

Thank you.

Answer 1

Here is a simple JQuery which you can use to scroll the whole page when hovering over either the left or right;

Example - https://jsfiddle.net/38da9pca/

Need any help implementing it just leave a comment and I will try and help you.

$(function() {
                $('#right').on('mouseenter', rscroll);
                $('#left').on('mouseenter', lscroll);
                $('#right, #left').on('mouseleave', function() {
                    $('body').stop();
                });

                function rscroll() {
                    $('body').animate({
                        scrollLeft: '+=25'
                    }, 10, rscroll);
                }

                function lscroll() {
                    $('body').animate({
                        scrollLeft: '-=25'
                    }, 10, lscroll);
                }
            });

Edit (Scroll Image Only)

Example - https://jsfiddle.net/38da9pca/1/

I have change it so the lscroll and the rscroll will effect the id of image instead of the body and change it from scrollLeft to left, and that way it will move the images scroll. Dont forgot to change the $('body').stop(); to $('#bg').stop(); or it will never stop scrolling

$(function() {
                $('#right').on('mouseenter', rscroll);
                $('#left').on('mouseenter', lscroll);
                $('#right, #left').on('mouseleave', function() {
                    $('#bg').stop();
                });

                function rscroll() {
                    $('#bg').animate({
                        left: '-=25'
                    }, 10, rscroll);
                }

                function lscroll() {
                    $('#bg').animate({
                        left: '+=25'
                    }, 10, lscroll);
                }
            });

Answer 2

Here's one. It's using jquery (javascript library). You would have to add it in order to make it work.

Example: http://www.gayadesign.com/scripts/jqueryphotonav/

Tutorial: https://blog.gaya.ninja/articles/jquery-convertion-panoramic-photoviewer-in-javascript/

Answer 3

Something like this?

var imgView = document.querySelectorAll('.img-view')[0];
var img = imgView.querySelectorAll('img')[0];

imgView.onmousemove = function(e) {
  var x = e.clientX;
  
  var px = ((x / this.offsetWidth) * 100);
  
  var ix = ((px / 100) * img.offsetWidth);
  
  img.style.left = '-' + (ix - this.offsetWidth) + 'px';
}

.img-view {
  width: 256px;
  height: 160px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ddd;
}

.img-view img {
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
}

<div class="img-view">
  <img src="http://panoramalove.com/wp-content/uploads/2013/01/nighttime-panoramic-view-of-hong-kong-island-from-the-avenue-of-stars-in-tsim-sha-tsui.jpg">
</div>