Build an Orbit Photo Gallery
Everyone loves a cool image slider. Within Site Designer this is really easy to implement. Today I’ll demonstrate how to create a revolving photo gallery using the Foundation CSS framework. The graphics will rotate automatically, but I'll also teach you how to add controls so that the viewer can scroll through them manually.
Some Prep Work
Foundation uses a mobile-first workflow, so before you begin be sure the viewport slider is positioned to the left of the lowest breakpoint. This will allow you to set the default configurations for the slider. Tweaks can be done later for larger screen sizes.
If you are curious how the raw code looks within the Foundation documentation you can find that here. Following along with the code version is a great way to learn how it is converted within the code-free Site Designer app.
The gallery uses some fun back to school images, but you can always swap out the images with your own! Use the button below to grab these example images to use while you work through this tutorial.
Watch Suzanne Build the Orbit Slider
Step-By-Step How-To Details
Laying out the basic structure
First, start by adding a Container DIV element to the canvas. Give it the Class name
orbit. This serves as the parent for the whole photo gallery. If saving as a component to your library you would save at this level.
On the Element pane, apply the following data attributes:
rolewith the value region
aria labelwith the value Back to School
Next, drag and drop a second Container element into the first Container. Give this container the Class name
Nesting one more time, drag and drop a third Container element into the second Container. Give this container the Class name
orbit-controls. If you need, use the Element tree on the Element pane to move the Container elements into each other. Your set up should look like this:
orbit-controls container will be used for the Next and Previous controls. I find it easier to add and style these once the images are in place, so we will revisit the controls at the end.
Set up the List Container element for image slides
Add a List Container element. This should be nested into the
orbit-wrapper Container. Give this element the Class name
Three List Item Containers are automatically added. Using the Element pane, select each one and give them the Class name
Add a Picture element into each List Item Containers. Each Picture should get the Class name
Adding Gallery Images
Next, it is time to add the images to the gallery! On the Element pane under the Selected Element Properties choose Picture > Local Image to load in the file source. In this example, I added a folder for the orbit images to help keep my files organized. Select Add Images/Folders and load the images resources. You can download the example school images at the top if you haven’t grabbed them yet.
Select the additional Picture elements and replace the placeholder with the image source file. Add some descriptive text in the Alt.
On the Style pane, you can adjust the size of the Picture. In this example, the images take up the full width of the screen. Go to the Style pane > Layout > Dimensions > Width > and change the value to
NONE. You might consider adding a Max-Height on the image for larger screens.
Select the first List Item Container and add the Class name
Let’s preview the slider on the canvas. Click the Preview toolbar icon to see the gallery in action.
Adding the Directional Controls
Last thing you might like to add some directional controls so that the viewer can scroll previous and next. On the Element pane select the
orbit-controls Container. With that selected, go to the Content pane and add a Button element into it.
Double click the Button element to change the text to the < less than symbol . The Button element will get the class name
Duplicate the Button element and change the text to the > greater than symbol . The Button element will get the class name
Save this Component to your Library
One of the coolest features within Site Designer is the ability to save and reuse components. This saves you from having to rebuild your favorite website features with each new website. Grab a copy of this project file below. Save the component to your Components Library and use within any Foundation project.
Get Site Designer Today!
Site Designer is the cutting edge solution for rapid, code-free, website design. The app provides a suite of layout and style controls so you can craft a website that stands out and helps your business grow. Purchase Site Designer and get free upgrades for one year plus discounted updates after that timeframe. Check out the stunning theme collection and watch detailed video tutorials to help you get started.