New feature – Lightbox gallery!

Hello everybody! Today we are pleased to announce that the long-awaited and frequently requested by many users feature is now available – the lightbox gallery!

How lightbox gallery works?

Before the lightbox, we had 3 options that defined what would happen when the user clicks a picture in the widget:

  • The user can be redirected to the Instagram website or app, where they will see the post
  • User can be redirected to the Instagram website or app, where they will see the full profile
  • Clicks are blocked, no action is performed

You can read more about these 3 options in this article: New feature – click event.

The fourth option is the Lightbox option – when the user clicks some image in your widget, the popup/modal with an overlay with the larger version of the image will be displayed. Visitors of your website will not be redirected to the Instagram website, but they will be able to browse the photos directly on your website. Of course, the button to view the post on Instagram is also available in the lightbox😄.

Below is the example of the lightbox gallery:

Screenshot showing the example of the lightbox gallery on our website.

How to enable a lightbox gallery in the Instagram widget?

The easiest way to enable the pop-up lightbox is to expand the Lightbox gallery section and turn on the Enable lightbox option.

Another option is to expand the Posts section and select the Open lightbox in the Post click action option.

Screenshot showing Lightbox gallery section with the switch to enable the modal.

How to customize the gallery?

Our lightbox has a ton of options and almost every part of it is customizable. The modal can either be very simple and show the photo only or it can contain a lot of elements, such as information about a number of likes or comments, your profile photo, etc. We leave the appearance of the dialog to our users😉.

Items visible in the gallery are controlled by the Lightbox elements option in the Lightbox gallery section.

Following elements can be enabled/disabled:

  1. Profile photo* – Your Instagram profile picture
  2. Name* – Your full Instagram name
  3. Username – Your Instagram user handle
  4. Caption – description of your Instagram post
  5. Likes* – number of likes of your post
  6. Comments* – number of comments of your post
  7. View on Instagram – a button that redirects the user to an Instagram website or app
  8. Navigation – previous/next post buttons.

* Elements marked with the asterisk are available only for Instagram accounts connected via the Business connection. If your account is using the Consumer connection, these options will be grayed out. You can read more about the difference between consumer and business connections.

Elements that will be visible in the modal have a purple border around them.

Screenshot showing the field with elements that can be visible in the gallery.

In the same section, there is also an option to control the spacing or create a frame around the photo displayed in the gallery.

Screenshot of the padding option for lightbox gallery,

Moreover, in the Colors section of the widget creator, there are two controls with which you can set the overlay color and the color of the dialog in the gallery.

Screenshot showing two controls for controlling the colors of the ligthbox elements.

Some options, such as the appearance of the buttons or the color of the texts, are common to both the widget and the gallery. For example, if you set the color of the buttons in the widget header to orange, the buttons will look the same in the lightbox.

The navigation buttons for switching between posts (next and previous post arrows) will look the same as the buttons in the Slider widget. You can change the appearance of these elements in the Buttons section.

Support for Instagram carousel posts and videos

The Instagram carousel is a type of post with multiple photos and videos (up to 10 photos). If a user clicks on such a post in the widget, additional buttons will be available to scroll through the entire carousel.

We also support videos that can be played directly in the gallery window😄.

Techy stuff🤓

The footprint of the lightbox is minimal. Most of the code, like Javascript and styles, is requested dynamically when the user clicks on the photo in the widget. This means that they will only be downloaded when the user actually performs some action. They will not be loaded every time your page is displayed. This will affect its faster loading, reduce the number of requests and save some bandwidth for mobile users.

Our lightbox was created from scratch and contains only the minimum that is required for the purposes. There are no external dependencies like jQuery, React, etc.

Of course, it is fully responsive and mobile-friendly. It can be navigated with touch gestures too!

It was created with accessibility in mind – there are proper roles and translatable texts. Users can also navigate the gallery easily with the keyboard.

The styles in the Custom CSS field will not affect the lightbox look. It only affect the styles in the widget. Lightbox is loaded directly on the user’s website, not inside of the iframe with the widget. You can simply add the additional styles to your own CSS/SASS files.

Comments (2)

  • Hooray! I shall now sing your praises from the highest mountain!

    sblower

    • lightwidget profile picture

      Haha! Thank you so much! Glad you've liked the new feature + thank you for your patience, we know that it was promised some time ago, but finally here it is:))

      lightwidget

You must be logged in to post comments.