Welcome to the Lightbox Widget 1.3

Link videos, images, websites, maps, and more to a lightbox with The Lightbox Widget from Muse For You. Lightbox can be applied to any element on your Adobe Muse website.

Before you begin, drag 'The Lightbox - Add First' widget from the Library Panel (Window > Library) and place at the top of your Adobe Muse website.

If you would like a gradient for the lightbox background, select 'The Lightbox - Add First - With Gradient' widget. You can customize the color of the lightbox background and shadow within these 'Add First' widget options.

01

Link a YouTube or Vimeo video to the Lightbox

FEATURE #ONE

Make sure that the graphic style name of the element and that in the widget options are same

After placing any of the add first widgets at the top of your website, select the element you would like to open the lightbox when clicked on. Apply a graphic style to it via built-in Adobe Muse 'Graphic Styles' panel. Then, drag and drop 'The Lightbox Widget' from the library panel and within the widget options, enter the graphic style name you just applied.

Now, select the element again, go to the 'Hyperlinks' section in Muse and paste-in the YouTube or Vimeo video URL, and done! In this example, we have a 'Play' icon SVG image that opens a YouTube video in the lightbox with gradient background and no shadow.

02

Link an image to the Lightbox

FEATURE #TWO

Scroll down to see the widget in action. For this example, we have used a custom cursor image which should always be less than 128 x 128 and in PNG format. Custom cursor image can be added in the widget options.

First, apply graphic style to the element you would like to open an image in a lightbox when clicked on. Enter this graphic style name in 'The Lightbox Widget' options.

Add image by going to File > Add Files for Upload'. Link the element to the image by going to the built-in Adobe Muse 'Hyperlinks' section.

03

Linking a website or video to The Lightbox for Hover Box

FEATURE #THREE

Make sure that the instance number of the hover box and that in the Lightbox widget options are same

Drag and drop any of our hover box widgets. Assign the hover box to a link within the hover box widget options. In this case, we have used our 'Panel Reveal Hover Box' widget.

Now, drag and drop 'The Lightbox Widget - For Hover Box' widget onto your Adobe Muse website. Make sure this widget has the same instance number as the Hover Box.

04

Link a Google Map to the Lightbox

FEATURE #FOUR

In this example, just for demonstration purpose, we have used 'The Lightbox Widget - For Button Collection'. However, it is not mandatory to use this widget for linking Google Maps to the Lightbox.

Search for the location on the Google Maps Website. Click 'Share' and then click 'Embed a Map'. Now, copy the URL link immediately after 'iframe src' (highlighted in pink below). Ignore the width height properties after the link within the embed code. It should look something like this:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3172.495444120286!2d-121.89626898505962!3d37.33077767984273!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fcca5b2cb83d7%3A0xe2d0d2f40784e22!2sAdobe+Headquarters!5e0!3m2!1sen!2sin!4v1525433945427"width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe src>

Open 'Button Collection' widget options, enter this URL in 'Button Link' field in 'Button' section.

If you are linking the Google Map to a state button, text, shape, or image within Muse, you need to select that element and then enter this URL into the built-in Adobe Muse 'Hyperlinks' section in the upper toolbar to link that element to the Google Map.

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