JackBox - Responsive Lightbox - WordPress Plugin

View the jQuery Version

jquery responsive lightbox

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).
    • WP Native gallery example: Add class name ”.gallery” to settings option.
    • 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:

  1. 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:

  1. Create a lightbox that worked on mobile devices, even smartphones. JackBox is “responsive”, which means it’s 100% compatible with responsive websites.

  2. 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.
Simple.     Powerful.     JackBox WP.     Watch the Videos.

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

  1. First, you have the choice to load a specific thumbnail of your choice.
  2. If none are chosen, and the lightbox item is a clickable thumbnail to begin with, JackBox will grab and resize that thumbnail instead.
  3. If these options aren’t available, JackBox will then attempt to grab the large version of the lightbox image and resize it.
  4. 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.
  • Ajax-based themes are not compatible with JackBox
  • 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.
  • iframe scrolling is not supported on mobile devices
  • 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).

Credits

VIDEO
Photo And Typo Opener by Muko
App/Service/Product Promotion by JakubVejmola
Wedding Album by muratoz
Sliding Presentation by Webarteo
Company Timeline by DEM-G

AUDIO
One Fine Day by Symphony-of-Specters
Your Little Planet Corp by MusicPremium
Spring by SilverSnow
Soft Introduction by Webarteo
Got Joy by frozensatellite

PREVIEW IMAGE SOCIAL BUTTONS
Kim Peterson

CODE LIBRARIES
jQuery
jQuery Address
Modernizr
StackBlur
Jacked

More works by CodingJack

WordPress HTML5 Video Player

WordPress Slider
by
by
by
by
by
by