Using Image Sliders and Photo Galleries in Online Courses #84

David Anderson
By David Anderson

Using Image Sliders and Galleries in E-Learning #84

E-Learning Challenge #84: 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 a variety of 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.

Image Slider Layouts

Thumbnail Navigation Sliders

Scrolling thumbnail navigation provides teasers without showing everything at once. I really like this approach for keeping the learner engaged with the featured image while visually hinting at additional items.

Kevin Thorn recently shared an image slider template he built in Articulate Storyline 2. He includes his Storyline 2 source file so this is a great way to dive into infinite scrolling sliders.

Thumbnail Navigation Sliders

View Kevin’s image slider in action

Bullet and Dot Navigation Sliders

Judge dot navigation by its size, do you? While dots and bullets may not always be the most visually engaging approach, they offer a great solution for keeping learners focused on the feature image and maximizing slide space.

Michael Hinze works a lot with sliders in Storyline. One of my favorite examples is his infinite scrolling slider where he leverages slide layers to transition images. Bookmark this one, folks!

Bullet and Dot Navigation Sliders

View Michael’s image slider in action

Grid Navigation Sliders

Grid navigation displays every item on the same slide. Unlike the previous slider examples, the gallery doesn’t use pagination to reveal additional items.

And if you were thinking image galleries are only possible in Storyline, think again. The concepts are easily applied to PowerPoint-based authoring. Using hidden slides and hyperlinks, you can easily simulate the image slider effect.

Need additional thumbnails? Simply add dot navigation or pagination to the slide to display even more thumbnails.

How I Built This Video Gallery Interaction

View the video media gallery in action | Learn more about this project

Challenge of the Week

This week your challenge is to show and share an image slider for e-learning. You can focus on any style or layout you like. Just show us what you can do with image sliders!

Resources

Here are a few slider templates, tutorials, and resources to help you get started.

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.
  • Twitter: If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness.
  • Facebook: Share your work on our Facebook page by replying to this Facebook post with a link to your example.

 

Last Week’s Challenge:

Before you slide into this week’s challenge, take an animated look at the reaction GIFs your fellow community members shared in last week’s challenge:

RECAP #83: Reaction Gifs

E-Learning Challenge Recap #83: Challenge | Recap

 

Wishing you a slide-tastic week, E-Learning Heroes!

New to E-Learning Challenges?

The weekly 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.

 

Related Content

Wireframes and Functional Prototypes in E-Learning #85

David Anderson
David Anderson

Seeing Is Believing With These 5 Eye-Catching Image Gallery Downloads

Community Team
Community Team

Using Sliders to Create Parallax Effects in E-Learning #115

David Anderson
David Anderson
381 Comments
Kevin Thorn
over 4 years ago05/22/15 at 9:09 pm (UTC)

The photo slide show concept is probably my favorite interaction to present looping content whether manual or auto animated. Here's another one modeled after the Cadillac CTS-V build-your-own website. This was the second ever project I built with Storyline 1 during the initial beta period. Unlike the furniture one David shared in the opening of this post, this one uses layers only so can be repurposed in SL1 or SL2. Not at my computer at the moment but will share the SL1 and SL2 source files later. https://s3.amazonaws.com/DEMOS/slideshow_manual-advance_CTS-V/story.html Source: Storyline 1 > https://s3.amazonaws.com/DEMOS/slideshow_manual-advance_CTS-V/source/slideshow_manual-advance-thru-layers_CTS-V_SL1.story Source: Storyline 2 > https://s3.amazonaws.com/DEMOS/slideshow_... Expand

Phil Mayor
over 4 years ago05/23/15 at 4:37 pm (UTC)
I just find carousels and sliders with images to be a bit of a kludge. If they are images then I find them a meaningless exercise and if the are images that you click on then I find from a UI point the act of sliding takes your mouse away from the point where you need to interact. Just personal point of view. I never liked apples cover flow as it seemed form over functionality. I also hate the apple dock if you switch on the magnification as this acts like a slider but the object of your attention is always moving away from you. Anyway I am in Italy and meant to be relaxing not being a grumpy old man :-)
Nancy Woinoski
over 4 years ago05/25/15 at 10:48 pm (UTC)
I used PowerPoint to pull in all the images -resized them so that the heights were all the same and them grouped them. Once grouped I saved the group as an image. In Storyline, I created a slider and formatted its appearance by using the image as the thumb Fill and then removing the thumb border, track fill and track border. I'll post the file and send a link.
Kevin Thorn
over 4 years ago05/23/15 at 11:19 am (UTC)
This is a vertical scrolling menu more so than a photo/image slideshow. Can be used either way I suppose. This is version 2 which employs exploratory navigation via the dots using T/F variables. DEMO: https://s3.amazonaws.com/DEMOS/slideshow_manual-advance_vertical/story.html SOURCE - Storyline 1: https://s3.amazonaws.com/DEMOS/slideshow_manual-advance_vertical/source/slideshow_manual-advance-vertical-scrolling-menu_v2-dotNav_SL1.story SOURCE - Storyline 2: https://s3.amazonaws.com/DEMOS/slideshow_manual-advance_vertical/source/slideshow_manual-advance-vertical-scrolling-menu_v2-dotNav_SL2.story
Jane Maduke
over 4 years ago05/23/15 at 1:49 pm (UTC)

Hello everyone! My name is Jane Maduke and this is my first eLearning Challenge! I've been lurking for a couple of weeks and finally jumped into this one, not least because I wanted to show off some of my photos! I also resisted looking at too many of your wonderful samples. They tend to make me second-guess myself. Best just to jump in without looking! Thank you all for your inspiration and generosity! I can't wait to do more challenges. http://www.larchlearning.com/articulate-elearning-challenge-84/ One week later, I got this to work the way I wanted it to! Yay! Here's my new slider: http://www.larchlearning.com/wp-content/uploads/articulate_uploads/2015-05-29-ImageSlider2/story.html And here's the Story file for those who would like to reverse engineer it: https://dl.dr... Expand

David Anderson
over 4 years ago05/23/15 at 2:10 pm (UTC)
Hi Jane and welcome to the challenges! Thanks for jumping into this one! So I really like your dot navigation slider! Simple but it totally works. But what I really like—and think the community will appreciate—is your blog post on building your project http://www.larchlearning.com/articulate-elearning-challenge-84/. I liked reading about your design process and technical challenges w/ the arrow navigation. I'm more than happy to help you get it working so please feel free to attach your source file. I also enjoyed your "lessons learned" tips at the end. I would like to see more folks share those (including me)! Thanks again for sharing and joining the challenges!
Jane Maduke
over 4 years ago05/23/15 at 11:20 pm (UTC)
Thanks, David, for your support and encouragement. I appreciate your offer of support and I should upload my source file -- I always appreciate it when others do! -- except the changes I made to the master slide really cooked it! I'll be more careful in the future to create interim project files before I make such drastic changes. I meant to extend credit to Michael Hinze. I was trying to duplicate his example. Thank you Michael! I'm grateful to Articulate for giving us this opportunity to share our work and stretch ourselves. I'm looking forward to the next one.
Jane Maduke
over 4 years ago05/29/15 at 12:13 pm (UTC)
Hi Cary! The photos are from the Alpine Club's General Mountaineering Camp, 2011. The big mountain is Mt. Tsar. Pretty remote. We flew in from Golden. I just looked at the ACC page and there is exactly the type of slider I wanted to create. Too funny. http://www.alpineclubofcanada.ca/adventures/general-mountaineering-camp-overview/general-mountaineering-camp-locations/
Jackie Van Nice
over 4 years ago05/25/15 at 2:45 pm (UTC)
Well now that I'm comparing (desktop vs iPad & iPhone), I see the functionality is already there! I thought the menu relied on a hover state, but you can tap on the left and the menu comes up, too. I completely missed the instruction about the menu on mobile. My only thought would be to make the instruction larger (a big, bold, proud design element?) so it's easy to see on a small screen - and add "or tap left". Just a thought - hardly necessary since it's already a highly successful interaction. (I always start musing about mobile on days I'm not on desktop.) :)
Joy singh
over 4 years ago05/25/15 at 5:42 am (UTC)
Here is my entry for this challenge. To me, sliders are best used for websites:) So, I challenged myself to see if I can create the same user experience in Storyline the way I use to see in the award winning websites. Also, whether I can present the images and content in a creative way. Hope I am atleast somewhere near that. As always..feedback and comments are most welcome!! http://googledrive.com/host/0ByL3synSy5H_fmRVZEpjSVJkSk9YamlqcFNKSUVId2hjdU5PU19mNVZNUHluTGNocTVhTjA?ltmpl=drive
Linda Lorenzetti
over 4 years ago05/25/15 at 12:38 pm (UTC)
Jaipreet I like the way you have the images cycle from one to the next and I like the unique way that you combined the irregular shapes. However, I prefer to see a full version of the photos (without parts cut off) in a traditional orientation (not sideways). Maybe if the images came in normally so that you could see the full content and then when you finish viewing it, a portion of that image moves into your shapes. Just my thoughts.
Joy singh
over 4 years ago05/25/15 at 1:56 pm (UTC)
Hey Linda, thx for the feedback. I know users would love to see big images, it's just that i was not able to fit them in my irregular design strategy. But yeah, your are right, users would love to see full images. So in order to keep my irregular shapes:) I have allowed the users to view full size photos when they click on any of the photos or the dots on the top-right corner and when they close, it comes back to irregular shape. Hope this is more visually appealing!!
Jackie Van Nice
over 4 years ago05/25/15 at 2:09 pm (UTC)
I like this, Jaipreet! Unique enough to get my attention with your abstract take on the main screen. I see it as you giving us tantalizing puzzle pieces to lure us in to find out more. I like that it scrolls through the content automatically (though you still have full control), I like that your hover states add color to the photos, and of course I like the content. (I've always wanted to see Petra.) A lovely, creative take on the challenge.
Sign In to Comment