Design your way

jQuery is a powerful tool and using it has become a sine qua non condition of web designing. It practically transforms a web page from dullness to an entertaining and catchy piece of work.

For images we have the lightbox plugin in its many variations. It displays images using modal dialogs and it became very popular because it is very easy to implement. You have to bookmark this article cause you don’t want to forget using one of these plugins in your future designs.

Magnific Popup

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device (for jQuery or Zepto.js).

You may put any HTML content in each gallery item and mix content types. In this example lazy-loading of images is enabled for the next image based on move direction.

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.

Colorbox – a jQuery lightbox

Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+

Supports photos, grouping, slideshow, ajax, inline, and iframed content.
Lightweight: 10KB of JavaScript (less than 5KBs gzipped).
Appearance is controlled through CSS so it can be restyled.
Can be extended with callbacks & event-hooks without altering the source files.
Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
Preloads upcoming images in a photo group.
Currently used on more than 2 million websites.

jQuery lightgallery

lightGallery uses CSS-only approach for resizing images and videos. So it will be extremely flexible, and considerably faster than using the JavaScript approach. Lightgallery comes with a few built in modules, such as thumbnails, full screen, zoom, etc. It is easy to create your own modules, as well as detach modules that you don’t want to use.

Lightgallery supports touch and swipe navigation on touchscreen devices, as well as mouse drag for desktops. This allows users to navigate between slides by either swipe or mouse drag. You also have the option to enable animated thumbnails from the settings. otherwise normal thumbnail will be used. You can also make thumbnails automatically load for your YouTube or vimeo videos.

LightGallery video module allow you to create beautiful youtube/vimeo video galleries. It has lots of features such as automatic play/pause videos, thumbnails, posters and more. You can double-click on the image to see its actual size. Zoom-in and zoom-out controls can be used for changing the zoom values of the image. Lightgallery supports native html full screen mode as well.

Bootstrap Lightbox

A simple lightbox plugin based on the bootstrap modal plugin.

Featherlight.js

Featherlight is very, very lightweight. 400 lines of JavaScript, 100 of CSS, less than 6kB combined. Don’t be fooled by Featherlight’s small footprint! It’s smart, responsive, supports images, ajax and iframes out of the box and you can adapt it to your needs.

To get started, simply add the “data-featherlight” with a selector, an image or an ajax-url. It’s that simple.

Many lightbox plugins try to handle everything for you. Even the ones called «simple» or «lightweight». Featherlight is different. It’s for the pro who knows what he’s doing and just needs a barebones plugin.

Thanks to very low specific css selectors and little code, it’s easy to customize and to understand.

baguetteBox.js

Simple and easy to use lightbox script written in pure JavaScript. Its features:

Written in pure JavaScript, no dependencies required
Multiple-gallery support, allows custom options for each
Supports swipe gestures on touch-screen devices
Modern and minimal look
Image captions support
Responsive images
CSS3 transitions
SVG buttons, no extra files to download
Around 2.3KB gzipped

chocolat.js

Chocolat.js enables you to display one or several images staying on the same page. The choice is left to the user to group together a series of pictures as a link, or let them appear as thumbnails.

Chocolat can be opened fullwindow (as many other lightboxes) but it can also be opened in a container (a block element in the page). With recent browser you can also navigate through the images fullscreen.

You can choose either to crop the image or to make it perfectly fit its parent (be it any kind of block) but it’s still quite unclear. Choose to restart at the beginning once you reached the last image. You can navigate through the images using your keyboard and assign keys.

Lightbox 2

The original lightbox script. Eight years later — still going strong! Lightbox is small javascript library used to overlay images on top of the current page. It’s a snap to setup and works on all modern browsers.

prettyPhoto

prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.

Litebox

Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving us the basic tools we need to make this work and you the ability to expand.

Lightview

Lightview was built to change the way you overlay content on a website.

Clean: Designed to compliment your content.
Fast: Smart image preloading.
Easy: Customizable without having to know CSS.
Rounded: Adjustable rounded corners, no PNG images required.
Smart: Content resizes to always fit on your screen.
Slideshow: One button slideshow.
Works on all modern browsers.

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.

FaceBox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.

It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

iLightBox · Revolutionary Lightbox Plugin (premium)

iLightBox allows you to easily create the most beautiful responsive overlay windows using the jQuery JavaScript library. By combining support for a wide range of media with gorgeous skins and a user-friendly API, iLightBox aims to push the Lightbox concept as far as possible.

WordPress Pro Lightbox plugin (premium)

Images can be displayed form WordPress Media Library, any URL, Instagram or Twitpic. Supports displaying videos from WordPress Media Library or media services like Vimeo and YouTube, Metacafe, DailyMotion or Twitvid.

WordPress editor allows you to include formatted text with images, to use SHORTCODES, or to create something with HTML/CSS. Paste a link to display any website, Google Maps, Google Street View, Google Maps Search results, Slideshare and a lot more.

JackBox – Responsive Lightbox (premium)

JackBox was built with 2 goals in mind:

Create a lightbox that worked on mobile devices, even smartphones. JackBox is “responsive”, which means it’s 100% compatible with responsive websites.
Create a lightbox where every image, video and song can be individually shared. This means when someone “likes” one of your photos, when a friend clicks on the shared link, they’ll instantly be shown the exact photo that was originally shared.

Flipping Lightbox 3D with jQuery, and CSS3 (premium)

FlipLightBox.js is a responsive jQuery lightbox plugin that is focused on providing fancy 3d flipping effect with css3 and javascript.

Features:

3D Flipping Effect with CSS3
Support both Image Lightbox and HTML Dialog
Image Gallery
Responsive jQuery Plugin
15+ Options for Customization
Support All Modern Browsers (chrome 16+, firefox 12+, safari 5+, opera 12+, and IE10+)
Support PC, Mac, iPad, iPhone
Keyboard shortcuts for close, navigation left and right

Kube Lightbox Responsive Plugin (premium)

Kube Lightbox is an out-of-box ready lightbox plugin for WordPress which supports a wide range of media and built with advanced techniques which makes it the fastest and slickest lightbox script around.

Features:

Media Support – The plugin supports a wide range of media apart from images which includes : Video from Youtube, Vimeo, Metacafe and Dailymotion, Google Maps, Instagram and iFrames.
Social Sharing – You can activate Facebook, Twitter, Google +1 social sharing for lightbox content.
Automatic Lightbox – Automatically add lightbox to WordPress image galleries, image links and video links on posts and pages.
CSS3 Hardware Acceleration – The plugin makes full use of hardware accelerated CSS3 animations and falls back to jQuery animation on unsupported browsers.
Mobile Device Ready – The lightbox is fully responsive and uses retina icons on mobile devices. It also supports touch swipe to navigate between galleries.
Lightweight and Optimized for Speed – Apart from hardware and GPU acceleration, the script uses reusable DOM elements and destroys them when the lightbox is closed which makes it highly efficient on mobile browser.

I believe you’ll find interesting and useful these articles too:

Source: http://ift.tt/WS70uG

Pages

Web Design