<p>I am looking for some JavaScript plugin (preferably jQuery) to be able to scroll through an image, in the same way that <a href="http://maps.google.com" rel="noreferrer">Google Maps</a> works.</p>

<p>I can make the image draggable but then I see the whole image while dragging even if the parent div is <code>overflow:hidden</code>.</p>

<p>Any help would be greatly appreciated!</p>

[{'answer_id': 66669, 'author': 'peregrine', 'author_id': 376422, 'author_profile': 'https://Stackoverflow.com/users/376422', 'pm_score': 2, 'selected': False, 'text': '<p>You could use the google maps api...they allow for you to use it with custom images. And you can choose if the controls show up or not.</p>\n\n<p>EDIT: Found a decent tutorial on how to do this.\n<a href="http://mapki.com/wiki/Add_Your_Own_Custom_Map" rel="nofollow noreferrer">http://mapki.com/wiki/Add_Your_Own_Custom_Map</a></p>\n'}, {'answer_id': 66703, 'author': 'Paul Dixon', 'author_id': 6521, 'author_profile': 'https://Stackoverflow.com/users/6521', 'pm_score': 2, 'selected': False, 'text': '<p>Check out the <a href="http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp" rel="nofollow noreferrer">Google Maps Image Cutter</a> It can take any image or digital photo and cut it into tiles which are displayed on a Google Map. Might be a quick way to do what you need...</p>\n'}, {'answer_id': 66719, 'author': 'Adam Davis', 'author_id': 2915, 'author_profile': 'https://Stackoverflow.com/users/2915', 'pm_score': 1, 'selected': False, 'text': '<p>This has less to do with javascript and more to do with the <a href="http://www.w3.org/TR/CSS2/visufx.html" rel="nofollow noreferrer">CSS coding</a>.</p>\n\n<p>Try a few experiments with just HTML and CSS to get the image to clip properly, then add the javascript to move it around.</p>\n\n<p>If you can\'t get it to clip with HTML, or move with the javascript post the simplest demonstration of the problem here for us to debug.</p>\n\n<p>Without the code we\'re shooting in the dark.</p>\n'}, {'answer_id': 66829, 'author': 'Rob Wells', 'author_id': 2974, 'author_profile': 'https://Stackoverflow.com/users/2974', 'pm_score': 2, 'selected': False, 'text': '<p>For a good description of the underlying technology have a look at Chapter 4 (if I recall correctly) of the Pragmatic  Programmers\' book <a href="http://pragprog.com/titles/ajax/pragmatic-ajax" rel="nofollow noreferrer">Pragmatic Ajax</a>.</p>\n\n<p>You\'ll see how the image slicing and dicing works under the covers. And the zooming.</p>\n'}, {'answer_id': 96641, 'author': 'NickFitz', 'author_id': 16782, 'author_profile': 'https://Stackoverflow.com/users/16782', 'pm_score': 0, 'selected': False, 'text': '<p>Google Maps uses images sliced into blocks which are dynamically loaded as the user pans in different directions. The <a href="http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp" rel="nofollow noreferrer">Google Maps Image Cutter</a> Paul Dixon mentions is the tool you want for this.</p>\n\n<p>If you just want to pan one large image, rather than have the additional complexity of slicing the image up into blocks, then instead of using the CSS overflow property, you should use the <a href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" rel="nofollow noreferrer">clip</a> property. This is supported on all browsers worth thinking about, down to IE4 if I remember correctly.</p>\n\n<p>One point to note: the CSS2.1 spec shows examples with the rect values separated by commas. However this isn\'t supported by IE6 (perhaps not IE7, either). However all other browsers understand the version without commas. So instead of</p>\n\n<pre><code>clip: rect(5px, 40px, 45px, 5px);\n</code></pre>\n\n<p>you should use</p>\n\n<pre><code>clip: rect(5px 40px 45px 5px);\n</code></pre>\n\n<p>for compatibility.</p>\n\n<p>You need a container &lt;div&gt; set to position:relative around the &lt;img&gt; element, which you then set to position: absolute. </p>\n\n<p>So the basic technique is to update the top and left values as the user drags, use these together with the defined width and height of the view onto the image to create the appropriate rect() string, and update the top, left, and clip properties of the &lt;img&gt; element\'s style property.</p>\n\n<p>Don\'t do what I did and leave out the "px" after the values in the rect() string. It took me ages to realise why it wasn\'t working :-)</p>\n'}, {'answer_id': 1303599, 'author': 'mooware', 'author_id': 35951, 'author_profile': 'https://Stackoverflow.com/users/35951', 'pm_score': 3, 'selected': True, 'text': '<p>I may be a little late to the party, but I was just looking for the same thing. What I stumbled upon is <a href="http://code.google.com/p/jquery-scrollview/" rel="nofollow noreferrer">scrollview</a> for jquery, it works perfect and does exactly this google maps-like drag-to-scroll for overflowed divs.</p>\n'}, {'answer_id': 3099348, 'author': 'Dominic', 'author_id': 373932, 'author_profile': 'https://Stackoverflow.com/users/373932', 'pm_score': 3, 'selected': False, 'text': '<p>(I\'m super late to this now dead party, but hey, I found this page via a search so...)</p>\n\n<p>Scrollview plugin suggested by mooware didn\'t work for me. </p>\n\n<p>However <strong>Dragscrollable</strong> did: \n<a href="http://plugins.jquery.com/project/Dragscrollable" rel="noreferrer">http://plugins.jquery.com/project/Dragscrollable</a></p>\n\n<p><a href="http://hitconsultants.com/dragscroll_scrollsync/scrollpane.html" rel="noreferrer">Try out the demonstration</a></p>\n'}]
['https://Stackoverflow.com/questions/66649', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/5838/']