⚡ Idea: Image Gallery Transitions ⚡

  • 3
  • Article
  • Updated 2 years ago
  • (Edited)


In this article, we’ll cover transitions using the Flex Slider gallery provided at https://github.com/joelambert/Flux-Slider

You can view an example of this here, and preview a Presentation showing these transitions here.

Step 1

First, you will have to git clone the repository in order to use the files in your Presentation. Git clone the repo here, or to save time, you can git clone my modified version of the original repo from here, which has some edits to just run the images at full screen.

Step 2

Next, change the images to the ones you want to see in the Presentation by navigating to /img/ in the Github repo and pasting your images.

Step 3

Change the code located at index.html. I’ve changed the code so that the images tile, instead of the original example which houses the images within a gallery frame. Check it out here.

Step 4

I used the Web Page Widget to embed the gallery of transitioning images into my Presentation. Add the Webpage Widget, enter the URL to your HTML page, and you are good to go. I have this Presentation running on the Windows 10 Intel Compute Stick,and it looks great!

I created a second Presentation with a gallery of transition that also includes the free Time and Date Widget that you can check out here.

Hopefully this post inspires you to look into custom transitions for your digital signage. If you have any questions, please let us know!
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb

Posted 2 years ago

  • 3
Photo of Media Manager

Media Manager

  • 1,670 Points 1k badge 2x thumb
I really enjoy all of these tutorials. I hope to be able to use half of them to jazz up my display this Summer.

~Adam
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Thanks! This is more of an idea post, to get people thinking about custom transitions. Here's a WIP using Sequence.js http://preview.risevision.com/?type=p...

Hope to see what you come up with! Feel free to share, write a short tutorial, get suggestions on where to get started etc..