Snazzy Info Window is a plugin for customizable info windows using the Google Maps JavaScript API. This plugin was built to allow for easier styling of info windows using the Google Maps JavaScript API. It supports dynamic content, responsive sizing, and custom styling using SCSS. You can also have it show up above, below, right or left of the marker. If you are building custom maps for your site, this plugin is a must.

Looking for a way to asynchronously load images when users browse to the page without jQuery?

Progressively is a javascript library for loading images progressively. It’s written entirely in JavaScript so it doesn’t depend on 3rd-party libraries like jQuery. It’s super small, < 1.2kB when minified & gzipped! It will load images on when user browse to the page, saving bandwidth & server requests. It is compatible with all modern browsers.

A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

Why was this plugin built?

We have all searched images on Google, so you probably noticed the interesting expanding preview when you click on a thumbnail. It’s a very nice effect and practical, allowing you quickly see more details without having to reload a new page. This plugin allows you to recreate a similar effect on a thumbnail grid. The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link.

When images are used in a responsive container on web design, because the container can change to any width:height ratio, a group shot could end up cutting off people’s faces. A nice photograph following “rule of third” could end up with no object in view. Responsive images face the challenge of how to keep the focused objects/area in view, this jquery plugin is here to solve the problem.

Responsify.js does the following:

It allows you define a focus area on an image using data-focus-xxx tag

It takes in the focus area data from the image, calcuate the image’s container’s size, resize and position the image accordingly, make sure the focus area is always in view and in the best position possible

Luminous is a simple, lightweight, no-dependencies JavaScript lightbox. Out of the box the styling is very basic, so you will want to style it to your needs. They do provide a basic theme to get you started.

It supports the latest version of Google Chrome and the current and previous major releases of desktop Firefox, Internet Explorer, and Safari on a rolling basis. Mobile support is tested on the most recent minor version of the current and previous major release for the default browser on iOS and Android (e.g., iOS 9.2 and 8.4).

jQuery Lightgallery is a customizable, modular lightbox gallery plugin. The fully responsive tool helps you make the most of images for almost any type of website design.

The key features of jQuery light gallery include responsive design, touch and drag navigation, animated thumbnail options, plenty of customization options and support for video from YouTube and Vimeo. The tool is also designed as modules – thumbnail, full screen, zoom, etc – to make it easy for you to create exactly what you want. Plus, you can add your own modules and detach elements that you don’t need.

The plugin also comes with more than 20 animations built in, and each one uses CSS3 transitions for super-fast performance. Finally, the tool includes a dynamic mode that can be instantiated and launched programmatically by setting dynamic option to true and populating dynamicEl option by passing array of objects representing the gallery elements.

jQuery Lightgallery is available on GitHub and you can find plenty of examples of its usage in the detailed documentation.

If you are looking for a lightweight jQuery plugin for complex two-way data binding in real time, jQuery.my might be the perfect solution.

Here’s how it works: The tool mutates the object given as a data source, reflecting interactions between the user and the interface. Data bindings, facade appearance and CSS styling of an app are all defined using single manifest, which is standard javascript object. Manifests are JSONable.

jQuery.my provides comprehensive validation, conditional formatting, complex dependencies, runtime form structure manipulation. $.my forms can run nested, each jQuery.my instance can be a composite control for parent form.

Syntax of $.my manifest is very simple, lean and unobtrusive. There exist specialized in-browser IDE for $.my apps authoring. This IDE is a built-in component of cloudwall.me system.

The result is a fully interactive set of tools, tables, curves and layouts that can work in a variety of applications. Check out the demo to see how it can work for you.

Royal Video Player is a responsive player that can play local videos, streaming videos or YouTube videos. (It’ll play pretty much anything with an mp4 format.)

What makes it pretty awesome is that this player works on mobile devices and desktops and with any browser and supports unlimited playlists. This is a pretty robust tool for any site that used plenty of video.

The player comes with plenty of features as well. These include:

Responsive layout and design

Optional deep-linking for playlists and videos

Optional embedding and sharing

Ability to load any type of playlist

HTML markup playlists that can be created manually or from a database

Multiple hover effect options

Video description tooltips

Multiple positioning options

Customizable thumbnails

One skin for all videos, regardless of source

Autoplay, loop and shuffle options

Plenty of great play, volume and other buttons

The player is a robust tool with plenty of features. It is available for $14 from the Envato Market.

TwentyTwenty is a tool that can showcase the difference between two images. The nifty little trick makes it easy to show users precisely what you want them to see.

TwentyTwenty works by stacking two images on top of each other. As the slider moves across the image, it makes use of the CSS clip property to trim the image on the left. This allows the image on the right to show through the container.The widget uses jQuery custom movement events to support this slider movement.

The plugin has two dependencies: jQuery and jQuery.event.move, so that actions will work on touch-based devices.

The tool is fairly easy to set up and offers various customization options for display of the images. These options include:

Color

Stroke width

Circle width

Shawdows

Triangle color, size and position

Handle radius

Overlay and associated colors, labels, padding and spacing

Label radius

This widget is responsive and works across all devices, doesn’t require images to work properly and works with Zurb Foundation right “out of the box.” (This tool was built by the team at Zurb.)