FooBox v2.3 – The Best Mobile Responsive Lightbox Ever Conceived by Man

We’ve just pushed an update to FooBox that brings it to v2. It’s now available as an automatic update for current license holders. This is a massive update, with a lot of important things to report. You can read the entire Changelog at the end of this post, but we’ll list some of the most interesting additions first.

Most Notable Updates

As we initially reported here, the navigation and social sharing layout and functionality has been redesigned for better display and usability.

Streamlined Mobile Navigation

Since we’re in the business of visual solutions, I think it’s best to simply show you a before and after of the new navigation on mobile devices…

Lightbox for Mobile on WordPress
Click to Enlarge

You’ll notice that the Close and Play buttons have now been combined with the previous/next arrows, and all moved into one horizontal navigation bar instead of two. You’ll also notice one more button in that group on the far left. See it? That’s the new mobile sharing button and that brings us to the next heading…

Mobile Social Sharing Gets Snazzier – Leaves More Room for your Lightbox Content

As you can see in the image above, the social icons no longer take up space by overlaying on top of your FooBox content. All social icons have been moved under the social sharing icon. Again, it’s probably best to just show you what that looks like when clicked…

Lightbox Image Social Sharing
Click to Enlarge

HUGE Speed Improvements When Loading First Image

After you update, go ahead and load an image in FooBox on your site. The first load is almost instantaneous. Boom!

iOS7 Navigation Bar Bug Squashed

We talked in more details about this here, but in short the toggling of the Safari navigation was really screwing with the positioning of our FooBox elements. This was a pretty big hurdle that many web developers ran into. We solved it. If you want to read more of the nitty gritty code monkey description, go here.

Facebook Share Issues and Changes

As of Feb/March 2014, the Facebook sharer.php no longer accepts custom parameters. The short story is that when using the Facebook sharer method, it no longer let’s us pass the specific image that was shared. And even when we pass an image, Facebook rather looks at the opengraph meta tags on your page and ignores everything else. The only good thing about the sharer, is that it gives the end user the option of where they want to share the content:

fb-page-choice The Facebook Feed Dialog method of sharing is now preferred, and it supports passing in custom images and captions. It works perfectly for sharing specific images, however, it has some drawbacks: you need to setup a Facebook App ID in order to use it, and it also does not give you the option of where you would like to share the content (as the sharer does in the above image). But for us, the drawbacks don’t come close to the limitations of the sharer. And the main point of sharing from FooBox is to share the individual image you clicked on, so take our advice and change over to the Feed Dialog. Both you and your visitors will benefit!

So if you are using the old sharer method, we’ve enabled a notification to users in the Settings if we detect that the Sharer method is enabled for your site:

Facebook Sharer Updated!

Facebook have recently changed the way content is shared using their simple sharer method (which is enabled in FooBox at the moment).
Your visitors will no longer be able to share individual images. We recommend you enable the Feed Dialog Method of sharing below, which will allow for individual image sharing as before.

New Settings

  • “Below” Vertical Social Positioning
  • iFrame Allow Fullscreen
  • When to Show iFrame Content
  • Caption Animation
  • Slideshow Autostop
  • Navigation Buttons Position
  • Check custom “rel” attribute (Advanced)
  • You’ll also notice a new “FooBot Says…” tab on the Settings page. Feel free to click that to see what we’ve got up our sleeve;)

What’s Next for Foo?

We’ve still got a long list of enhancements planned for FooBox, but we’re also working on two brand new products, both of which will work hand-in-hand with FooBox of course, but also with ANY WordPress powered websites. I’ll have to leave it at that for now, but please stay tuned to our blog, email lists, and social accounts for some updates on these in the coming weeks.

Full Changelog

Last updated 2 May 2014 2014.05.02 – version

  • Fix for share links on phone

2014.05.02 – version

  • Fix for when there are no buttons on mobile

2014.05.02 – version

  • Mobile meta tag check

2014.05.01 – version

  • Fixed issue with selector loading order

2014.05.01 – version

  • Added new filter “foobox_js_selectors” to alter existing selectors
  • Big speed improvements to loading the FooBox for first image

2014.04.30 – version

  • Fix for sticky captions hiding description on small images
  • Added partner tab “FooBot Says…”
  • Changed social tab text to promote Feed Dialog over sharer
  • Added check and warning if no app ID given when using Feed Dialog
  • Added advanced setting for checking for custom rel attribute
  • Added setting for Navigation Buttons
  • Added setting for slideshow autostop

2014.04.21 – version

  • Added new setting ‘Caption Animation’

2014.03.31 – version

  • Fixes for social share on phone landscape
  • You can close social share modal on phone by clicking overlay

2014.03.24 – version

  • Added new setting: ‘When To Show iFrame Content’
  • Added new setting: ‘iFrame Allow Fullscreen’
  • CSS Fix for fullscreen affiliate link

2014.03.23 – version 2.2.1

  • Fixed few bugs in fullscreen mode
  • Increased media load speeds
  • Included ‘Below’ social vertical position

2014.03.08 – version 2.2.0

  • Increases modal z-index
  • Fixed IOS7 nav bar bug!
  • Changed social share icon layout on phones
  • Added a few filters and actions for better extensibility

[button color=”#2B70A3″ link=”https://fooplugins.comfoobox/support/”]Bugs? Praise? Use our Support Form.[/button]