JackBox - Responsive Lightbox - WordPress Plugin

View the jQuery Version

2.2 Update – 12/10/2014

Added new “Ajax Compatibility” option, which eliminates the need to use the JackBox API methods “addItem” or “removeItem” for Ajax-based sites.

Added compatibility for ThemePunch’s Essential Grid. Ess. Grid has a special “JackBox Lightbox” option in its “Global Settings” that can be chosen, and then when selected, all Essential Grid items meant to load in the Ess. Grid default lightbox will open in JackBox instead.

2.0 Update – 4/18/2014

Major update for WP 3.9: WP 3.9 upgraded TinyMCE, so older versions of JackBox are no longer compatible with WP 3.9+. This only applies to the backend, so if you aren’t planning on editing any of your pages/posts that contain JackBox items any time soon, you do not have to update the plugin if you don’t want to. The updated version of the plugin is compatible with the latest WP, and backwards compatible to WP 3.4.

To update the plugin, download a fresh copy from your CodeCanyon “downloads” page, then deactivate and delete the current installation, and upload/install/activate the new version. Your previous settings and JackBox items will remain intact throughout the process.

iframe scrolling now available on mobile

Dark skin added to global options

“Gallery to Connect” option added for compatibility with WP native galleries, NextGEN, and anything else you want to automatically open in the lightbox (no longer required to build JackBox items manually from the page/post editor).

“Gallery to Connect” usage

NextGEN: Find the gallery’s outer div ID or class name and add it to the settings option.

Replace built-in lightbox such as FancyBox with JackBox: Disable your fancybox plugin and/or script, and add the class name ”.fancybox” to the settings option.

Connect any content by adding it’s hyperlink class name, or by adding the class name or ID of the content’s outer container.

Example connecting multiple content (using comma as divider):

.gallery, .fancybox, .my-custom-class, #ngg-gallery-some-id-number

Facebook and G+ buttons now show extended share options when clicked (option to post a comment along when “liking” or “+1” an item, option only available on desktop).

JackBox – A Responsive Lightbox with Real Social Sharing

JackBox for WordPress is built on a simple idea:

Connect your page and post content to a lightbox.

This means no shortcodes and no gallery managers to figure out. Instead, JackBox is baked into your content editor and works just like the traditional “hyperlink” button. Except instead of just adding a simple link, you create a lightbox item!

JackBox was originally 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.

Smart Script Loading

The JackBox stylesheets and scripts will only load into your web page if the page contains a lightbox item. This means that on the pages where no lightbox items are used, no unecessary plugin files are loaded. When JackBox CSS and JavaScript files are loaded, they load asynchronously, helping your web pages to load faster.

Features Include

Localized for WordPress

Responsive / Mobile Ready

Retina Ready Graphics

Share any item through Twitter, Facebook, Pinterest and Google+

Deep-linking, every item has it’s own unique link

Touch Swipe for Mobile Devices

Genuine Fullscreen for Firefox and Chrome

Group any items together and create item categories

Youtube Video w/ Mobile Fallback

Vimeo Video w/ Mobile Fallback

Automatic Youtube and Vimeo thumbnail loading

HTML5 Video w/ Flash backup

HTML5 Audio w/ Flash backup

Flash Video w/ Mobile Backup

Load HTML Divs, iFrames and Google Maps

Built-in Thumbnail Hovers

CSS3 Preloader for smoother animation

Options Include

Optional gallery-style thumbnails

Options to set the lightbox thumbnail width and height

Optional item titles and descriptions

Option to show the description info by default

Option to start with thumbnails hidden

Option to autoplay all videos either globally or individually

Option to zoom smaller images automatically either globally or individually

Option to preload graphics for a smoother lightbox experience

JackBox Makes Thumbnails Easy

First, you have the choice to load a specific thumbnail of your choice.

If none are chosen, and the lightbox item is a clickable thumbnail to begin with, JackBox will grab and resize that thumbnail instead.

If these options aren’t available, JackBox will then attempt to grab the large version of the lightbox image and resize it.

And as a last resort, JackBox will just use a default thumbnail of your choosing.

Important Notes

The plugin is not automatically compatible with other gallery plugins, and support for plugin or theme compatibility is not included.

The videos demonstrate how the plugin works. Be sure to watch them before deciding if JackBox is right for you.

The plugin will not automatically override any current lightbox system your website currently uses. Instead, you will need to connect all of your existing lightbox to JackBox manually once the plugin is installed.

Images, Video and Audio shown in the preview are not included in the download source and are for demonstration purposes only.

Autoplay for video and audio is not available on mobile due to device restrictions.

Mobile touch swipe functionality is only available for images.

Fullscreen mode is not available for IE, Opera or Safari.

You may notice a “page jump” when the lightbox is entered. This is because the lightbox removes the page’s scrollbar when entered. This is done intentionally because the page’s scrollbar serves no functional purpose inside the lightbox, and in this developer’s opinion, the lightbox experience is much more pleasant without it. When the lightbox is closed, the page’s scrollbar will reappear and the page will automatically scroll to its previous position.

On mobile devices the page behind the lightbox will scroll to the top.

When sharing via Facebook, only the lightbox item’s link will get posted. Any image and title that gets posted will be explicitly chosen by Facebook.

The Facebook “like” button is built to be a “like/unlike” button only. The traditional Facebook comment box is not supported.

The graphics and icons are retina-ready, photographs are not.

If you plan to use the plugin in a way not demonstrated in the usage videos, such as connecting content to the lightbox without using the plugin’s built-in methods, please use the non-WordPress version of the plugin instead (support for manual usage is only included with the non-WordPress version).