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.

Nice and elegant way to add zooming functionality for images, inspired by medium.com

This plugin reproduce exactly the same code that use Medium to add the smooth transition effect clicking over the images, with some improvement.

• It works on mobile, unlike Medium.
• It’s simple, unlike Fluidbox.

Key features

Written in pure javascript for better performance, lightweight and simple.

Illustration by akselkreis

A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element.

Illustration by akselkreis

Cropper is a simple jQuery plugin (also available in vanilla JS) that allows you to easily add image cropping to your app. For a simple plugin, it’s fairly robust, features include:

• 39 options
• 27 methods
• 7 events
• touch (mobile)
• zooming
• rotating
• scaling (flipping)
• multiple croppers
• crop on a canvas
• crop image in the browser-side by canvas
• translate Exif Orientation information
• Cross-browser support

Illustration by akselkreis

A jquery plugin that makes images truly responsive, without sacrificing anyone’s face.

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:

1. It allows you define a focus area on an image using data-focus-xxx tag
2. 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

Responsive image with responsify.js

Responsive image without responsify.js

Illustration by akselkreis

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.)

See the Pen TwentyTwenty by Unheap (@Unheap) on CodePen.

bLazy is a lightweight lazy loading, multi-serving image script. It’s written in JavaScript and doesn’t have any dependencies for third party libraries like jQuery.

The goal of bLazy is to help save bandwidth and server requests to your site to everything loads that much faster. (As an added bonus it saves data usage for mobile users as well.)

The loader has a sleek look and can work with almost any style of website design. The code is fairly easy to understand and install.

Here are a few reasons why you should try it:

• bLazy is used on big sites with millions of monthly visitors so it has been tested plenty.
• bLazy is written in pure JavaScript and doesn’t depend on third-party libraries such as jQuery.
• bLazy can lazy load all types of images, including background images.
• bLazy can lazy load images depending on screen size (multi-serve images).
• bLazy can serve retina images on retina devices.
• bLazy is lightweight, less than 1.2KB and less than 1.05KB (if you don’t need IE7- support).
• bLazy is AMD, CommonJS and Browser global compatible.

This tool works on all modern browsers and is a great way to better serve images to your users.

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.

Rollerblade is plugin designed to create an interactive 360º image rotation. This plugin is great for online shops or product sales so that visitors can see an item from every angle before making a purchase.

Installation and setup of Rollerblade is not difficult if you follow the instructions:

• First, include rollerblade.css at the top of your page with your CSS. Or, if the contents of that file are small, simply copy and paste the rollerblade.css contents into your main CSS file.
• Rollerblade targets a container element with an image element inside that has the class of rollerblade-img. Make the src of the image the path to the first image in your rotator.
• Make sure jQuery is included in your page, and then select the container element and call the rollerblade method.

Customize Rollerblade with several different options. You can increase or decrease the sensitivity of the rotator, determine whether the rotator is activated using drag, set up an manual or automatic rotation for the element and determine what should happen once a rotation is complete.

For something that looks complicated in action, Rollerblade is a simple to use option that can have stunning results on your website.

Have you ever wanted images to perfectly scale regardless of device? FocusPoint is just the tool you have been looking for. The plugin crops images to fill the available space in a frame without cutting out the subject of the photo.

It’s the perfect solution for responsive cropping.

FocusPoint works by asking for you to indicate the most important parts of an image. Then as the frame changes for different devices, FocusPoint uses that part of the image first so that the things you want to be visible are always front and center.

At first glance, this plugin might look a little complicated, but don’t worry it comes with a handy how-to guide and is actually quite easy to use. (You can actually do it with just one click.)

Once you have installed the plugin, you’ll need to markup the image container in your CSS and then fire the plugin. That’s it!

The plugin has a few specific configurations that you can toy with when it comes to how images rend during resizing and what the throttling rate looks like. And one of the best tips for using FocusPoint is thinking about the images on your website and how they should include some negative space for cropping flexibility.

Dense is a jQuery plugin that offers an easy way to serve device-specific pixel ratio aware images, adding retina support to your website.

The plugin is tiny, installs with Bowser and requires jQuery 1.7+ or Zepto.

Here’s how it works: The responsive, retina-ready image is implemented by simply including the jQuery plugin on the page and calling its $.fn.dense() initializer method. The initializer method is set to target those img elements that should serve retina-ready images when needed. The plugin can be included and invoked by using either browser globals or AMD.

You can use Dense with the default configuration to target all the images on your website or you can manually select which images to apply the plugin to.

Dense works on all modern web browsers and can display retina-ready images on any supporting device.

Dense is a fairly complex plugin when it comes to function and options. It is designed for developer installation, although almost anyone can use it with the default settings without a lot of trouble.

Crossfade is a tiny jQuery plugin for crossfading images on page scroll. The end result is a high-impact scroll feature that can add a lot of visual interest to a website design without slowing it down.

This plugin is super-small — only 3kb. You can install using Bower and then initialize.

There are a few technical things you might want to know about this plugin:

• It preloads the start and ending images.
• It generates a <canvas> element and appends it to the element. The canvas is automatically set to cover its parent, via absolute positioning.
• The starting and ending images are drawn into the <canvas> and, depending on the position of the element in the viewport, superimposed on top of one another.
• Images are redrawn using window.requestAnimationFrame, allowing for exceptionally performant rendering. Browsers that do not support window.requestAnimationFrame will fall back to a timeout loop.

On install, you have options to adjust the start and end points of the fading animation, threshold and speed of the fade and default background position of images as the plugin does its magic.

Shuffle Images is a way to display multiple images on hover by moving the cursor or with other set trigger actions.

This plugin is perfect for when you want to save space while allowing users to take a peek at images related to the one displayed. It can also be used to create an interactive animation on multiple static images at once.

Shuffle Images works on all modern browsers including Chrome, Firefox, and Safari, but usage on Internet Explorer has not been tested. It is worth noting that this plugin relies on mouse input and may not work well on mobile devices.

To use this plugin, include the latest jQuery library (preferably version 2.0.0 or higher) with jquery.shuffle-images.js into your document’s <head> follow by HTML markup. There are specific markups fr trigger timing, movements and scroll.

Skippr is a fast and light jQuery plugin for creating slideshows. The full-screen slider-style plugin is simple and can match almost any design outline. Slides move with ease from one panel to the next and you can add links or text on top of them.

Skippr is easy to unpack and install using Bower; add the CSS and JS just before the body tag, initiate and set your options preferences.

You have a variety of controls with Skipper including transitions, speed, easing, navigation type, parent and child elements, arrows, auto play and duration, keyboard control and hide and show.

This plugin is designed as an ongoing project and the developer welcomes your additions for further customization to best suit your website design.