Unheap

A tidy repository of jQuery plugins

  • Vanilla

PhotoSwipe

PhotoSwipe is an image gallery plugin for mobile and desktop devices with a modular,… more...

PhotoSwipe is an image gallery plugin for mobile and desktop devices with a modular, independent framework. The plugin comes with some nifty features including support of touch gestures, a browser history API that allows users to link to each gallery item with a unique URL to use the back button and loads and displays images quickly. What PhotoSwipe does is solve some of your common photo issues all in one package. The plugin preserves detail in responsive images so that gallery photos look great anywhere on any device, it does not slow down page load times and it saves user bandwidth because images load progressively. PhotoSwipe is made to work well on mobile devices — as implied by the name — and supports multiple touch gestures. You can use the basic gestures that are part of the plugin or assign your own actions. The include actions are spread to zoom, pinch to close, vertical swipe to close and horizontal swipe to switch items. (As a bonus, these same actions are emulated on desktop computers as well with wheel and trackpad actions.) The plugin works on all modern browsers and is fairly light. Plus this is a photo plugin that does not force additional HTML markup in the gallery; you have complete control and images will remain crawlable to search engines using your meta data.  

X

Product Colorizer

What sounds like a complicated tool is actually pretty simple with the Product Colorizer… more...

What sounds like a complicated tool is actually pretty simple with the Product Colorizer plugin. This lightweight solution allows users to quickly preview a product in different colors. The plugin uses only two images per product to create the effect comes with a quite easy setup. The plugin works in all major browsers including IE7+ (and will work with IE6 if you use a png fix). Preparing files for use with the colorizer requires a few steps, but is no trouble once you get the hang of it. After you download the plugin files and load them to your website, you need to get your image files ready to be colorized. You’ll need two images — one that includes the product in a base color and one with a color mask that shows color change for the different areas. (This works great for a product such as the t-shirt in the example, where you might sell items with the same graphic in different colors.) The demo includes detailed instructions on how to prep the images and format the HTML for this color change. Product Colorizer works with as many colors as you need and is a great tool for web-based shops.

X

datedropper

datedropper is a jQuery dates plugin that provides a quick and easy way to manage dates for… more...

datedropper is a jQuery dates plugin that provides a quick and easy way to manage dates for input fields. It supports 16 different language formats and is easy to use. The plugin only requires three bits of code for activation — head, body and end. The tool is also easy to modify so that it fits the aesthetics of any website outline — just edit the CSS in the datedropper folder and you’ll have a custom plugin. This tool has plenty of practical applications. Use it to add dates to an an or website, set an itinerary for an upcoming event or even set an expiration date for a digital product. When it comes to customization, you have plenty of options to choose from there as well; alter the date format, animation style, colors, language, text, number of years included, borders and strokes, shadows and boxed elements. And you can do it all with just a few clicks with datedropper. Find it on GitHub and see for yourself.

X
  • Vanilla

Chartist

Have you ever needed a great chart for your website design but did not know where to start?… more...

Have you ever needed a great chart for your website design but did not know where to start? Chartist is a plugin that helps you create simple responsive charts for almost any design project. This set of charts includes bar graphs, line charts, pie charts, circular charts, dot graphs, scatter plots, donut graphs and plenty of cool animations to bring your data to life. Every chart is designed so that you can customize it with your information. And editing is a breeze. The CSS editor is easy to understand and compatible with almost any data. Chartist is different from some of the other tools out there in that it is super easy to configure because it uses the convention method, it includes great flexibility in style, images are SVG based and it it built with Sass. Chart configuration behavior is based on media queries so that every chart renders perfectly every time. Plus, every element in Chartist is responsive. You don’t have to worry about compatibility issues with this plugin either. It works will all major browsers. Chartist is waiting for you to download and test it out. The file is light (only 10kb) and has no dependencies. This might just be the charting tool you have been looking for.  

X

Animsition

This simple and easy jQuery plugin for CSS animated page transitions give you tools for 58… more...

This simple and easy jQuery plugin for CSS animated page transitions give you tools for 58 different types of movement. The robust animation plugin includes elements such as fades, rotations, flips, zoom in and out, overlays and more. And every animation comes with a preview mode so you can see how it works before you install the action in your website framework. Animsition requires a browser that supports CSS3, which is how the animations are constructed. Supporting browsers include IE10+, Safari, Chrome and Firefox. Download and installation are fairly easy. Link the required files, insert the HTML markup and call Animsition. That’s it. All of the code and options are available in the demo to make this plugin even easier to use. Want an animation that’s not included in the Animsition plugin? You can create your own and submit it for inclusion. The plugin has nine contributors and the team welcomes future elements for this project.

X
  • Vanilla

Rate Yo!

This tiny and flexible jQuery star rating plugin is just what you need to add super star… more...

This tiny and flexible jQuery star rating plugin is just what you need to add super star ratings to your website. What makes it even better is that no images are required to make Rate Yo! work like a charm. The plugin includes five stars from your created <div/> and some styles of your choice. Nifty hover actions make it easy for users to click to rate by filling stars with a color. Rate Yo! is packed with options so you can make this rating plugin your own. You can change the width and size of stars, number of stars used, colors, fill options, spacing and animated options. (This is a robust set of options that make it easy to customize this plugin to your website’s style and color scheme.) One of the coolest features of this plugin is the low to high rating, which allows you to change the color of stars from one color to the next based on value. And because the plugin does not sure actual images, the lightweight code is lightning-fast and you’ll never have to worry about render issues. It’s a great solution for anyone looking for a rating tool.

X

Shifter

This plugin provides simple slide-out mobile navigation that’s fully responsive. The little… more...

This plugin provides simple slide-out mobile navigation that’s fully responsive. The little plugin comes packed with options for basic, breakpoint or off-canvas navigation in multiple styles. With each type of navigation, there are plenty of styling possibilities as well, so you really can make this plugin look like part of your overall design. All of the options are outlined in the documentation and include elements such as custom class, push or overlay navigation, closed and open state text, auto-width displays and type of navigation. With a little CSS knowledge, this plugin is relatively easy to install, configure and use. All of the CSS element types and descriptions are included with easy to understand descriptions. Shifter includes almost any type of slide-out navigation that you might want for a variety of mobile projects. And because it is customizable, you can get a lot of use from this lightweight little plugin.

X

FSVS

FSVS is a simple full-screen vertical slider that uses CSS3 transitions followed up by a… more...

FSVS is a simple full-screen vertical slider that uses CSS3 transitions followed up by a jQuery fallback. The vertical slider is becoming a trendy option for one-page website design. This plugin allows you to create multiple “pages” on the scroll with a seamless flow to them. The slider works in multiple environments, including with mouse wheel scrolling, click and drag, with arrow keys and by using touch gestures. You can create as many scrolls as you like with FSVS. The code is simple and does not interfere with your website design or framework. The plugin simply adds to the overall aesthetic with neat vertical transitions. This plugin is designed for page transitions and is not a substitute for a video or image slider. The code is lightweight and can be installed with just a few lines of HTML. FSVS is designed for full-screen websites and does not currently have a mobile component (although the developer is open to working with someone to create a workable mobile or responsive vertical slider option).

X
  • Spotlight

Strip

This plugin is a less intrusive responsive lightbox because Strip only partially covers the… more...

This plugin is a less intrusive responsive lightbox because Strip only partially covers the page. This makes it less intrusive and leaves room to interact with the page on larger screens while giving smaller mobile device screens a more classic lightbox experience. Strip uses jQuery and works on all major browsers. What’s nice about the Strip lightbox is that it is compatible with common image and video APIs, such as YouTube and Vimeo. The plugin automatically detects the included media type based on URL, making it easy for you to create a lightbox with varying images and videos. Strip is also fully customizable with a variety of existing skins that come with the download. Users can install with the default skin or create website-specific looks using custom options. The width and height of the plugin can also be adjusted to fit different size media and impact how animation and transitions display. The plugin has options for placement as well with top, bottom, left- and right-side options. Strip is easy to install. Just add the class to a link, add using a data attribute or custom options attribute. Another alternative is to use an API that allows Strip to be used with Javascript.

X

Sweet Alert

Tired of JavaScript’s “alert”. Then Sweet Alert is just what you are looking for. This… more...

Tired of JavaScript’s “alert”. Then Sweet Alert is just what you are looking for. This little plugin automatically centers itself on the page and looks great no matter if you’re using a desktop computer, mobile or tablet. And the customization options for this tool are almost limitless. You can plug in Sweet Alert for almost any standard notification type. Installation is simple and can be done in-browser, through NPM or with a download of the CSS and JavaScript files. Load the plugin and you are ready to add custom alerts and go! Make sure to take a good look at the Sweet Alert configuration key chart. There are plenty of values for passing an object into Sweet Alert. The plugin also comes with some simple methods to call as well. This plugin is a tool that can work for almost any website design. Who wouldn’t want a more custom and beautiful alert option? (And if you’d like to see more Sweet Alert features, make sure to let the developer know on GitHub.)

X

Pegasus

Pegasus is the plugin that will allow you to do two things at once; now you can load data… more...

Pegasus is the plugin that will allow you to do two things at once; now you can load data while still loading other scripts. Using this technique, you can reduce the time to display data in single page apps without touching the server. This plugin is a great option for static sites or when you can’t do server-side data bootstrapping or rendering. Here’s how it is different. Without Pegasus data is loaded only after the library is loaded. (This is a pretty inefficient process.) With Pegasus embedded, data loads parallel to the library. With Pegasus running as a script, data is loaded as soon as the script is loaded. Either of the second pair of options saves a lot of time because of the parallel loads. This plugin works with all major browsers and IE8+ and the plugin works with any Javascript library. What’s even better? Pegasus is a tiny plugin, coming in at only 0.2 kB min/gzip, you won’t have any worries about it weighing down your website. If you are still not convinced, check out the live demo to find out if Pegasus is the right plugin for and existing or your next website project.

X
  • Vanilla

rangeslider

This simple, small and fast jQuery polyfill for the HTML5 slider element looks great and… more...

This simple, small and fast jQuery polyfill for the HTML5 slider element looks great and works like a charm. The rangeslider plugin is touchscreen friendly, recalculates onresize making it suitable for use in responsive designs, is small and fast and supports all major browsers including IE8+. With plenty of numerical slider options, this little tool allows you to visualize negative attributes, floating point boundaries, programmatic value changes, programmatic attribute changes, destroy a plugin instance and more. Installation of rangeslider is easy with Bower or NPM, but you can also download and install manually. Configuration is simple as well; all you need is a few lines of code. The rangeslider.js API is compatible with the standard HTML input methods. The developer is open to suggestions and has released multiple updates for this plugin in order to make it even better.

X

Midnight

Midnight is a jQuery plugin to switch fixed headers on the fly. What this means in… more...

Midnight is a jQuery plugin to switch fixed headers on the fly. What this means in practical application, is that a header can change color, weight or size based on the background. It works on scroll so that your header text or image is always optimized for on-screen environment. Plus Midnight is pretty easy to use. Create your fixed navigation (or header) as you typically would, using whatever markup suits you, just make sure the header works well with position:fixed. Then take sections of your page that need a different aesthetic and add data-midnight=”your-class” to it, where .your-class is the class you are going to use to style that header. Add a little styling and you are done. Use whatever CSS or markup you like for each one. They will be switched automatically when necessary. To make it all work, just load Midnight (and jQuery) and initialize. A little developer “magic” takes care of the rest. You can further add customization with custom markup for each header as well. There are a few known issues with this plugin and older browsers, so if you have a large user based operating in the pre-iOS 7 era, beware.  

X

Block Scroll

Block Scroll is a jQuery plugin that breaks pages into chunks for better presentation. The… more...

Block Scroll is a jQuery plugin that breaks pages into chunks for better presentation. The plugin turns a set of elements into a blocks and displays them one screen at a time to improve user-flow and make your page work in a responsive way. The plugin comes with a robust set of features including up and down movements using the keyboard, scroll, buttons or mouse wheel; responsive design that automatically adjusts to any reasonable resolution; sticky pages that adjust to the screen; customizable look and feel using CSS; up and down buttons that are automatically wired; and ability to change the location of the active block using Javascript after it’s initialized. In a nutshell, Block Scroll can be used to create a trendy-style single-page website with that multiple-page look. Create each block in a different color or with changing backgrounds for the most impact. Block Scroll allows you to customize almost very aspect of the plugin, including block design, scroll duration and animation or fading between blocks. Download and install using the js file, set your customization preferences and you are ready to go with the Block Scroll plugin.

X

Supported by