When I first began using Showit for the Emotional website, one of things I loved was the ease with which you could create several different photo galleries. But for video, there wasn’t any built in template.

After a few tries, I finally cracked the code and created this gallery.

The photo galleries in Showit don’t allow for you to add captions to the photos or descriptions. In order to create a gallery that moves with descriptors like the example above, there are a few steps to making that work. You can use this method to simply caption photos or link to video with each photo+description. And here’s the great news: If you love it, I’ll send you a free template – just fill out the form below the live demo of the video gallery. But, in case you’re curious, here’s how I did it…

1. Create A Gallery

First, I created a blank canvas, and added a new photo gallery. Then, I added one photo for each video I want to display. To create photos for each video, one solution is to take a screen shot from the video.
On the right side of my panel, I clicked on “size & position” and I set the gallery to “stretch” (the last option).

2. Set Up Description Area

Next, on the canvas side, I added a canvas view. In this example, I set up Title, role, description. Then, I created a clickable link “see highlights” which triggers each video.

3. Create Additional Views For Each Video

I simply duplicated the view and changed up the text for each view.

4. Add Arrows On Left And Right.

Using the icon chooser, I created to arrows and set them to show next or previous for both the gallery and canvas views.

5. Create A Video Canvas For Each Video

I created a canvas that will pop up when the user clicks on “watch”. In my case, I simply did a black background. I added an icon “X” so the user can click back to the gallery. For each video, I simply added the link for the video and it displays in the viewing area. You can add any link from YouTube or Vimeo.

6. Set Up Trigger Links For Each Video In The Gallery.

After creating the video canvases, I went back to the video descriptions and set up the click action to show the video.

7. Create An “Overlay” Over The Photo Gallery

In order for the video gallery to function properly and scroll with the descriptions below it, I put an empty text box OVER the photo gallery to prevent scrolling when someone touches the photo on mobile or iPad. This essentially makes the photo gallery non-moveable except with the arrows. Your arrows will now move BOTH the photos and the descriptions. To do this, I simply created a blank text box and made sure it was located above the gallery itself in the element list.

CLICK HERE to see the live demo.

Get The Template FREE!

Want to incorporate this canvas into your website? Fill out the form on the live demo page and I’ll email you the share code to add this to your library!