iPicture, a jQuery plugin, is perfect for such cases and allows us to place tooltips over any desired location of images.
Once the user hovers/clicks the pointers, the tooltip is displayed with its pre-defined content.There are several options for customizing the functionality including the ability to use different pointer images for each tooltip or their animation types.
Also, iPicture has a handy
initialize function that saves so much time by enabling a configuration wizard where we can place pointers + set their definitions with drag ‘n’ drops and the JSON output to be used in the code is created automatically.
- Double tap
This plugin can display the tooltip in any position wanted, plays nicely with image maps and they can be set to follow any element (handy for drag ‘n’ dropped and animated items) or mouse.
Tooltips can be styled completely, there is an optional Themeroller support and they can even be displayed as modal windows.
It has built-in Ajax integration and can load any remote data. qTip2’s website has lots of creative demos including 3rd part service and various popular plugin integrations.
File Upload widget with multiple file selection, drag&drop support, progress bar and preview images for jQuery.Supports cross-domain, chunked and resumable file uploads.
Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.
I’m currently a little busy with some projects. In one of these projects I had to add a drag-and-drop behavior to some DOM elements, and for that I have created the EasyDrag jQuery plug-in that I’ll share with you now.
Its main purpose is to add the ability to drag and drop almost any DOM element without much effort. So it’s simple to use and you can also attach handlers both to the drag and to the drop events, which permits you to extend the basic functionality to whatever you need.
With Mapz you can easily create draggable image maps by just calling one function and by using some simple and clean HTML mark-up.This plugin lets you create draggable image maps.
- Draggable map which means there are no image dimension limits.
- Zooming, no limit on the number of zooming levels.
- Zoom by arrow keys or by mousewheel (note: when using zoom by mousewheel, you’ll need Brandon Aaron’s mousewheel plugin)
- Use HTML <map> elements to create links inside your image maps. Let the plugin create multiple image maps for the different zooming levels.
jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. jqDnR provides the all the basic elastic functionality most dialogs will need. Basic and simple and easy to use.
- Drag + Drop Element Posistioning
- South East Resizing
- Definable Drag and Resize “handles”
- Translucent Dragging, Preservation of Original Opacity
In this tutorial, we’ll be learning how to utilize jQuery UI to create a highly-functional user interface without using anything else. By the end, you should be familiar with jQuery UI, some of its components, and basic understanding of jQuery UI customization. Ultimately, we’ll be building a user interface akin to windows, with dialog boxes that are draggable, resizable, minimizable and maximizable.