Push Gallery is the ultimate tool for presenting media-rich galleries, projects, or portfolios. This gallery uses full screen slideshows and bold, attention-grabbing caption fonts to show off the details of your gallery items.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
Release Log
1.0: Initial release
Setup
This widget is packaged differently than other widgets. When loaded, it will not show up in your Library Panel. It is packaged as a .muse file, so will appear more like a theme than a widget in terms of packaging.
This widget may be added to a brand new site, or incorporated into an existing site. Either way, the site will need new pages added as the "target areas" for the thumbnails. In the instructions below, we'll discuss adding it to an existing site. The screenshots seen show the widget being added to our Build theme. The same techniques can be used for a brand new site as well.
SETTING UP THE THUMBNAILS:
Open your Muse project.
Save a new version of your site, to be cautious. In this example, we'll use the Build theme by MuseThemes. We will have two muse files open simultaneously.
Open "Push Gallery.muse".
Open the Thumbs page.
Click cmd-A (Mac) or ctrl-A (Win) to select all.
Click cmd-C (Mac) or ctrl-C (Win) to copy.
Return to the Build theme and select the page of the site where you would like to place the gallery thumbnails.
Clear space for the thumbnails, and then R-click. Select "Paste in Place"
Once pasted, arrange the thumbnails where you would like them to appear.
In the screenshot below, space has been added between thumbnails, and a large radius has been applied to make the thumbnails circular:
Position the Pushy Panes widgets off canvas if they don't appear their automatically.
SETTING UP THE TARGET PAGES
In the Muse composition world, we call buttons "triggers" and the area the triggers open, "targets". We'll refer to the pages that our Push Gallery thumbnails open as target pages.
For each Push Gallery thumbnail, we'll need to create a target page.
The Push Gallery.muse site file has the pages all set up. On our existing site, we can emulate this setup.
Create new pages in your existing site, named "Project-A", "Project-B", and "Project-C".
By default, these pages will likely have a master page applied. If you wish to not use Master pages, R-click the page, select "Master", and select "No Master".
Now we will move the slideshow in Project-A from Push Gallery.muse into our existing site. Open the Project-A page in Push Gallery.muse.
Click cmd-A (Mac) or ctrl-A (Win) to select all.
Click cmd-C (Mac) or ctrl-C (Win) to copy.
Open the newly-created "Project-A" page in your existing site.
R-click and select "Paste and Create Brakpoints".
This will paste all of the page content from Push Gallery and paste it into your existing site. It will also add the breakpoints used in Push Gallery.
Zoom out on your page and make sure all the elements are arranged correctly. Generally, Muse will place a couple elements in odd places. Arrange as needed.
Also, check the page length. Note the page length in Push Gallery, and apply the same page length in the existing site (about 825px).
Once the page looks good, repeat this process on each breakpoint size, to ensure that elements are arranged properly on all breakpoints.
If your slideshow is not appearing fullscreen, simply move the page length hendle slightly, and the slideshow will snap fullscreen. This is a Muse quirk.
You have just set up a single thumbnail/target page instance. Repeat this process for each thumbnail and target page combo in your gallery.
TIPS:
For each gallery item, there should be 1 thumbnail, 1 Pushy Panes widget, and 1 associated page in your site. Pushy Panes.muse has 3 of each set up by default. If you would like more gallery items, duplicate each element. Make sure that the thumbnail state button has a graphic style applied that is unique, and entered into the Pushy Panes widget options, in the Open Button section. Also, make sure that the name of the corresponding page is set in the "External Page" option in Pushy Panes.
The URL used in the External Page option is important. Before the site is published, you may use the internal page name, such as "project-a.html". Nothing else is needed. Once the site is published, make sure to use the proper published URL.