Using Image Sliders and Galleries in E-Learning #327
Image Sliders and Photo Galleries #327: Challenge | Recap
Image sliders, slideshows, and galleries are an efficient way to present a large number of visual content (images, videos, and graphics) on the same slide while providing visual teasers of additional items.
Image Slider Layouts
While there are various possible layouts, image sliders typically rely on horizontal rows of images or bullets. Let’s look at a few common image slider examples and navigation options.
Linear Image Gallery
Here's an excellent example from Richard of how motion paths can be used to create image sliders. He also added triggers to each image to reveal additional content.
View and download the image slider
Tab-Style Image Sliders
I like the way Montse used a cover masking effect to hide part of the animated images. You can download the interaction to see how she put it together.
View and download the photo slider
Challenge of the Week
This week, your challenge is to create an image or photo gallery slider for e-learning. You can focus on any style or layout you like. Just show us what you can do with image sliders!
Areas of focus for this technque:
- Entrance and exit animations
- Animated buttons: webinar | challenge #285
- Motion paths (webinar)
- Motion paths advanced (webinar)
Share Your E-Learning Work
- Comments: Use the comments section below to share a link to your published example and blog post.
- Forums: Start your own thread and share a link to your published example.
- Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
- Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.
Last Week’s Challenge:
To help you slide into this week's challenge, check out the interactive math examples your fellow challengers shared over the past week:
Teaching Math Online #326: Challenge | Recap
New to the E-Learning Challenges?
The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.
Your approach totally works but it does create some duplicate work. The three biggest changes I made: 1) renamed motion paths (left, right) to make it easier to identify the paths 2) grouped all four images to eliminate the need for more than two paths 3) added relative start point for the motion paths 4) created a single number variable to count the number of clicks left and right to control button visibility The 4th change I'd recommend making is to resize the stock photos to a smaller size. I'm guessing you inserted the images from Content Library. The source size of the images is really large and slows things down a little in Storyline. It's not an issue when you publish because Storyline will resize the images. But in the authoring view, the images take additional resources. ... Expand