JackBox - Responsive Lightbox, WordPress Plugin

• By: CodingJack
• codecanyon.net/user/CodingJack

Thank you for purchasing JackBox - the WordPress Plugin edition. This document will help you get started. Feel free to contact me from my profile page (link above) if you have any questions.

Have a Question? Check out the FAQ's Page. Or, search the item's discussion page:

Need this item customized? Contact CodingJack

Special Notes

• JackBox uses deep-linking (every item has its own unique url) by default.  If your website already uses a deep-linking system, such as an Ajax-driven website, this feature will need to be turned off.  Refer to Global Settings to toggle this feature.
• 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 only supported in Chrome and Firefox.
• In Chrome, when local HTML5 video is played, lightbox fullscreen mode is not supported. However, the HTML5 video player will have its own fullscreen button in Chrome. If having both functionalities is important, use the Flash version of the video player which has a mobile fallback.
• If you wish to edit the code, everything you find directly inside the "source" folder pertains to the WordPress plugin. The one exception being the "jackbox" folder, which contains everything for the actual lightbox including CSS files, icons, etc. Screenshot below:
  
  

Vimeo and YouTube

JackBox makes working with Vimeo and YouTube easy.  First, a small thumbnail is not needed, as JackBox will go ahead and load the video's thumbnail directly from Vimeo.com and YouTube.com.  Second, all you need to do to load a Vimeo or YouTube video is to go to that video's homepage and copy the link directly from the browser's address bar:

Working with HTML5 Video and HTML5 Audio

JackBox supports HTML5 Audio and Video.  The default file type for video is mp4 and the default for audio is mp3. 

Firefox, in particular, does not support mp3 or mp4.  Because of this, alternative file-types need to be created.  For video, JackBox is designed to fall back to the webm file-type when mp4 is not supported. For audio, JackBox will fall back to the ogg file-type when mp3 is not supported. 

Because of this, every audio and video file must have two versions:

• The default ("mp3" for audio, "mp4" for video)
• The fallback ("ogg" for audio, "webm" for video)

For the fallback to work properly, the media item's name must be identical for each version.  Only the file's extention should be different.  Here's an example:

• song.mp3
• song.ogg

When entering the video urls, always use the default file-types (mp3, mp4). JackBox will then dynamically replace the mp3 or mp4 versions with the ogg or webm fallbacks when neeeded. 

To create the ogg and webm versions of your media, I recommend the following tools:

• http://media.io/ (mp3 > ogg conversion)
• http://www.mirovideoconverter.com/ (mp4 > webm conversion)

The traditional "flv" video file type's are not needed even for the Flash fallback.  This is because the Flash fallback can play the "mp4" file-type.

You may find that the audio and video does not work in Firefox.  If you experience this, it likely means that your server has not updated to support the latest HTML5 media extentions.  But you can manually update your server.  Here's how:

1. Download the .htaccess file from the root directory of your server.  If one does not exist, create a new text file on your computer and name it htaccess.txt.
2. If you were able to find the .htaccess file on your server, rename it to "htaccess.txt".  Your computer may alert you about changing the file's extention.  Just click "ok" if you get this message.
3. Next, open htaccess.txt in your favorite text editor, and add the following to the bottom of the file:
   
   AddType audio/ogg .ogg
   AddType video/webm .webm
    
4. Next, save the file, and upload it to the root directory of your server.  Then delete the previous .htaccess file from your server, and rename the htaccess.txt file you just uploaded to .htaccess.

Installation Screen Shots

If you're reading this, it means you've downloaded the source files and unzipped the main folder.  Inside the main folder you should see two items:

There's no need to unzip the item named "wp-jackbox.zip".  WordPress will do this for us automatically.  If you've already unzipped this item that's ok.  But we'll be working with the zipped version for the purposes of this tutorial.

To install the plugin, login to your WordPress admin and click the "add new" button in "plugins" menu as shown below:

Next click the "upload" button as shown in the image below:

Next click the "browse" button shown in the image below:

Next locate and select the zip file on your computer (shown in the first image above).  Once selected, click the "Install Now" button as shown in the image below:

After a few seconds you should see the image below.  Next click the "Activate Plugin" link.

And that's it!  You should now see JackBox in your list of plugins.  From here you can click the "Edit Settings" link or head on over to your pages/posts and start building your JackBox items.

Installation Video

Global Settings

Content Overview

JackBox for WordPress is built on a simple idea: Connect your pre-existing page and post content to the 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!

Once you've installed the plugin, Here's what you'll see inside your content editor:

Check out the "Content Examples" to see how easy it is to start creating JackBox items.

Content Examples

Image Example

Text Link Example

Vimeo Example

YouTube Example Example

Local Video Example

Audio Example

iFrame Example

HTML Content

Multiple Items

Hidden Items

More works by CodingJack