X

Adaptive Backgrounds: Extract color from images and apply to its parent

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

X

Cropper: A simple jQuery image cropping plugin

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

X

Responsify.js: Subject-aware responsive images

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

X

mediaWrapper: Responsive iframe video

iframe videos can be a pain for responsive pages. MediaWrapper is a plugin for wrapping iframes and embedded videos to behave more like images.

Illustration by akselkreis

X

jQuery Lightgallery: Lightbox Gallery Plugin

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.

X

jQuery.my: Data Binding in Real Time

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.

Here are a few more features:

  • jQuery.my recognizes standard HTML controls and complex composites created using rich UI plugins. Controls built with jQuery UI, Select2, CodeMirror, Ace, Redactor, CLeditor, jQuery Mobile are supported out of the box.
  • 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.

 

  • Paid
X

Royal Video Player: Responsive Player

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.

  • Spotlight
X

TwentyTwenty: Create Difference Between Two Images

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.

X

jQuery Video Player Extend

Create a custom-branded video with jQuery Video Player Extend. This little tool allows you to add a logo and more to videos for a custom playing experience.

In addition to a custom logo, you can add markers with labels, play a YouTube video, play FLV video (with basic support) and make your video responsive. The tools work well and look nice.

With a little working HTML knowledge, you can grab the code and get this feature working on your website in a hurry. (And you won’t regret it.)

  • Paid
X

Evolution: jQuery Lightbox

Lightbox Evolution is a tool for displaying images, HTML content, maps, and videos in a lightbox style container that floats on top of a webpage. Using Lightbox Evolution, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

You can use this tool to showcase content in a way that is different, user-friendly and does not take visitors away from your website to view content from other locations.

You can used colored boxes — and customize the options — images or combinations of the two. There are plenty of mix-and-match options available with this tool to help you make the most of your content.

This tool is available for $14 from Envato Market and includes future updates.

  • Paid
X

Revolution: Responsive jQuery Slider Plugin

Slider Revolution is an innovative, responsive jQuery slider plugin that displays content in the most beautiful way. Whether it’s a slider, carousel, hero scene or even an entire front page, you will be telling your stories in no time.

The slider is one of the most-used in the market because it works great and is fully responsive. It’s also optimized for Apple and Android devices. It also works with any type of content, including photos, video and social media streams.

Not sure how to use a slider? This package comes with 35 ready-to-use examples and is super flexible. Here are just a few of the features that come with this slider:

  • Hero, carousel and classic layouts
  • Unlimited sliders per page
  • Date-based publishing
  • Links and actions on slides
  • Parallax effects and customizations
  • Social media integration
  • Bulk upload capability
  • Custom animation creation
  • Unlimited number of layers available
  • Multiple navigation options
  • Touch enabled
  • Auto-hide and delay features
  • Keyboard navigation
  • Plenty of “fancy” skins
  • Ability to auto-play (or not)
  • And so much more

You can get Slider Revolution from the Envato Market for $14 and it includes future updates.

  • Paid
X

jQuery Banner Rotator / Slideshow

This jQuery banner rotator plugin features multiple transitions. Thumbnails and buttons allow for easy navigation of your banners or ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters.

Key features include:

  • Multiple transitions available that you can set by slide.
  • Ability to load an unlimited number of images, with customizable text, tooltips and links.
  • Show or hide components.
  • Automatically play on startup with a timer delay. (This can be set by slide.)
  • Banner, thumbnails, and buttons are all resizable.
  • The text description panel can be set at different location and size.
  • Embed links and images are inside the HTML text description box.
  • Control panel can be set at different location.
  • Configurable tooltips for each thumbnail.
  • Block and stripe sizes are configurable.

This tool is available for $11 from Envato Market.

  • Paid
X

jQuery Slider Evolution: JavaScript Image Sliders

Slider Evolution is a JQuery slider plugin that lets you easily create powerful Javascript sliders with nice transition effects. Enhance your website by adding a unique and attractive slider.

This tool allows you to create an unlimited number of sliders with custom settings for each. You can then put them anywhere on your website. And if you are not sure where to start Slider Evolution comes with a few themes to help you get started.

The slider comes with transitions for fade, bars, square, slide, explode, swipe and slip. Each animation works seamlessly and beautifully.

This tool is $9 from the Envato Market and is quality checked by their team and comes with future updates.

  • Spotlight
X

Chocolat.js: Free jQuery Lightbox Plugin

Chocolat is a responsive jQuery lightbox plugin that allows you to display one or more images on the screen at a time. You can group images as a series of photos as a link or use thumbnails in a full-page or block-style design.

The plugin is powerful and designed in a way that newbie-users or the most experienced programmers can appreciate. It comes with an API and multiple CSS classes. Chocolat is also cross-browser compatible and works with pretty much everything, even Internet Explorer 7.

To make things even sweeter, Chocolat is tiny — just 23 kb and only 10 kb when minified. And it is responsive, as you would expect, so it works on any device and allows you to create custom breakpoints as well.

Other plugin features include:

  • Block, full-screen and full-window views
  • Cropping or parent block styles for images
  • Loop playing to restart the flow once the last image shows
  • Keyboard navigation and assignment of shortcut keys

And you can do it all with just three files — jQuery library, plugin file and CSS file — in an easy set up.