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.
Add multiple galleries and unlimited items on one page
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'.
Completely customize the thumbnails
For thumbnails, you can add smaller sized versions of actual images that open in a lightbox thus making the widget lightweight and images to load faster.
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.
Easily customizable lightbox with 20+ CSS3 and easing transitions
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!
Add title, description, alternative text, and links to images
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.
As aforementioned, the font type and font weight for the lightbox can be changed in the 'Lighbox' section within widget options.
Linking Internal Pages - if the page name is 'About Us', the link would be -
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 -
Back to Shop