jQuery Plugin - Draggable Images

Tuesday 11th November 2008

One of more interactive projects of late required an image to be moved around as if the user was dragging it. There was also a good chance that it would need to be combined with some other effects such as a zoom feature an image switcher.

Currently, most draggable image plugins use an inline image with absolute positioning and a surrounding clipping area, which in most cases is fine, but in this case it would be a real issue as the zoom plugin uses an absolute positioned container. To get around this I decided to convert the image inside the container to the background image.

For all those people who don't have javascript turned on you just see a clipped image, but those with javascript can move the background image around as if they are dragging it.

  • Quick and simple demo page is here
  • Minimised js is here
  • A more fancy mash-up of this and the zoom plugin can be found here.

As ever all of these jQuery gubbins can be found over at the jQuery plugin site.


03 March 2015 "RT @RozGolds: Today we're filming for a new @nationalexpress with the lovely Bob + @oneblackbear. Come on sun keep that hat on! http://t.co…"

19 February 2015 "RT @thamudube: Brilliant training day spent with the #HondaBikes guys sharing insights into #social / #digital marketing. cc @shadowgiants …"

11 February 2015 "RT @millersjon: So, Twitter is buzzing with news of #DriverlessCars again. Here's something I wrote a while back: http://t.co/xQlzLAM92u"

Follow us @oneblackbear

One Black Bear Limited, The Old School House, 191 Fazeley Street, Birmingham B5 5SE
Call 0121 227 4444 or email info@oneblackbear.com
© 2015 One Black Bear