SHOWCASE GALLERY ELEMENTS

IMAGE LIGHTBOX WIDGET

• A lightbox gallery compositon with thumbnail/trigger which when click will open a lightbox container.
• Created by using the Slideshow Lightbox Widget.
• This type of composition is usually utilized to create the lightbox composition for the Portfolio section or any other type of showcase gallery.
• Unlike the Mix Media Lightbox Widget that can be used for other type of media other than image, this widget is exclusively used for image type of media.

THUMBNAIL / TRIGGER BUTTON

• The thumbnail/trigger buttons are auto generated and populated when new images are added to the widget.

Resize Thumbnail

• Select a thumbnail and change the Width (W) & Height (H) values in the Resize panel. Changes made to a thumbnail will apply to the other thumbnails.

Adjust Spacing

• Select the thumbnails main frame or box  and change the Padding and Gutter values in the Spacing panel.

SHOW LIGHTBOX CONTAINER

• To show the lightbox container, select a thumbnail or the thumbnails main box and open the options panel.
• In the panel, tick the show lightbox parts while editing checkbox.

Lightbox Container

CLEAR SAMPLE IMAGES

• To clear the pre-included sample images, select a thumbnail or the thumbnails main box and right click. In the menu panel choose Clear Widget Contents. All thumbnails and images in the lightbox will be cleared.

ADD NEW IMAGES

• To add new set of images to the slider, open the composition options panel and click the Add Images button.
• In the folder dialog box, select the new set of images and click the Open button to add them to the slider.

MIX MEDIA LIGHTBOX WIDGET

• A lightbox gallery compositon with thumbnail/trigger buttons that will open a lightbox container when clicked.
• Created by using the Composition Lightbox Display Widget.
• This type of composition is usually utilized to create the lightbox composition for the Portfolio section or any other type of showcase gallery.
• Unlike the Image Lightbox Widget that can only be used for image type of media, this composition can be used to hold mix media elements like slideshow widgets, video widgets, rectangles, text frames, images, embed HTML object and also other type of elements.

THUMBNAIL / TRIGGER BUTTON

• The thumbnail/trigger buttons in this type of lightbox have to be arranged manually.
• NOTE. On some compositions, the image is directly placed inside the trigger button to create the thumbnail image. On other compositions, a separated custom thumbnail widget has been placed inside the trigger button to create the thumbnail image with additional effects.

Resize Thumbnail

• Select a thumbnail or if there are more than one select all thumbnails and change the Width (W) & Height (H) values in the Resize panel.

Replace Thumbnail Image

• To replace the thumbnail image, select and right click on a thumbnail. Use the Replace Background Image to change the image.
• IMPORTANT. While doing this step, make sure in States panel the Normal state is selected, or else only the Active state image will be changed.

SHOW LIGHTBOX CONTAINER

• To show the lightbox container, select a thumbnail or the thumbnails main box and open the options panel.
• NOTE. For Template 10, the trigger has been placed inside the State Button. Select the View Slideshow button to open the options panel.
• In the panel, tick the show lightbox parts while editing checkbox. This will open the lightbox container.

Lightbox Container

ADD NEW THUMBNAIL BOX

• To add more thumbnail and lightbox container, navigate to the last thumbnail. Then click on the plus ‘+’ button.
• TIP. The plus ‘+’ button can be hard to click if no element is selected. During this step, make sure that the last thumbnail is selected.

• A new thumbnail box will be created.

• Arrange the new thumbnail box accordingly. Do this in every breakpoints.

EXTENDED STEPS FOR THUMBNAIL BOX WITH A CUSTOM THUMBNAIL COMPOSITION

• On some templates, additional custom thumbnail composition has been placed inside the thumbnail box for additonal effects and interactivity.
• Follow the steps above to add a new thumbnail box.
• Once the new thumbnail box has been added, go back to the previous thumbnail box, select and copy the custom thumbnail. Elements of the custom thumbnail is usually placed inside a State Button.

• Paste the custom thumbnail on the page layout, outside of the thumbnail box.
• Make sure that the thumbnail is 'paste' in the same layer, and on top of the thumbnail box in terms of the elements hierarchy level.

• Select the new thumbnail box, and copy the X and Y position from the Resize panel.

Select New Thumbnail Box

• Next, select the custom thumbnail, and paste both the X and Y position values into their boxes respectively in the Resize panel.
• IMPORTANT. Repeat the same process in every breakpoints. This is to make sure that the position of the custom thumbnail is exactly the same same as the new thumbnail box.

Select Custom Thumbnail Composition

• Once the position has been arranged accordingly, select and cut the custom thumbnail.
• Then select the new thumbnai box and paste the custom thumbnail inside the box with the Paste in Place command.

• The final step is to arrange the thumbnail box position accordingly.

CUSTOM THUMBNAIL

• A few custom thumbnail compositions have been created to add more interactivity and effects to the thumbnail box.

CUSTOM THUMBNAIL WITH ADDITIONAL JAVASCRIPT AND CSS

• These type of thumbnail compositions are created by combining a few basic elements such as the State Button, text frame, image and rectangles.
• The elements have been systematically linked with the additional JavaScript and CSS, to add rollover effects which are not possible to be created using Muse native features.
• Along with the added effects from the additional JavaScript and CSS, native Muse states effects are also used.

Composition Samples

Replace Image

• To replace an image, simply select the image type of media or rectangle that has been filled in with image. Right click to open the menu panel and choose Replace Image or Replace Background Image.
• IMPORTANT. New media elements prepared from scratch can be added to the composition container. However, since the new elements have not been optimized for responsive layout, this process has to be done delicately and with consideration of how it will affect other breakpoints. This is to make sure that the thumbnail composition design in the other breakpoints is not broken.

CUSTOM THUMBNAIL WITH MUSE COMPOSITION WIDGET

• This type of thumbnail compositions is created by using the Composition Widget in Muse.
• The Composition Widget can be placed inside a State Button so that reveal animation can be assigned to it. It can also be placed inside a trigger thumbnail box that will open a lightbox when clicked.

Widget Sample

Thumbnail Sample

Template 01 (Featured Section)

Replace Image

• Click on the box with the image. This can also be called as the Image Container.
• Inside the Image Container, right click and select Replace Background Image to change the image.
• During this process, in States, make sure that the Normal state is selected, or else only the Active state image will be changed.

Hidden Fade-In Content

• To edit the hidden fade-in content, select the widget and open the options panel.
• In the panel, tick the Show lightbox parts while editing checkbox.
• IMPORTANT. New media elements prepared from scratch can be added to the composition container. However, since the new elements have not been optimized for responsive layout, this process has to be done delicately and with consideration of how it will affect other breakpoints. This is to make sure that the thumbnail composition design in the other breakpoints is not broken.

IMAGE SLIDESHOW WIDGET

• A slideshow compositon that displays a presentation of a series of still images.
• Created by using the Slideshow Widget.
• This type of slideshow is usually placed inside a lightbox composition for the Portfolio section or any other type of showcase gallery composition.

WIDGET DESIGN

NAVIGATE BETWEEN SLIDE CONTAINERS

• To navigate between images in the slider, make sure that in the composition options panel, the Prev and Next checkboxes are ticked to display the buttons. By default these button are set to be displayed.
• Use these buttons to navigate between slide pages.

CLEAR SAMPLE IMAGES

• To clear the pre-included sample images, select and right click the widget and in the menu panel choose Clear Widget Contents.

ADD NEW IMAGES

• To add new set of images to the slider, open the composition options panel and click the Add Images button.
• In the folder dialog box, select the new set of images and click the Open button to add them to the slider.

• IMPORTANT. Please note that during this process, after the new images have been imported, a problem where the slider container width increases longer that it should be, may probably be encountered.
• This problem usually occurs if the slideshow widget has been placed inside a lightbox container.
• To fix this, simply drag the resize handle back to its original position.

MIX MEDIA SLIDESHOW WIDGET

• A slideshow compositon that displays a presentation of a series of various type of media elements such as video widgets , images, text frames, embed HTML object and also other type of elements.
• Created by using the Compositions Widget.
• This type of composition is usually placed inside a lightbox composition for the Portfolio section or any other type of showcase gallery.
• Unlike the Image Slideshow Widget that can only display image type of media, this composition can display various type of media elements such as video widgets , images, text frames, embed HTML object and also other type of elements.

WIDGET DESIGN

• The following image is the design example of the slider. The slider has been placed inside a lightbox container, and inside its own container (the slider container) is the Vimeo video widget.

• Another sample of the slider. Instead of a Vimeo video widget, the YouTube is used in this slider.

• Another sample of the slider. Instead of the video widgets, a rectangle filled-in with an image is used in this slider.

NAVIGATE BETWEEN SLIDE CONTAINERS

• To navigate between images in the slider, make sure that in the composition options panel, the Prev and Next checkboxes are ticked to display the buttons. By default these button are set to be displayed.
• Use these buttons to navigate between slide pages.

ADD NEW SLIDE CONTAINER

• To add more slide container, start by navigating to the last container. Then click the plus ‘+’ button.
• TIP. The plus ‘+’ button can be hard to click if no element is selected. During this step, make sure that a navigation button is selected. Navigation buttons can be the Prev and Next buttons or the Trigger buttons.
• NOTE. The Trigger buttons are usually placed at the bottom left corner and set to be transparent. The plus ‘+’ button can be seen next to the last Trigger buttons.

Plus Button

• A new blank slide container will be created.

• To add media element to the new slide container, go back to the previous containe and Copy the existing element. This could be a video widget or a rectangle with image.
• IMPORTANT. New media elements prepared from scratch can be added to the blank slide container. However, since the new elements have not been optimized for responsive layout, this process has to be done delicately and with consideration of how it will affect the other breakpoints. This is to make sure that the slide container design in the other breakpoints is not broken.

• Then go back to the new container and use the Paste in Place command to the paste the elements inside the newly created slide container.