see the forest for the trees
Magnoliyan Minimap or mgMiniMap is Photoshop Navigator Panel like jQuery plugin. Say you have a page which long content goes out of the visible part of the browser’s window – viewport. mgMiniMap shows minimizes and simplified preview of the full page content with clearly marked draggable viewport. While you scroll the page, minimap automatically updates the preview. Also, while you drag the viewport frame, the original content gets scrolled as well.
mgMiniMap can be applied either to the window object or any scrollable element. For example, you can apply it to a div which content exceeds its dimensions.
mgMiniMap automatically updates its preview when original content gets resized, but also you can manually call its update method when, let’s say, the original content dynamically updates.
mgMiniMap suits perfectly in use cases like: Web apps for managing complex workflows, drag and drop components, but can work nice in any page as a fast visual navigation tool.
Minimap Features
- HTML5 Canvas based fast rendering
- Works in browsers without canvas support
- Realistic page preview
- Draggable and resizable navigator panel
- Auto-update on the original content resize
- Easy CSS based customization
- Ability to select elements for faster rendering
Requirements
This plugin uses the following Javascript libraries:
- jQuery
- jQuery UI
- html2canvas (only for realistic option)