We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
AJAX-ZOOM player is a powerful single image zoom & pan viewer with optional gallery extension. It features over 300 other options and can be easily integrated into any website, eCommerce solution or CMS.
AJAX-ZOOM uses image tiles to quickly generate a portion of the zoomed image (similar to Google Maps).
In a special 360° rotation mode it can also be used as object spinner.
AnimaDrag is a drag and drop plugin with a very small footprint that allows for animated easing when dragging an element. It has many fewer feature than a jQuery UI draggable widget, but is much smaller and does not depend on UI.
AnimaDrag uses animation, and has full easing support, which jQuery UI draggables do not support. This allows for a richer display of dragging, and is fun to play with.
Mapbox is a plugin for creating zooming, draggable maps of limited size and depth, which have a defined boundary. It has many methods such as the ability to center the map on any given point, zoom in or out, zoom to any particular level, and move in any direction. All of these may also be accomplished either by dragging the map or with the mousewheel in conjunction with the mousewheel plugin.
Contained within a "viewport", each map has the potential for as many layers as is possible performance wise, with the zooming detail being able to be configured in the settings, depending on the smoothness needed (number of transitions) between each layer. It reproduces a Flash app I needed to replace, with the advantage of being much more portable, since it uses natural static HTML elements.
This is a jquery special event implementation of a drag event model. It is intended for use by developers who don't need one bloated script full of idiot-proof logic and a million different options. For people who plan a drag interaction model and decide how to set up pages and position elements, and don't need a script to figure that out...
This plugin leverages the special event api, to add bind-able drop behavior events. This plugin is designed to work exclusively with $.event.special.drag, actually, it doesn't work without it.
Here it is!
Finally I realized the DIV box model of the (mb)Containers!
This is a useful plug in to build full featured and fully skinnable containers.
The container can be set to draggable, resizable, collapsable and minimizable.
A photogallery for extralarge images with navigator.
You can drag your extralarge image in the display by the navigator or the image itself.
Enjoy yourself into images!
jQuery.splitter() plugin implements a two-pane resizable animated window, using existing DIV elements for layout.
For more details and demo visit: http://krikus.com/js/splitter
This jQuery plugin emulates iPod's click wheel contorller. Anyway see the demonstration. I have coded this as a plugin for jQuery, bring your image of click wheel and you will be able to integrate this function to your website easily.
Add "collide: 'block'" or "collide: 'flag'" when you create a draggable:
$(".box").draggable({collide: 'flag'});
or $(".box").draggable({collide: 'block'});
In 'flag' mode overlapping objects receive new classes - 'ui-draggable-overlapping' for the object being dragged and 'ui-draggable-overlapped' for the other object. In 'block' mode objects are blocked from overlapping other objects by being snapped to the edge of the object they collided with.
This doesn't currently play well with constraints because they are applied before the drag event is propagated.
CropZoom is a plugin that let you select an area of an image to crop, also you can zoom in or zoom out, drag and also rotate. this plugins needs ui.droppable, ui.resizable, ui.slider from JQuery UI.
upload dropped file(s) from the filesystem into the browser via ajax to your server.
this project uses the new drag and drop html5 api OR if not supported, the feature of some browsers (safari, chrome, chromium), to drop files onto the tag.
currently the following browsers work with this plugin and hence a multiple file upload via drag and drop is possible with:
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.
Point at an unordered list (or other element) specify a containment size and the list will become draggable. Drag the list up and down to scroll its contents.
Scroll a large nested layer within a viewport using native scroll from the container. It does not require drag and drop functionality from UI and it is faster than UI dragging.
Can be used to build a similar effect as in Google maps where you drag contents of a div acting as a viewport.
I read about dragtable on ajaxian.com. It is a library-independent js-function that gives you the ability to re-order table columns by using drag'n'drop. This function does not exactly fulfill my needs. So I thought to myself 'Why not doing it the jQuery way?'. There is some really cool stuff growing around jQuery (especially jQuery-ui). So I took the jQuery-core and the sortable-Plugin form jQuery-ui and put my stuff on the top of this stack. One weekend and some coffees later this is the result.
********* DragWithStatus ***********
DragWithStatus is a little more comfortable version of the method draggable(). You can make elements draggable with the plugin. The user will get different feedback and information by the moveable elements. You can configure the plugin to change the Mousecursor (when moving over an element), the transparency and the border from the draggable elements to show the user that they are moveable. And you get the x- and y-position of the moving element in the statusline from the browser - if you wish and if the browser will support this.
After I read How to Mimic the iGoogle Interface tutorial, I think that is a very simple way to use Widgets in one of my projects: Gesbit, you can see here a demo. I study the tutorial code and want to put into a jQuery plugin. After some work I finally use this plugin in Gesbit and think that maybe can be useful for other developers.
The plugin as been tested in last version of Firefox, Opera, Internet Explorer, Safari, Konqueror and Chrome browsers. Please try the examples for more details.
EasyDrag is a plugin aimed to provide a simple way of adding drag-and-drop functionality to DOM elements. It features the ability to set functions to be called on drag and on drop events.
Binding event listeners to hundreds of elements in order to accomplish drag and drop can be a very slow task. Then, if you add new items to the page or change the page's content after it has initially loaded, you have to add these event handlers to all of the new elements. This plugin solves both of those problems by using jQuery's live events, otherwise known as event delegation. This means that you can make a certain selector draggable or droppable, and add more items to the page. If the new items fall under that selector, they will be come draggable or droppable automatically - with no work on your part! If speed is an important thing to you, use this plugin! The API is very similar to jQuery UI's draggable and droppable plugins.
Since jQuery UI can fully use prototypal inheritance ($.Widget is a constructor) I decided to use this feature to extend previous widgets like
treeList using draggable, droppable and sortable interactions among nested list items.
Uses the new File API supported by Firefox 3.6. Enables you to target any html element and turn it into a hotspot for receiving files from the file explorer!
Each file will be sent as a binary AJAX-request with customizable GET params. Includes support for callbacks to track the progress and completion of each file and the total transaction.
** Browser compatibility is an on going issue, this is only guaranteed to work in Firefox 3.2 at the moment, working on rest! **
Unsurprisingly enough getting street view on your google map isn’t any easy task. It has got a lot better recently, with more functions making life easier but nothing to match to complexity or the features of the main google maps site.
What’s Missing
In order to replicate the googles own maps there are certain key features that don’t exist by default, so I’ve had to copy it as close as possible.
The Little Man
The big one, that little man just above the zoom. There simply isn’t an API feature for that. This is why you don’t see any demos that have that man, it’s a Google only interface item.
At a guess, this is a heavily customised GControl with a GMarker mixed in to provide the draggable ability. Not something that can be replicated quickly.
