Using imagery is fundamental to create engaging content that captures attention. It not only adds visual interest but can quickly communicate important information for time-poor visitors.

This quick tutorial focuses on how to enable the 'lightbox' feature for important, detailed images so users don't miss out on key information.

In filmography, a lightbox is used to provide uniform lighting to a subject so that the viewer's attention is more clearly focused. In web design, the term lightbox is often used to refer to a user interface element that lets users expand media content to take a closer look.

Within Social Pinpoint, a lightbox feature is used to open a larger, full-screen version of an image (along with a caption), free of any surrounding text. It also provides zoom controls so users can zero in on specific areas of the image, or even download or share the image on social media

The lightbox feature is great for maps, plans and other detailed graphic and beneficial to participants with visual impairments or those who view your content on a mobile device.

The lightbox works automatically in the Gallery or in the tooltip of Hotspot but needs to be manually enabled in the Image tool when required.

Let's take a look at when to use the lightbox feature and how to turn it on in the Image tool.

When to use

By way of example, let's take the following two images:

Image 1 shows a picture of a group of people meeting at a table. It is meant to convey an atmosphere of collaboration, where people come together in a positive and constructive environment.

This image is purely decorative in nature and does not contain any important information that participants need to understand. We may therefore consider making this image smaller, as its current position occupies a significant amount of space.

Better yet, we may even choose to in-line the image around some text to save our important 'real estate' on the page (as per the example) and break-up the text.

Image 2 on the other hand provides a detailed drawing of a proposed concept plan, which contains essential information our participants should review so they can leave informed feedback. However, the numerous annotations and details tan only be seen on the page by eagle-eyed visitors, or may not be legible at all.

It's in situations like these that we'll want to enable the lightbox feature, so our visitors can expand the image to see the detail.

You can tell when the lightbox is enabled by hovering over the image to display a magnifying glass icon, that invites visitors to interact with the image. Clicking the image will open it within the lightbox. Try clicking the image above to test out the lightbox.

⚡Pro Tip - If you have a detailed image like the one shown above, with lots of text annotations, try using the Hotspot tool to bring your content to life and make it interactive.

How to enable the 'lightbox'

To enable the lightbox within the Image tool simply open the Settings, scroll down to the bottom of the 'Basic' tab and check the option to 'Open Image in Lightbox'.

Next time you have an image that has important information on it, don't forget to enable this very important lightbox feature.

⚡Coming Soon - Interested in learning more about using imagery in Social Pinpoint? Stay tuned for our upcoming course on mastering imagery on the web.