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.

Twitter

15 September 2014 "We're happy to have made the brand new website for @StBasilsCharity http://t.co/JcfkQefVWE ...proud to be helping such a great local cause"

15 August 2014 "@classcreative we had it designed and built, we can put you in touch with the designer if you are interested in anything bespoke."

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
© 2014 One Black Bear