Read this article to add, configure, and test Fullscreen and Thumbnail Slideshow Widgets in Adobe Muse.
Slideshow widgets in Adobe Muse are interactive widgets that exclusively work with images. Similar to the Tabbed Panel widget, when users click a thumbnail container, the corresponding hero image version is displayed in another larger container on the page.
Adobe Muse supports the following types of Slideshow widgets:
In the following article, let us build a photo gallery that displays several thumbnail images along the top with a single larger image displayed below. Using the Options panel, you can control how the photo gallery behaves and displays. And you can apply settings in the Control panel to style the slideshow's appearance.
Slideshows can also be added directly to pages, but in this example, you'll nest a Thumbnails Slideshow widget inside the content area of a Tabbed Panel widget. To add Slideshows directly, follow these steps:
Open Adobe Muse. From the Welcome screen, do one of the following:
Open the Widgets Library panel (Window > Widget Library). and expand the Slideshows section. Select the required widget from this list. For example, select the Thumbnails Slideshow widget from the list, and drag the widget into the Design view.
Notice that there is a thumbnail container in the left, a container for the hero image, and the caption container below the image.
To remove the default content that is populated within a widget, right-click on the widget and select Clear Widget Contents.
To remove thumbnails, select the placeholder content (the image frame and the text frame inside the content area) and delete it.
You can configure the settings of a Slideshow widget using the Options panel that is associated with the widget. Read on to know how to enable autoplay, transition effects, swipe for touch devices, and so on.
Select your widget, and click the blue arrow icon to access the Options panel. In this example, you don’t need the Next and Previous arrow buttons. So, uncheck the Prev and Next options to disable them. Notice that the buttons disappear when you deselect the checkboxes.
Uncheck the Captions and Counter options, so that only the thumbnail trigger buttons and the larger target container remain. Look through the options and update them so that they match the settings listed below:
Different widgets have different options available and some are more complex than others. Take a moment to review the Menu options to see the available settings. Here’s a quick overview:
Add Images: Click the folder icon to browse and select the images that you want to display.
New Hero: Defines how the larger photo content is displayed in the target container.
New Thumbnail: Defines how the smaller thumbnail photo content is displayed in the trigger container.
Transition: The animation method used when the content of a target container is in the process of being replaced by another target container. These are also enabled for touch screens, so if you create sites for mobile devices, visitors can swipe their screen to see the transition play as the next content item appears.
Transition Speed: The amount of time in seconds it takes to play the animation.
Autoplay: When enabled, this setting plays the slideshow automatically, rather than an interactive experience (that requires the visitor to click each trigger to view the corresponding target in the sequence). Set the number of seconds that you want each image to display before transitioning to the next image.
Shuffle: When enabled, the images are displayed in a random order, rather than cycling through the thumbnails sequentially.
Lightbox: When this option is enabled, the slideshow dims the rest of the page with an overlay when the contents of the target container are displayed. When the lightbox window is closed, the entire page is revealed again.
Enable Swipe: When this option is enabled and the site includes a Tablet or Phone layout to display web content on a mobile device, the interactive parts of the widget will support touch screen gestures.
Thumbnails: When this option is enabled, the thumbnail trigger buttons are displayed.
Note that the Show Lightbox Parts While Editing option is enabled only when you choose the Lightbox Slideshow widget.
After reviewing the available settings, click the page area outside the Options menu to close it.
Lightbox and Fullscreen options are disabled for Fullscreen Slideshows.
You cannot enable the Fullscreen option for any Slideshow widget apart from Fullscreen.
Click and select the Slideshow widget. Use the Selection tool to drag its handles to resize the entire Thumbnail Slideshow widget, until it is approximately 790 pixels wide by 490 pixels high. You can look in the Transform panel or the Transform fields in the Control panel to check the dimensions.
While the Slideshow is still selected, click again on the Thumbnail Container, to select the container that holds the three thumbnails. Use the side transformation handles to make it wider, and then use the Selection tool to drag the thumbnails up until it is positioned above and vertically aligned with the center of the larger Hero Image container.
You can tell when the Thumbnail Container is aligned to the center of the Hero Image container, because a blue smart guide is temporarily displayed as you drag the element.
Follow these steps to add the graphics to the photo gallery while automatically generating the corresponding thumbnail and hero containers:
Click the blue arrow button to open the Options menu. Click the folder icon next to the words Add images... and navigate to the folder where you have saved your files.
Select the required image files. Click Open to close the Import dialog box.
When you select multiple image files, you are loading up the Thumbnails Slideshow widget. This strategy enables you to select multiple image files and generate a Thumbnail Container button that corresponds to each new larger image file in the Hero Image container.
The new images are added to the existing thumbnail buttons.
Double-click and select the thumbnail image that is displayed by default when you first added the slideshow. Press the Delete key (Mac) or Backspace key (Windows) to remove each one as you select it, until only the new thumbnails remain.
Be careful not to delete the entire set of thumbnails; if this happens undo the last operation by choosing Edit > Undo, and then make sure to click into each thumbnail (the Selection Indicator will display the word: Thumbnail) before pressing Backspace or Delete.
Select the container that holds the set of five thumbnail images. Use the transform handles to resize it, so that the remaining thumbnails are centered above the Hero Image container.
Slideshows are responsive or fluid, by default. To use a responsive Slideshow widget in your Adobe Muse website, do one of the following:
IIf you are adding the Slideshow widget to a responsive site, check the position and size of the widget through all your breakpoints. You can modify the content and the size of the individual elements in a Slideshow widget. You can also enable Responsive settings for individual elements such as the Prev button, Next button, Captions across different breakpoints.
After repositioning the slideshow elements and removing the placeholder thumbnail images, you can test the slideshow to see how it displays.
First, test the photo gallery in the Design view by clicking the thumbnail buttons at the top and see each corresponding hero image display in the larger container below.
Click Preview to see how the gallery will appear in a browser. Interact with the slideshow to see how the larger images appear when you click the corresponding thumbnail.
Choose File > Preview Page in Browser to see the about page displayed in your default browser.
Resize the browser and preview the Slideshow widget in different screen sizes. You can see that the Slideshow widgets are responsive by default. That is, they resize and adapt to the screen size.
You can also use the scrubber in the Design view, to preview the widgets. If you want to modify, or reposition the widget at any point, add a breakpoint and realign the widget.
Test the functionality of the Tabbed Panels widget. Click the tabs to see the corresponding content displayed in the content area containers. Then, test the slideshow in the Gallery tab, by clicking the thumbnail buttons to see the corresponding larger hero images displayed.
The Slideshow widget is another site feature you can add to your pages. You can set up a slideshow that requires visitors to click thumbnails to see a larger version of the photo, or you can create slideshows that play automatically as the page loads. AutoPlay slideshows are a great way to add compelling content to your site by presenting a series of photos. You can control how the slideshow plays back by setting the type of transition to dictate how the slides animate.
In the following subsection, you'll add an AutoPlay slideshow to the site's home page.
In Plan view, double-click the Home thumbnail in Plan view to open it for editing in Design view.
Follow these steps to create a presentation that cycles through a set of images:
In the Widgets Library, click Slideshows.
Select the Basic widget and drag it onto the page.
By default, the Basic Slideshow widget contains one dark gray rectangle (image placeholder), a placeholder caption, the number of the image (1 - 1) and two arrow buttons (next and previous) that visitors can click to navigate through a set of images.
Click the blue arrow to access the Option menu. Verify and set the following options:
This slideshow will play automatically when the page loads without any visitor interaction. If you want to create a slideshow that is controlled by a visitor's mouse clicks, set Auto Play to None and leave the check marks for Next and Previous selected in the Parts section of the Options menu.
Click away from the Options menu to close it. Notice that after making these changes, only the dark gray rectangle remains visible. At any time, you can change the configuration of widgets by changing the settings in the Options menu.
Double-click and select the Image Frame (the dark gray rectangle) and then drag the side handles to expand the slideshow to the entire width of the page.
Use the top and bottom arrows to extend the height of the image frame to fill the entire dimensions of the Home page. At the bottom, stretch the image frame until it stops just above the zigzag tiled image that appears at the top of the footer. It's okay for now that the dark gray placeholder covers the brown drip image on the right side of the nav bar.
Click the blue arrow to access the Options menu again. This time, click the folder icon at the top, next to the text: Add Images.
In the Import dialog box, navigate to your assets folder, open the assets. Click Select to add the images to the slideshows.
Click Preview to watch the slideshow play back. It's set to the slow AutoPlay speed, but you can change that setting in the Options menu if you prefer the images to cycle through the images more quickly. Notice that after the last photo is displayed, the slideshow loops back through and starts playing the first image in the set. The slideshow loops endlessly when AutoPlay is enabled.
At this point, the slideshow is complete. However, if you'd like to fix the drip on the right side of the navigation bar, there's one more thing left to do.
In Plan view, double-click the A-Master thumbnail to open it in Design view.
Use the Selection tool to select the brown drip in the upper-right part of the navigation graphic.
Right-click the drip image and choose Arrange > Bring to Front in the context menu that appears.
Click the X of the A-Master tab to close it. Open the page where you have added the Basic widget. Click Preview and notice that now the drip image appears above the AutoPlay slideshow. After reviewing the slideshow, go back to the Design view.
Since the navigation bar was created on the A-Master page, any changes you make to control the navigation (and other common elements) involve opening the A-Master page in Design view to edit it. Although you can see the elements of a master page on the pages you are editing, you cannot edit the header and footer content on the other site pages.
You can set up slideshows that display in full screen with the Fullscreen Slideshow widget. When a visitor clicks the Fullscreen Slideshow, the content scales to fill the entire browser window for the computer or device screen, temporarily obscuring the rest of the site's content. If desired, the slideshow can be set up to play automatically, so that it begins cycling through the images when the page loads. Visitors can exit the slideshow by pressing Escape.
Follow these steps to add a Fullscreen Slideshow widget to a site:
Launch Adobe Muse. Double-click a page to open the page in Design view.
Choose Window > Widgets Library to access the Widgets Library, or click the Widget Library tab in the panel set to make it active.
Expand the Slideshows section in the list of widgets. Select the widget named Fullscreen in the Slideshows section.
The Fullscreen Slideshow widget behaves differently than other widgets in Adobe Muse. Take a moment to see how it works.
Drag the Fullscreen Slideshow widget from the Widgets Library to the page.
Notice that the default content scales to fit both the height and width of the entire browser window.
By default, when you add the Fullscreen Slideshow widget the previous button, next button, and a counter field are displayed in the upper-right corner.
Click the blue arrow to review the settings in the Options panel.
The option to Fill Frame Proportionately is automatically applied to the New Hero (large images) and the New Thumbnail images to facilitate the full screen view.
Choose the type of transition you want to apply. Use the Transition menu to choose between Fade, Horizontal, or Vertical. By default, the Transition Speed is set to .5 seconds, but you can adjust that speed as desired.
When Auto Play is enabled, the slideshow begins playing as soon as the page loads and cycles through the content based on the number of seconds you set. By default, each image displays for 3.5 seconds when Auto Play is enabled.
When configuring the Fullscreen Slideshow widget, it is a common practice to enable the Next and Previous buttons for navigation, so the Thumbnails are hidden by default. However, you can enable the Thumbnails option if you want them to display on top of the main slideshow image.
If the thumbnails are hidden, be sure to keep the Next and Previous parts enabled. The Counter is optional — it helps visitors understand which image in the set is currently displayed.
If you want to display the Next, Previous, and counter interface in a specific part of the page, use the Selection tool to move them to the desired location and then pin the controls. If you also want the thumbnails to remain in the same position on the page, position the thumbnail set and pin it in place as well. If you want to display the Next, Previous, and counter interface in a specific part of the page, use the Selection tool to move them to the desired location and then pin the controls. If you also want the thumbnails to remain in the same position on the page, position the thumbnail set and pin it in place as well.
You can modify the Pinning and resize settings across different breakpoints when you add this widget in a responsive site.
Next you'll add images to the Fullscreen Slideshow widget. Follow these steps:
Select File > Place.
In the Import window that appears, Shift-click to select several contiguous image files on your computer. Or if you prefer, press and hold Command (Mac) or Control (Windows) while selecting several noncontiguous image files from a folder of assets.
Click Open to load the selected files in the Place gun.
Even if the images you've selected have different dimensions and aspect ratios, the Fill Frame Proportionately option scales them to fit perfectly within the dimensions of the page.
Click the slideshow once to add the selected image files. Notice that the slideshow's default images are removed automatically as soon as you add new images.
Choose File > Preview Page in Browser. Resize the browser window and notice how the slideshow content scales and crops to fill the entire browser window. Click the Next and Previous buttons to flip through the series of images, or simply let the images play back if auto play is enabled.
Close the browser window and return to Adobe Muse.
The Free Form Thumbnail option offers complete control over how the thumbnails in a slideshow are displayed. Rather than lining up the thumbnails in a row or set of rows, you can position each thumbnail in any location you prefer.
While in Design view, open the Widgets Library and expand the Slideshow section. Drag any of the slideshow widgets to a page.
While the entire page is selected, double-click and select the thumbnail image. You can see which element is selected by reviewing the Selection Indicator in the upper-left corner of the Control panel.
By default, thumbnails displayed in Slideshow widgets are stored inside a container named the Thumbnail Container. This outer container ensures that the thumbnails line up in straight lines or rows, depending on how you resize the outer container. The set of thumbnail images are nested inside a Thumbnail Container for all slideshows with thumbnails enabled, until you enable the Free Form Thumbnails option.
If you'd prefer to display the thumbnails in random or non-aligned positions, you can remove the outer container and place each thumbnail image at the desired location on the page. Follow these steps:
While the Slideshow widget is selected, click the blue arrow to access the Options menu.
Enable the checkbox next to the option: Free Form Thumbnails. The bounding box surrounding the Thumbnail Container in Design view immediately disappears and the Selection Indicator displays the word: Slideshow.
Click anywhere else on the page to close the Options menu.
Now that you've removed the outer container for the thumbnails you can reposition each thumbnail image to suit your page design.
Use the Selection tool to select one thumbnail. While it is selected, the Selection Indicator displays the word: Thumbnail. Move the selected thumbnail to the desired location. Repeat this step to reposition all of the thumbnails. If you want each thumbnail to remain in place in the event the browser is scrolled or resized, you can pin each thumbnail.
If you'd like to resize the thumbnail containers to make them different dimensions, disable the Edit Together option in the Options menu and then use the Selection tool to drag the corners of each thumbnail individually to scale them as desired.
In a responsive site, you can also realign, resize, and configure the pinning options for the thumbnails.
Choose File > Preview Page in Browser. The slideshow's thumbnails are scattered on the page. Click the thumbnails to see the corresponding image displayed in the slideshow.
Close the browser and return to Adobe Muse.
When content displays in a lightbox, it means that a modal window takes the focus and highlights its contents while dimming the rest of the page. Visitors interact with the lightbox by clicking a thumbnail, Next, or Previous button. To exit the lightbox and return to the normal site view, visitors click the Close button or press Escape.
All of the Slideshow widgets in Adobe Muse offer a Lightbox option. Additionally, one widget in the Slideshow section is preconfigured to use the lightbox behavior. The Lightbox Slideshow widget has the Lightbox option enabled by default.
To create a slideshow that displays the images in a lightbox, follow these steps:
While in Design view, expand the Slideshow section in the Widgets Library. Drag any of the slideshow widgets to a page.
In the Options menu, locate the Lightbox option in the Layout section and verify that it is selected.
While the Options menu is still open, make any other changes to configure the widget as desired. For example, you can show or hide the Previous button, Next button, Captions, and Counter. For the lightbox display, it is helpful to enable the Close button. Check the checkbox next to the Close Button option.
If desired, you can use the Selection tool to move the Close button to a different location. When visitors want to exit the lightbox display and close the modal window, they can click the Close button or press Escape.
If you want to change the width of the border surrounding the lightbox window, select the Lightbox Slideshow widget and update the Padding settings in the Spacing panel.
Choose File > Preview Page in Browser to test the Slideshow widget. Click any of the thumbnail images to invoke the lightbox effect and see the corresponding hero image displayed in a modal window while the rest of the page is dimmed.
Click the Next and Previous buttons to cycle through the images in the slideshow.
After testing the slideshow, exit the lightbox view by clicking the Close button. The lightbox closes and the rest of the page content appears.
Close the browser and return to Adobe Muse.