How to Load a PDF in a Lightbox on Mobile Safari (and elsewhere)

PDF inside lightbox on an ipad

A lightbox—which opens on top of the site (or app) that you are currently viewing—is a great way to load external content, but remain on the same page once the content is closed.

As a designer, a lightbox is a useful tool to keep readers in your “experience” and not force them to find their way back to your page.

Technically speaking, a lightbox loads external content into an <iframe>.

in5 (InDesign to HTML5) let’s you add lightboxes with a single checkbox—no coding or hassle required (and no thinking about iframes)!

The Problem: iOS, Lightboxes, and Multipage PDFs

A handful of in5 customers found that when loading multipage PDFs into a lightbox on iOS devices (iPads and iPhones), you can’t navigate to the second page.

This happens in part because iOS has a PDF viewer built into the web browser.

Normally, the built-in PDF view is quite handy, but when it’s loaded into an iframe, you don’t have access to the page navigation.

Google Drive to the Rescue!

Fortunately, if you

  1. upload your PDF to Google Drive and
  2. grab a shareable link (details below)

The Google online PDF viewer will let you navigate through all the pages (even in a lightbox).

Simply replace the hyperlink to your PDF with the Google Drive shareable URL.

Other sharing services that can view PDFs online would probably work too (e.g., Dropbox), but you may want to factor in how much user interface (UI) and branding of the service itself adds around the document.

Details on How to Get the Shareable Link

  1. While previewing your PDF in Google Drive, go to the fly out menu in the top-right of the viewing window.
    embed under flyout menu
  2. Then grab only the URL portion from the Embed dialog (leave the HTML code).

embeddable URL

Google Drive will keep the UI minimal if you add &embedded=true to the end of the URL.

Original Source: http://stackoverflow.com/questions/15480804/problems-displaying-pdf-in-iframe-on-mobile-safari

Bonus Tip

You can also view files through the Google Docs viewer, even if they are external and not hosted on Google Docs, using the URL below:

https://docs.google.com/gview?url=EXTERNAL_URL_TO_YOUR_DOC

Interactive White Paper Made by in5 Customer

Another fantastic project created with InDesign and exported with in5.

Check out the video below to see what Jake Hoisington and Brenda Fletcher created for Lincoln Financial Group.

Test Drive in5

How to Build a Drop Down Menu in Adobe InDesign

An expandable menu is a great way to collapse content that is only needed some of the time. Hiding the navigation helps the user focus on the content.

drop down menu in InDesign

Click to see a larger image.

This sample article from the InDesign UX Design Patterns guide details the steps to creating a drop-down menu.

How to Build an Expandable Menu

  1. On a Master page, create an MSO with an “empty” state (see the Modal Dialog in the full guide for details on this step).
  2. Build the menu background and buttons inside the “active” state of the MSO.
  3. Add Go to Page (or Next/Back, if you prefer) actions to each button. You may also want to add a Go to (empty) State
  4. Add an action to trigger the hiding and showing of the menu. If you have a single “toggle menu” button and a two-state MSO, you can use Go to Next State
  5. Apply the Master page to the pages where you want the menu to appear.

* Yes, a button can have multiple actions. 🙂

The Extra Mile

You can also create a sequenced animation within the menu state of the MSO to visually “build” the menu onto the screen.

Compatibility

in5, FXL ePub, PO.

Interactive PDF cannot be used because it does not support MSOs.

Tip: If you absolutely have to create a PDF-compatible version, you can use hide and show buttons.

The Magic Way to Create a Menu

The Menu Builder Wizard that comes with in5 makes this entire process very easy (it even adds the button actions). Check it out in the video below.

More UX Design Patterns for InDesign

InDesign UX Design Patterns full guide (cover image)Do you want to learn how to create more working User Experience (UX) and User Interface (UI) elements from InDesign without coding?

Check out the complete InDesign UX Design Patterns guide (it’s free with an email sign-up).

Get the guide

Script HTML5 Export from InDesign using the in5 API

Check on this new video on how automate the exporting of HTML5 from InDesign using in5’s API.

The scripting automation makes it easy to batch process large numbers of InDesign files.

You can test out the API with the free trial of in5.

InDesign to SimpleHTML – Easily Repurpose Content with Uncluttered Markup

Simple HTML From InDesign header image

SimpleHTML is a new tool for InDesign that exports bare naked HTML from a Text Frame or Story.

There’s no <head> or <body> tag, no classes, no <div> wrappers, no clutter—just the HTML that you need to paste into a blog post (or email) editor.

(more…)