rlightbox – a jQuery UI mediabox

Table of Content

Best jQuery Lightbox Plugins for Developers

http://codegeekz.com/best-jquery-lightbox-plugins-for-developers/

Swipebox : jQuery Lightbox with Touch Support

Swipebox is a jQuery lightbox plugin that has support for touch events and works well in responsive layouts. It can display a single item or a group of items (gallery) where they can be browsed with swipe gestures or keyboard too. The plugin mostly uses CSS transitions and has jQuery fallback for unsupported browsers.

rlightbox : Responsive Lightbox with jQuery UI

rlightbox is a lightbox plugin that is built on top of jQuery + jQuery UI and comes with some fresh features that doesn’t exist in its alternatives. It can display any type of content from images to videos (YouTube and Vimeo), Flash files and HTML. The plugin has a unique “panorama” feature for showing only part of an image but allowing users to view the rest with panning. rlightbox can be set to display a single item or a set with the help of pre-next buttons (there is support for keyboard navigation as well). It is look and feel can be completely customized as the plugin is fully compatible with jQuery UI ThemeRolle

Colorbox : Highly-Customizable jQuery Lightbox

ColorBox is a jQuery Lightbox plugin which is lightweight (9kb) & supports photos, photo groups, slideshow, ajax, inline, and iframed content. The lightbox has a very nicely designed interface which can be improved or customized with CSS. ColorBox is unobtrusive; every option is mentioned in the JS & requires no changes to the existing HTML.

For faster displays & slideshows, it preloads background images and, optionally, can preload upcoming images in a photo group. The plugin comes with a bunch of settings, including transition types-speeds & opacity, for maximum customization.

iLightBox : Impressive jQuery Modal Box Plugin

iLightBox is a fresh alternative to other jQuery lightbox plugins and there is a strong chance that, although it is a paid resource, it may become your favorite. It can present images, videos (YouTube, Vimeo, HTML5 video), other HTML and there is an optional fullscreen mode. The gallery mode can display other items as thumbnails and allows browsing via keyboard, mousewheel and touch events (swipe). There are retina-ready skins, it can be completely customized and iLightbox can also be used as a good-looking replacement for JavaScript’s alert, prompt and confirm dialogs.

Lightbox_me : Simple & Tiny Lightboxing

Lightbox_me is a jQuery lightbox plugin that doesn’t come with many features but simply enables you to lightbox any element. And, it is only 1kb compressed. It can position the modal box smartly in every situation whether the windows is resized or the window is smaller than the modal. To sum up, Lightbox_me is very functional for anyone who doesn’t need features like image/video gallery support but only a simple and good-looking lightbox.

Magnific Popup : Responsive jQuery Lightbox Plugin

Magnific Popup is a free responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device. The majority of lightbox plugins require you to define size of it via JS option. Magnific Popup does not – you can use relative units like EM’s or resize lightbox with help of CSS media queries. Update content inside lightbox without worrying about how it’ll resize and center.
Plugin has an option to automatically switch to alternative mobile-friendly source on small screen size. Default controls are made with pure CSS, without external graphics. For the main image there is a built in way to provide appropriate source for different pixel density displays. Magnific Popup displays images before they’re completely loaded to take full advantage of progressive loading. For in and out transitions CSS3 is used instead of slow JavaScript animation.

FancyBox Light Box

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. It can display images, HTML elements, SWF movies, Iframes and also Ajax requests, customizable through settings and CSS, groups related items and adds navigation, supports fancy transitions by using easing plug-in and many more.

Slimbox 2

Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.

27 Fresh and Free jQuery Plugins

Mapael

jQuery Mapael is a jQuery plugin based on raphael.js that allows you to display dynamic vector maps.

Demo

Selectric

jQuery Selectric is a jQuery plugin designed to help at stylizing and manipulating HTML selects.

Demo

onScreen

A jQuery plugin that does stuff when the matched elements are visible (as inside the viewport).

Demo

Charlie.js

A small framework for synchronizing video and CSS3 animations.

Demo

Snap.svg

The JavaScript SVG library for the modern web.

Demo

Touche.js

Effortlessly re-map click events to touch events on touchscreen UIs.

Offline.js

Offline.js is a library to automatically alert your users when they’ve lost internet connectivity, like Gmail.

fullPage.js

Create Beautiful Fullscreen Scrolling Websites.

Peeler.js

A library to add peeling to the center of your content. This was inspired by the brilliant folks over at Teehan+Lax and introduced in their blog post for UX considerations for Medium.

Demo

Mobify.js

Mobify.js is an open source library for improving responsive sites by providing responsive images, JS/CSS optimization, Adaptive Templating and more.

Demo

Rickshaw

Rickshaw is a JavaScript toolkit for creating interactive time series graphs.

Odometer

Odometer is a Javascript and CSS library for smoothly transitioning numbers.

Demo

FullPaged

Single page layouts are taking off in a big way. It seems as if every product page nowadays is single paged, so I thought I’d have a little spin at it with this jQuery plugin. This allows you to create single paged layouts with a few optional custom UI elements such as fold up menus.

Demo

At.js

Demo

ContextJS

ContextJS a lightweight solution for contextual menus.

Demo

Scrolld.js

Scrolld.js is a unique open source plugin for jQuery. Scrolld.js provides a method for highly precise scrolling for pixel-perfect layouts and navigation using real-time updated data values. With Scrolld.js your scrolling to items will always be exact and will always provide the best user experience. Scrolld.js is specifically designed to support responsive designs and turns navigating long pages into a simple task. Scrolld.js is intended for easy use and is fully deployable within minutes.

jQuery Popdown Plugin

A super simple jQuery popdown plugin.

Demo

Resumable.js

It’s a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API.

WhatsNearby

A jQuery plugin to list and show nearby places around a certain position using Google Maps.

Demo

stickUp

stickUp a jQuery Plugin for sticky navigation menus.

Circletype.js

Circletype.js is a tiny (2.7kb) jQuery plugin that lets you set type on a circle.

Isotope

Isotope: An exquisite jQuery plugin for magical layouts.

Validetta

Validetta is a tiny jQuery plugin which you can do client-side validation of your forms. It aims to decrease your burden with easy usage and flexible structure.

Demo

Wallpaper

A jQuery plugin for smooth-scaling, element-filling backgrounds.

Demo

Trip.js

Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities.

CLNDR.js

A jQuery Calendar Plugin.

imgcolr

imgcolr is a jQuery plugin for grabbing the dominant color of a given image’s borders. You can programmably adapt the elements’ color on the webpage for the image after getting the color. Based on the idea, we can make the web more beautiful and interesting.

Knockout.js: Simpler dynamic JavaScript UIs

HTML5 File Uploads with jQuery

http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/

Demo    Download

What are HTML5 File Uploads?

Uploading files using HTML5 is actually a combination of three technologies – the new File Reader API, the also new Drag & Drop API, and the good ol’ AJAX (with the addition of binary data transfer). Here is a description of a HTML5 file upload process:

1. The user drops one or more files from their file system to the browser window by dragging. Browsers that support the Drag & Drop API will fire an event, which alongside other useful information, contains a list of files that were dropped;
2. Using the File Reader API, we read the files in the list as binary data, and store them in memory;
3. We use the new sendAsBinary method of the XMLHttpRequest object, and send the file data to the server.

Sounds complicated? Yes, it could use some optimization. Fortunately, there are jQuery plugins that can do this for us. One of them is Filedrop, which is a wrapper around this functionality, and provides features for limiting maximum file size and specifying callback functions, which is really handy for integrating it into your web applications.

Currently file uploads work only in Firefox and Chrome, but upcoming major versions of the other browsers also include support for it. A simple fallback solution for older browsers would be to display a regular file input dialog, but we won’t be doing this today, as we will be focusing our attention on using HTML5.

So lets get started!