The Responsive Lightbox Gallery Widget

A completely customizable and fully responsive lightbox gallery for your Adobe Muse website. You can use the gallery for images, Youtube and Vimeo videos, and HTML5 videos.

Before beginning, add the 'RLG - Add First' widget to the top of your Adobe Muse website. It can be placed on the Master Page as well.

Now, select the type of gallery you wish to add from the Library Panel (Window> Library). You have mainly 4 options to choose from:

- RLG - Images

- RLG - HTML5 Videos

- RLG - Youtube and Vimeo Videos

- RLG - Youtube and Vimeo Videos - With Poster Image

On this page, we are using 'RLG - Images' widget. The widget options and features are discussed below.

01

Add multiple galleries and unlimited items on one page

FEATURE #ONE

Each new lightbox gallery must have a unique instance number.

In second section - 'Gallery' within widget options, you can select the number of images to add. To have multiple galleries, simply copy and paste the first gallery and then change the instance number for each additional gallery.

You can add up to 12 images. To add more images to a gallery, select the 'RLG Add-On - Images' widget from the library panel. For each additional Add-On widget, change the 'Add-On Instance Number'.

In 'Thumbnail Options' section within widget options, you can change the thumbnail width and height, margins, border width and radius, border color and type, and thumbnail alignment.

Within this section, you can choose to zoom the thumbnail image on hover by selecting the 'Enable Zoom on Hover' checkbox.

You can add images for the thumbnails in the 'Thumbnail Images' section within widget options.

It is recommended to optimize your images before adding into he widget. That is, you should have different image size for thumbnails and for actual images. Adobe Muse does not automatically optimize images within widgets.

In 'Lightbox' section within widget options, you can select slide snimation, easing, and transition speed

Within this section, you can completely customize each and every color in the lightbox, and select font type and font weight.

03

Easily customizable lightbox with 20+ CSS3 and easing transitions

FEATURE #THREE

You can customize all of the colors in the lightbox and choose from various options in the lightbox gallery

There are various other options to enhance the look and feel of the gallery which can be easily enabled or disabled such as - touch support for mobile devices, mouse drag support for desktops, fullscreen and zoom support, keyboard navigation, download support, and much more!

04

Add title, description, alternative text, and links to images

FEATURE #FOUR

In each image section within widget options, you can add an image, image title and description, alternative text, and link. You can also choose to open the link in a new page.

Linking Internal Pages - if the page name is 'About Us', the link would be  -

./about-us.html

Home Page is always - ./index.html

Linking Anchor Points - if there's an anchor point called 'our_team' on 'About Us' page, the link would be -

./about-us.html#our_team

Back to Shop

SAMPLES

Make Better Websites, Starting Today.

All access pass for only $49/year.

Have questions about our products?

We are here to help.

Tutorials

Subscribe

Browse Widgets

Tutorials