• Paid
X

LayerSlider: Responsive jQuery Slider Plugin

LayerSlider is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows. It comes in a variety of options for viewing including full-width, full-size or fixed-dimension layout options. (This is one of the most popular sliders in use on the web today, and is used on more than 150,000 websites of all kinds.)

It uses cutting-edge technology to provide the smoothest experience that’s possible, and it comes with more than 200 preset 2D and 3D slide transitions. It’s device friendly and supports responsive mode, multiple layouts, touch gestures on mobile devices, and uses techniques like lazy load for optimal performance. You can add any content, including images, text, custom HTML, YouTube and Vimeo videos or HTML5 self-hosted multimedia content.

And it’s SEO-friendly, allowing you to build semantic markup with custom attributes that search engines can index easily.

LayerSlider comes with 13 built-in skins, and it has tons of options to entirely customize the appearance and behavior of your sliders at the smallest detail.

LayerSlider is $11 and comes with Envato quality checks, future ipdates and six months of support from kreatura. (Extra support options are also available.)

  • Paid
X

RoyalSlider: Touch jQuery Image Gallery

Royal Slider is an easy to use jQuery image gallery and content slider plugin with animated captions, responsive layout and touch support.

For the navigation you can use thumbnails, tabs or bullets. Use it as image slider, slideshow, HTML content slider, gallery, banner rotator, video gallery, carousel or even for project presentations. the tool was developed in using best practices in HTML5 and CSS3 transitions are used for all animations.

The tool is based on a modular design so you can build and use only the elements you need. This will help optimize speed and file size and it comes with more than 10 starter templates.

RoyalSlider is $14 and includes quality checks by the Envato marketplace, future updates and six months of support from Semenov. (You can add extra support as well.) This is a plugin you can trust. It’s already in use by plenty of websites, including NYC.gov and Ralph Lauren.

Royal Slider is focused on performance, accessibility, stability and providing best experience for user with any device. It is designed to work with all major browsers and versions, including touch navigation support for iOS (all versions), Android 2.3+, IE10, IE11, Blackberry and other OS and browsers that support touch or pointer events.

  • Paid
X

Ether: Grid Slider jQuery Plugin

Ether Grid Slider is an extremely functional jQuery plugin designed for transforming any type of content into practical grids and/or sliders.

It works with almost any type of content including images, videos, testimonials, services, featured stories and blog feeds. To make it even easier to get started, there’s plenty of documentation that can take you through almost any configuration options.

Ether can also be used as a base for consistent powering of slides or grids across an entire operation.

This tool is $7 and available from Code Canyon.

  • Paid
X

TouchCarousel: jQuery Content Scroller and Slider

TouchCarousel is mobile-friendly and lightweight jQuery content scroller with touch navigation for mobile and desktop. It can be used for creation of elements such as carousels, banner rotators and image galleries. It uses a physics-based scroll for a completely realistic look and feel.

Features of TouchCarousel include:

  • Touch navigation for supported devices
  • Paging and free-scroll mode
  • Physics-based scrolling
  • Fluid width of carousel for free-scroll mode
  • Fast, hardware accelerated CSS3 transitions
  • Four unique skins with included Photoshop files
  • SEO friendly because content is not hidden
  • Configurable items per scroll and snapping
  • Customizable UI — enable or disable arrows, bullets and scrollbar
  • Super easy to style — CSS file is commented and organized
  • Each item can include HTML content (except video) and can be any size
  • Smart autoplay pauses when you hover over and stops when action is done
  • It doesn’t block the default browser scroll on touch devices
  • It understands the difference between click and drag

While this plugin is responsive, it is only true for full-width, free-scroll mode. TouchCarousel is $11 and available from CodeCanyon. It comes with simple documentation, free support and upgrades.

X

Product Colorizer: Preview a Product in Different Colors

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

FSVS: Full-Screen Vertical Slider

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

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