• Spotlight
X

Strip: jQuery Responsive Lightbox

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

Rollerblade: Creating Interactive 360º Image Rotators

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.

  • Spotlight
X

FocusPoint: jQuery Plugin for Responsive Cropping

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.

X

Bootgrid: Grid Plugin Designed for Bootstrap

Bootgrid is a sleek and intuitive grid plugin designed for Bootstrap. This powerful table extender plugin comes with plenty of features to make building tables less of a headache.

Here are some of the features that make Bootgrid a great tool for table workflows — it’s responsively designed, comes with accessibility support, includes server-side data loading and dynamic manipulation, has easy navigation, has plenty of configuration options, includes a data API, has client-side data loading, comes with column converters and formats, includes single and multiple row selection support and localization tools.

The table features work for different types of data including text, number or a combination of text and numbers. Each column and row aligns neatly for a table that can be designed to match the aesthetic of your website.

When it comes to installation and use, Bootgrid can be implemented as a server-side tool or a client-side tool. There are plenty of settings and configuration options available in the plugin documentation.

The plugin is lightweight — coming in at only 4.7kb, is based on HTML5 and includes cross-browser support. Bootgrid will work on IE, Firefox, Chrome, Safari and Opera.

X

Rebox: Responsive and Mobile Friendly Lightbox Plugin

This simple, image-free, responsive and mobile-friendly lightbox plugin helps keep your library clean and simple.

Instead of using a ridiculous amount of Javascript to restrict image sizes within the window, Rebox uses CSS max-width. The design requires no images, although if you want to reskin it you like.

Use and installation is easy; just include the code with Zepto or jQuery for a basic build. (Make sure to include the touch module if you want the lightbox to work with swipe gestures.)

The plugin has a few different lightbox configurations and will allow for single initialization with a one lightbox on each image, gallery-style or the addition of images to “empty” container elements. This lightbox plugin works with a variety of content types and will allow you to highlight images, videos, illustration or pretty much anything you like using specific template types.

Rebox comes with plenty of options that you can control as well with a little tinkering in the code.

X

PrettyEmbed: Embed YouTube Stream Into Website

PrettyEmbed is the only tool you’ll ever need to embed your YouTube stream into your website. And it does it all while cleaning up the video so the preview looks nice on the screen. The result is a still frame from the video with a play button but none of the other “junk” that can show with YouTube embeds, such as titles and other icons.

The plugin fetches the highest resolution preview image available for maximum impact on all screens, allows for advanced customization options and optional FitVides support.

Use of PrettyEmbed requires jQuery and waitForImages installation. It can be installed using an HTML5 driven method or a script driven method.

The plugin is packed with options once you finish installation, so that videos preview in just the manner you like. Set the size of the preview, custom URL, what information to show or hide on the preview, whether the video should play or loop, display of closed captions (or not), allowance of full-screen mode, color options and more.

PrettyEmbed really does a great job of making your embedded video previews match the aesthetics of your website framework for a more polished design.

X

SilverTrack: jQuery Sliding Carousel

SilverTrack is a smart jQuery sliding carousel. It is often used as part of another set of plugins to increase functionality.

The slider functionality is nice that is works vertically or horizontally and has plenty of options that you can control. Adjust the number of items to display, class names for items, direction of navigation, type of animation, if a cover image will be used, duration of the animation and more.

You’ll likely want to pair SilverTrack with some of the built-in plugins for increased usability. these options include the navigator, bullet navigator, remote content, responsive hub converter, CSS3 animation and a circular navigator. You can also create your own custom plugin using the instructions in the included SilverTrack documentation.

While getting the most out of this plugin will take some coding on your part, it is worth it. The end result is a nice, sleek slider that works with ease and fits in a variety of site outlines. Having vertical and horizontal options is a big bonus as well, because it is a feature that is not often included in this type of tool.

X

The Wall: Create an Image Gallery like Google Images

The Wall is a plugin that can be used to create an image gallery with a look similar to Google Images.

The plugin helps you sort and search images with ajax scrolling, images and text. Installation is quick and easy with Bower.

The plugin comes with options to make it easy to use, including tools for refresh, expanding windows, updating elements, resizing, how items show on the screen, next and previous buttons, and bind and destroy plugin events. You can also control whether to use keyboard navigation, animation, auto-scrolling effects, margins and dynamic height options.

The plugin is organized well visually and make it easy to see a collection of images for plenty of different applications. The image preview boxes align to a responsive grid that allows it to work on pretty much any device.

X

jBox: Manage the Popup Windows

This nifty little plugin helps manage your popup windows, including tool tips, notices and more. jBox is packed with powerful options and a few surprises for anyone that might want to use an online notification.

There are eight tool tip options — from basic tool tips to no-close options to color and style choices to click and scroll features.

There are four modal window tools — basic, draggable, ajax and submit. Plus, four notice tools with positioning at the top or bottom of the screen and visual options such as color.

The final style for jBox includes to image gallery formats.

This plugin is ready to go and easy to use right from the install. It’s optimized for retina screens, will work in any environment including IE 8+ and is lightweight, at only 19kb.

The only thing left to do is get started with jBox and all the customizations you can make for notification and popup windows for your website design.

X

Dense: Device Specific Pixel Ratio aware Images

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.

X

CoverVid: Create HTML5 Video for Background

CoverVid is a great little tool that allows your HTML5 video behave like a background cover image.

This tool is different because it is lightweight — coming in at only 800 bytes — and is usable in native Javascript and jQuery. Its logic is parent based, meaning the parent element can be any size (not necessarily just a full-screen background).

Here’s how it works:

  • Pull the project down from GitHub and link covervid.min.js into your site. Make sure it is loaded after jQuery.
  • It is important to note that the video you target will use its parent element to scale. With that in mind, there’s some simple markup and base styling to size the video’s parent/wrapper element.
  • Call the plugin and you are ready to go.

What’s especially nice about CoverVid is that this tool allows you to create a trendy video-based homepage with ease. You can add this tool to your existing site and get a trendy design refresh in no time. The hardest part will be finding the perfect video to represent your website or brand page.

X

tableExport: Export HTML Tables

The tableExport plugin is a tool that will help you export HTML tables into a variety of other formats for other uses.

With this tool you can convert HTML tables to the following types:

  • JSON
  • XML
  • PNG
  • CSV
  • TXT
  • SQL
  • Microsoft Word
  • Microsoft Excel
  • Microsoft Powerpoint
  • PDF

And you can do it all with a simple install and export. The plugin is rather simple and does not have a lot of options, but it does have plenty of practical application.

X

Feyn: Draw Feynman Diagrams with SVG

Feyn is a jQuery plugin to help you draw Feynman diagrams with Scalable Vector Graphics (SVG). If you are not familiar with them, Feynman, or Feyn, diagrams are pictorial representations of mathematical equations.

Some of the features of this plugin include:

  • Automatic generation of clean SVG source code
  • Easy to use, easy to make fine adjustments
  • Predefined propagator styles, vertex types, and symbols
  • Support for typesetting labels and including external graphics
  • Lightweight, cross-browser, and fully documented

The plugin works will all modern browsers, including Firefox 4+, Chrome 7+, Opera 11.6+, Safari 5.1+ and Internet Explorer 9+.

This plugin uses JavaScript’s liberal object notation, whose simplicity and extensibility allow it to be both lightweight and powerful. You need a good understanding of SVG markup language to use this tool most effectively.

If you are wondering how the code works, the demo is a good place to start, but this plugin does not come with incredibly detailed instructions for use.

 

  • Spotlight
X

Crossfade: Crossfading Images on Page Scroll

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.