Using Image Sliders and Photo Galleries in Online Courses #84

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.

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!

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.

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:

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.

378 Comments

Jackie Van Nice
Hero

4 years ago05/22/15 at 2:57 pm (UTC)

Yaaay! You're too good to us, David. Another (potentially) simple one. Didn't Richard Watson have one he offered as a freebie too? I can't seem to find it in ELH at the moment, but it's this one: http://bridgehillls.com/free-photo-slider-for-storyline-2/

4 years ago05/22/15 at 3:04 pm (UTC)

I'm pretty sure we're going to have some amazing examples for this one. I thought about Richard as well, Jackie :) Here's the link: https://community.articulate.com/discussions/building-better-courses/free-photo-slider-storyline-2

4 years ago05/22/15 at 3:08 pm (UTC)

Well-found, Joanna! If I weren't mobile I'd probably have stood a better chance of finding it. :)

4 years ago05/22/15 at 3:35 pm (UTC)

Thanks Jackie! Totally missed that one. Just updated the post to include a link to Richard's example. Let's hope he hasn't checked Heroes yet.

4 years ago05/22/15 at 3:54 pm (UTC)

Wow! I thought you guys had forgotten about me. I've been so busy just keeping up with projects (thanks Jackie/Articulate) that I have not been doing much on the forum! :)

4 years ago05/22/15 at 3:57 pm (UTC)

Don't you feel popular right now?? Plus you've already got your entry ready to go if you want to repurpose. :)

Joy singh

4 years ago05/22/15 at 3:01 pm (UTC)

Wow! this will be fun to work on! Quick question..can we use sliders where the users would drag to visual content instead of click?

4 years ago05/22/15 at 3:06 pm (UTC)

I think Jackie's link gave me the answer as "yes"!

4 years ago05/22/15 at 3:10 pm (UTC)

Absolutely, Jaipreet! Have fun with it. :)

Alexander Salas

4 years ago05/22/15 at 5:03 pm (UTC)

Image sliders, cool! Got some "magic" brewing in ma brain already.

4 years ago05/22/15 at 5:06 pm (UTC)

I figured you would, Alex! Looking forward to this week's entries.

Tracy Parish
Hero

4 years ago05/22/15 at 8:31 pm (UTC)

I really liked this one. I new what I wanted to do as soon as I had seen the challenge. Here is my Photography Portfolio Webiste inspired demo - http://bit.ly/photomenu I wrote about how I created this demo and the several different methods/attempts to get the effect I wanted: http://bit.ly/photomenublog

4 years ago05/22/15 at 9:12 pm (UTC)

Slick grid effect Tracy! Very intuitive design!

4 years ago05/22/15 at 9:59 pm (UTC)

Very nice, Tracy! I'm a huge fan of grid galleries and this is a great example!

4 years ago05/23/15 at 11:28 pm (UTC)

This is very nice, Tracy! I'd love to try this with my annual Christmas letter. Thanks for sharing.

4 years ago05/24/15 at 2:00 pm (UTC)

Nice effect Tracy!

4 years ago05/24/15 at 4:13 pm (UTC)

Yes this grid is beautiful. I can see it applied to a memory game.

Kevin Thorn
Hero

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

4 years ago05/22/15 at 9:36 pm (UTC)

Ahh the CTS demo! That's still a classic example. Real quick: Can you check the link? You're pointing to the mobile install. I found the link is actually: https://s3.amazonaws.com/DEMOS/slideshow_animatedLayers_manual/story.html

4 years ago05/22/15 at 9:57 pm (UTC)

I remember this one well. In fact I loved it so much that I used Kevin's technique in one of my own projects.

4 years ago05/23/15 at 1:34 am (UTC)

Ah, cool. Glad to hear it was useful, Nancy!

4 years ago05/23/15 at 1:33 am (UTC)

Fixed. Link updated.

4 years ago05/24/15 at 2:01 pm (UTC)

Very slick Kevin!

Nancy Woinoski
Hero

4 years ago05/22/15 at 9:26 pm (UTC)

Here is a simple one I created using 2 sliders. http://pinchedhead.articulate-online.com/3796853776

4 years ago05/23/15 at 2:59 am (UTC)

Looooooove it, Nancy!

4 years ago05/23/15 at 4:35 am (UTC)

I love that Nancy, so clever!

4 years ago05/23/15 at 7:57 am (UTC)

I love that Nancy, I may have to reconsider my thoughts on image sliders :-) Well maybe not!

4 years ago05/23/15 at 2:49 pm (UTC)

Ok I'll bite - what are your thoughts on image sliders?

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 :-)

4 years ago05/23/15 at 5:01 pm (UTC)

LOL - I knew you were going to say something like that! Well I am extremely jealous about Italy. Try to enjoy yourself and have a glass of vino for me.

4 years ago05/23/15 at 9:11 am (UTC)

Love the dual slider technique. It's rad!

4 years ago05/23/15 at 11:25 pm (UTC)

This is ingenious! I love it.

4 years ago05/24/15 at 9:45 am (UTC)

Smart approach, Nancy!

4 years ago05/24/15 at 12:46 pm (UTC)

The dual sliders, the vintage content, the white field. It's all just brilliant. Thanks for such great inspiration Nancy!

4 years ago05/24/15 at 2:02 pm (UTC)

Really outside of the box use of sliders, Nancy.

4 years ago05/24/15 at 4:16 pm (UTC)

This is an innovative approach Nancy, once I found the slider I was ready to navigate.

Niki Bray
Nancy Woinoski

4 years ago05/25/15 at 12:54 am (UTC)

Awesome, Nancy! So creative. I love the depth created by having the silhouettes with their backs to us.

4 years ago05/25/15 at 8:44 pm (UTC)

Hi Nancy, I love this dual slider!! It's amazing! How did you get the slider to work on the images themselves? I really want to give this a go!

4 years ago05/25/15 at 11:03 pm (UTC)

Hi Tania, I'm glad you like it. It is pretty easy to set up. I've posted the source file now so that you can take a look.

4 years ago05/25/15 at 11:39 pm (UTC)

Thanks Niki!

4 years ago05/25/15 at 8:43 pm (UTC)

I'm intrigued by the drag-the-image-to-move-the-slider effect, Nancy. (Especially now that I know you built it in a minute!) Can you tell me how it's done or point me to a resource that explains it? (Thanks!)

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.

4 years ago05/25/15 at 10:56 pm (UTC)

Well that's good to hear, Nancy! That's the only way I could imagine it being done. I've done the same on sliders myself - just not to that scale for the thumb image. So glad I wasn't missing a major part of the slider curriculum. :) Thank you!!

4 years ago05/25/15 at 11:02 pm (UTC)

Ok, here is the Storyline source. I should really do a blog post but this will do for now. https://dl.dropboxusercontent.com/u/73851/slider2.story

4 years ago05/25/15 at 11:19 pm (UTC)

Thank you, Nancy! I really appreciate you sharing how you built such an impressive demo in such a simple (yet ingenious) way!

4 years ago05/26/15 at 1:21 am (UTC)

Thank you so much for uploading this! I got it working! I would have never thought to change the image of the slider.

4 years ago05/26/15 at 4:58 am (UTC)

The best part of this challenge is to view "Such phenomenal work". Hats off!!

Joy singh
Nancy Woinoski

4 years ago05/26/15 at 10:44 am (UTC)

Simply superb, Nancy. Never though of using 2 sliders like this. Hats off! And thx for sharing the storyline file!

4 years ago05/27/15 at 9:58 am (UTC)

This is great, really inspiring!

Charles Hamper

4 years ago05/22/15 at 10:03 pm (UTC)

Here's my motion gallery, with slider. Hope you like Mayberry! http://montereymotiongraphics.com/challenge/gallery/

4 years ago05/23/15 at 2:14 am (UTC)

Oh man, mine was going to be similar. Great minds think alike!

4 years ago05/23/15 at 3:00 am (UTC)

Nice, Charles! Did not expect to see Barney Fife or Otis turn up here.

4 years ago05/23/15 at 2:46 pm (UTC)

I love this Charles - it is kind of a play on last weeks animated gifs - so cool.

4 years ago05/24/15 at 2:04 pm (UTC)

Great idea Charles

Niki Bray
Charles Hamper

4 years ago05/25/15 at 12:56 am (UTC)

Super cool way of using animated gifs and sliders, Charles. So creative. Amazing ideas from seeing everyone's work.

4 years ago05/25/15 at 1:58 pm (UTC)

Very cool Charles, I was thinking your approach would be great for video/graphic software simulation/training, like how to adjust contrast, brightness, hue, etc.

4 years ago05/28/15 at 2:55 pm (UTC)

I like that idea. A lot.

4 years ago05/28/15 at 3:10 pm (UTC)

Thanks Charles.

Wilson Santiago

4 years ago05/23/15 at 1:34 am (UTC)

Wow! Some really great examples here today! Here is mine: https://dl.dropboxusercontent.com/u/78039977/Challenge%20Slider/story.html

4 years ago05/23/15 at 2:27 am (UTC)

Cool example, Wilson! I like the use of graphic icons combined with sliders! Thanks!

4 years ago05/23/15 at 9:15 am (UTC)

This is a great list. Like the tire as a slider thumb and can't go wrong with icons. For me, I have to add a category - spare parts. :)

4 years ago05/24/15 at 9:46 am (UTC)

Like it very much, Wilson

Niki Bray
Wilson Santiago

4 years ago05/25/15 at 1:00 am (UTC)

I love this design of this demo, Wilson. I might have to use this idea in some of my projects. Thanks!!! :)

4 years ago05/25/15 at 1:01 pm (UTC)

This is a great example. Love the way you have expanded the use/look of the slided. One that I'm going to keep in mind for sure to use.

4 years ago05/25/15 at 2:01 pm (UTC)

Wilson, I hadn't thought of getting rid of the track altogether. I also liked your use of thumbnails at the bottom to show learners what they're sliding to.

Mark Bennett

4 years ago05/23/15 at 2:27 am (UTC)

This is my first challenge. I was able to get some great inspiration from the previous slide shows. http://markbennettdc.com/articulate_challenge/slideshow/story.html Storyline file http://markbennettdc.com/articulate_challenge/slideshow_template.story

4 years ago05/23/15 at 3:06 am (UTC)

Nicely done, Mark. Did you make it in Studio? The transitions look great!

4 years ago05/23/15 at 11:59 am (UTC)

It was done in storyline

4 years ago05/23/15 at 3:08 am (UTC)

Now that's an elegant example, Mark! Welcome to the challenges!

4 years ago05/23/15 at 9:18 am (UTC)

For your first challenge, you nailed it! Clean transitions, Mark.

4 years ago05/23/15 at 2:54 pm (UTC)

Really nice work Mark - I bought a widget that I used to create a similar effect on my website. Now I know I could have saved my money and built the same thing in Storyline.

4 years ago05/24/15 at 12:43 am (UTC)

Thank you. I like the flexibility of Storyline. Added a video to the slideshow. Slideshow http://markbennettdc.com/articulate_challenge/slideshow/story.html Storyline file http://markbennettdc.com/articulate_challenge/slideshow_template.story

4 years ago05/25/15 at 4:56 pm (UTC)

The video is a nice touch.

4 years ago05/26/15 at 12:32 pm (UTC)

Great way to join the community Mark, excellent work!

4 years ago05/24/15 at 2:05 pm (UTC)

Very attractive Mark!

4 years ago05/25/15 at 1:01 am (UTC)

Great job, Mark. Such a nice, clean design.

4 years ago05/25/15 at 12:09 pm (UTC)

Hey Mark..welcome to the challenges! this was a great entry..very elegant and soothing to eyes! Especially liked the use of video!

4 years ago05/25/15 at 2:05 pm (UTC)

Nice job Mark, cool throwing in a little video to change it up. I also like to use semi transparent boxes to make the text more readable when placed on top of a picture/video.

Jackie Van Nice
Hero

4 years ago05/23/15 at 3:04 am (UTC)

OK - it's not my first challenge, but it's my first photo slider: http://www.jackievannice.com/?p=175069264

4 years ago05/23/15 at 3:08 am (UTC)

I think you found an amazing solution to your first photo slider:-)

4 years ago05/23/15 at 3:15 am (UTC)

Thanks, David!! They're sure fun to do. It'd be great to play with them again when I've got more time. :)

4 years ago05/24/15 at 1:23 pm (UTC)

Jackie, I just love this! You made it so intuitive with the text color change between the map and the cities. No instructions needed! Love it.

4 years ago05/24/15 at 2:53 pm (UTC)

Thank you, Lyn! I appreciate it very much! :)

4 years ago05/24/15 at 2:06 pm (UTC)

Nice Jackie, now I want to go away on vacation :)

4 years ago05/24/15 at 2:56 pm (UTC)

Thanks Linda! You should absolutely take a vacation! (I'm a serious proponent of goofing off.)

4 years ago05/24/15 at 2:57 pm (UTC)

I always like when goofing off and serious are used in the same sentence :)

Joy singh
Jackie Van Nice

4 years ago05/25/15 at 11:57 am (UTC)

Hey Jackie, great example of a slider and an excellent example of color ques. Loved it! BTW..thx for taking us through Turkey. Great photos:)

4 years ago05/25/15 at 1:43 pm (UTC)

Thanks, Jaipreet! :)

4 years ago05/25/15 at 2:08 pm (UTC)

Jackie, cool idea to have the slider navigation on two levels, one focused on the thing being pictured, and the other on the city from which those pictures were taken. I never thought of that. Of course, the images are spectacular!

4 years ago05/27/15 at 12:22 am (UTC)

Thanks, Dan! And thanks for your cameo in Fethiye. :)

4 years ago05/26/15 at 4:55 am (UTC)

Impeccable design and great Images :D

4 years ago05/27/15 at 12:23 am (UTC)

Thanks so much, Ashi! :)

wendy G
Jackie Van Nice

4 years ago05/27/15 at 5:56 pm (UTC)

Looks great. I had a similar idea. Working on it now for my first challenge submission!

Tom Kuhlmann
Staff

4 years ago05/23/15 at 3:13 am (UTC)

Really like the examples in the challenge. Here's one that's more experimental. I wanted to create a slippery slider where the thumbnails moved and changed to reflect the changing background. http://articulate-heroes-authoring.s3.amazonaws.com/Examples/Storyline/SL2/image-slider/story.html

4 years ago05/23/15 at 3:23 am (UTC)

That's the best slippery slider I've seen all day, Tom! Really like the unusual effect. If I were more awake I'd definitely try to figure out how the heck you made it.

Phil Mayor
Hero
Jackie Van Nice

4 years ago05/23/15 at 7:59 am (UTC)

Great Tom, that has some great applications, great idea

4 years ago05/23/15 at 11:15 am (UTC)

Slick effect, Tom. Like Jackie, my mind is off thinking about how this was assembled. "Slick Slippery Slider" :)

4 years ago05/23/15 at 3:24 pm (UTC)

Essentially the slider has it's own states that change based on a range. My next goal was to try make the image appear stationary as the slider states were changing, but that's a lot more work. :)

4 years ago05/23/15 at 12:02 pm (UTC)

This is great. I haven't played with the slider much.

4 years ago05/24/15 at 2:08 pm (UTC)

Nice effect, I didn't realize it was a slider when I first saw it. I thought I had to click on the images.

4 years ago05/25/15 at 1:04 pm (UTC)

I like the effect. I was like Linda thinking I had to click the images before I realized I had to slide it. Of course it was called a slippery slider. I wonder if the effect would be slicker if it was smaller in size instead of full screen. Or I may have just been sitting too close to the monitor. ;

over 3 years ago01/14/16 at 11:31 pm (UTC)

Great work Tom this is great! I'm lovin' the full screen display.

Kevin Thorn
Hero

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

4 years ago05/23/15 at 1:49 pm (UTC)

Great job Kevin! When I try to access the source I get an error unfortunately.

4 years ago05/23/15 at 8:48 pm (UTC)

Thanks Wilson. Fixed.

4 years ago05/24/15 at 1:42 pm (UTC)

Thanks Kevin for the source file. Just downloaded it and am very curious to see how you did this with the T/F variables.

4 years ago05/24/15 at 4:42 pm (UTC)

Nothing too complex. Just a logic strategy evaluating current location and showing the 'out' animation layer before showing the 'in' animation of the chosen content layer selected via a dot.

4 years ago05/24/15 at 2:09 pm (UTC)

Good idea

4 years ago05/25/15 at 12:02 pm (UTC)

Great demo, Kevin. Very simple to use and elegant at the same time!

4 years ago05/25/15 at 2:13 pm (UTC)

Very nice Kevin, getting all vertical on us eh?!

4 years ago05/27/15 at 4:43 pm (UTC)

Nice job, Kevin and thanks for sharing!

Jane Maduke

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

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!

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.

4 years ago05/23/15 at 8:56 pm (UTC)

Welcome! Really enjoyed your write-up Jane. I try to remind myself all the time on your lesson learned about not thinking too much. :)

4 years ago05/24/15 at 2:11 pm (UTC)

Welcome to the challenges Jane and a great first entry!

4 years ago05/25/15 at 1:09 am (UTC)

Hi, Jane. Nice work. I have only been participating in the challenges for a few weeks now and I, too, am seeing an increase in my knowledge of the tool. These challenges are definitely helping me develop and display my creativity and skills with Storyline.

4 years ago05/25/15 at 5:00 pm (UTC)

Go Canada! This is a great first effort. I love the clean look. It really places the focus on the pictures - and what pictures - you sure can't beat scenery like that.

4 years ago05/28/15 at 1:49 pm (UTC)

Hi Jane, It is great to see another Albertan around here. Your example made me miss the mountains. What climb was that it looks familiar.

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/

Linda Lorenzetti
Hero

4 years ago05/24/15 at 2:13 pm (UTC)

Here's my entry, I wanted it to slowly cycle through the photos as well as letting you navigate with a hidden menu. http://e-adventurer.com/photogallery/

4 years ago05/24/15 at 2:35 pm (UTC)

I really like the navigation.

4 years ago05/24/15 at 3:11 pm (UTC)

Thanks Mark

4 years ago05/24/15 at 4:47 pm (UTC)

Nice job on the hidden menu. The nested approach to having two separate galleries works well where it would easy to add more galleries to this template.

4 years ago05/24/15 at 10:26 pm (UTC)

Thanks Kevin, exactly, it would be very easy to expand on this.

4 years ago05/25/15 at 1:39 am (UTC)

Nice Linda! Another elegant design - did you use the "master slide approach" for the menu + hover, or build it slide by slide?

4 years ago05/25/15 at 1:46 am (UTC)

Thank you Michael, I initially tried the master slide approach, but it didn't work for this project because the photos covered the hotspots and they wouldn't work. I think that approach works best when the same background is used throughout. I ended up copying the menu layer to each slide.

Joy singh
Linda Lorenzetti

4 years ago05/25/15 at 11:59 am (UTC)

Great entry, Linda. Loved the hidden navigation. It gave more space to pictures!

4 years ago05/25/15 at 12:25 pm (UTC)

Thanks Jaipreet, my thoughts exactly. Why look at navigation when you can look at beautiful photos instead?

4 years ago05/25/15 at 1:47 pm (UTC)

Nice, Linda! I love the hidden menu, too. I was only on mobile yesterday, so couldn't see that part. I wonder if there'd be a way to adapt it for mobile? (Just musing.) Beautiful job!

4 years ago05/25/15 at 1:56 pm (UTC)

Thanks Jackie. Do you know what I would have to do differently to have it work for mobile?

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.) :)

4 years ago05/25/15 at 3:07 pm (UTC)

I value your input Jackie. I was thinking about not making the instruction too intrusive, but forgetting about it possibly being too small for devices. I'm glad that you were able to access the menu.

4 years ago05/26/15 at 4:51 am (UTC)

It gives the look/feel of browsing through a website..Ingenious!

4 years ago05/26/15 at 4:01 pm (UTC)

Thanks Ashi

Alexander Salas

4 years ago05/24/15 at 4:18 pm (UTC)

Another Lorenzetti classic!

4 years ago05/24/15 at 10:27 pm (UTC)

Thanks Alexander.

Stephanie Harnett
Hero

4 years ago05/24/15 at 6:51 pm (UTC)

Hi all. I did this one a while back so thought I'd throw it into the challenge. It was before slider functionality was added to Storyline. https://www.youtube.com/watch?v=sKAYkwDXDi8

Kevin Thorn
Hero
Stephanie Harnett

4 years ago05/24/15 at 9:12 pm (UTC)

Clever photo slider using scrolling panel, Stephanie!

4 years ago05/24/15 at 10:24 pm (UTC)

I remember this one, great idea.

Daniel Sweigert

4 years ago05/24/15 at 9:09 pm (UTC)

Being that summer is on the way, I created mine about tropical fruit trees. http://cropcirclecollective.com/TropicalFruitTrees/story.html And here's my blog about how I did it: https://dansweigert.wordpress.com/2015/05/25/dont-slide-on-that-banana-peel/

4 years ago05/25/15 at 1:53 pm (UTC)

Delicious tropical tour, Dan! I liked that your commentary on each was personal and unique to you.

4 years ago05/25/15 at 3:36 pm (UTC)

Thanks Jackie, you know I love my trees!

4 years ago05/25/15 at 2:43 pm (UTC)

Cool layout for the images, Dan. And the pineapple slider is classic! I don't think I'll ever get over the novelty of customizing the slider thumbs. Perhaps that should be its own challenge?

4 years ago05/25/15 at 3:37 pm (UTC)

Thanks David, only in retrospect did I think I should have used a banana peel!

4 years ago05/26/15 at 5:36 pm (UTC)

Love this Dan. I just have one tiny suggestion. Right now you can see a border around the pineapple. You might want to consider setting the Thumb Border to none.

4 years ago05/26/15 at 9:27 pm (UTC)

Thanks Nancy, I'll do that. Sent from my iPhone

4 years ago05/27/15 at 4:53 pm (UTC)

This brought back so many memories of Hawai'i! I love jackfruit and loquats! We had a loquat tree growing up and it was my favorite. Great entry, Dan!

4 years ago05/27/15 at 7:19 pm (UTC)

Thanks Jessica, check out the Fruit and Spice Park in Homestead, FL if you want to see and taste an incredible variety of exotic fruits.

Michael Burns

4 years ago05/24/15 at 10:07 pm (UTC)

There are some really great examples here! I'll throw mine into the ring - since it's a challenge about image galleries, I thought, why not make it about images themselves? Hope you like my take on Swiss Design: http://goo.gl/5MBREB

4 years ago05/24/15 at 10:33 pm (UTC)

Nice Michael, I had never heard of Swiss Design before, nor had I been compared to Helvetica :)

4 years ago05/25/15 at 1:40 am (UTC)

Thanks Linda :) I hope you check out more Swiss Style examples, that was tip of the iceberg.

4 years ago05/25/15 at 2:24 am (UTC)

Interesting style. First I've heard of it, too.

4 years ago05/25/15 at 2:24 pm (UTC)

Michael, very cool animations of the text and images! I also loved how you "changed up" the navigation as you went deeper into the interaction, It all works very well with the art and design theme.

4 years ago05/26/15 at 1:36 pm (UTC)

Thanks Dan, glad you liked it!

Alexander Salas

4 years ago05/25/15 at 3:17 am (UTC)

This one is an image gallery of "Life at the Beach" http://bit.ly/1BkSGj5

Joy singh
Alexander Salas

4 years ago05/25/15 at 12:05 pm (UTC)

Hey Alex..this was so refreshing! Water in the background and photos moving..just amazing..I felt like I should plan a vacation to a beach now!

4 years ago05/25/15 at 12:28 pm (UTC)

Another Salas classic :) I really like the look and feel of this one. It reminds me of vacation postcards.

4 years ago05/25/15 at 2:27 pm (UTC)

Alex, I like the way you presented the images on the slider at an angle adding a little 3D effect.

4 years ago05/26/15 at 7:54 am (UTC)

It makes me want to go on holiday, Alex!

4 years ago05/26/15 at 12:43 pm (UTC)

Thank you guys! Your feedback is always inspiring.

Joy singh

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

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
Linda Lorenzetti

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!!

4 years ago05/25/15 at 8:08 pm (UTC)

Looks great Jaipreet!

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.

4 years ago05/25/15 at 2:30 pm (UTC)

Very neat "angular" design Jaipreet!

4 years ago05/25/15 at 6:01 pm (UTC)

Great work Jaipreet, I love the creative approach and refreshing angles.

4 years ago05/26/15 at 4:43 am (UTC)

Talk of different and unique...Liked it a lot Jaipreet :)

4 years ago05/26/15 at 7:13 am (UTC)

Thank you everyone for liking it and, of course, for your valuable suggestions!

4 years ago05/26/15 at 1:39 pm (UTC)

Hey Jaipreet, this is seriously cool - and your approach is "just enough" out of the box, very slick and drew me in.

4 years ago05/28/15 at 2:54 am (UTC)

Thx Michael for liking it!

Ashi (Neha) Tandon

4 years ago05/25/15 at 10:31 am (UTC)

Hola, here's my attempt to this weeks challenge: http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/stp19m5a0epc1oruvk1v6b12e0f3q4/story.html

Joy singh
Ashi (Neha) Tandon

4 years ago05/25/15 at 11:54 am (UTC)

Quite interesting way to present images, Ashi, . Very different from the normal ones that we usually see!! great job!

4 years ago05/25/15 at 12:13 pm (UTC)

I agree, very original!

4 years ago05/25/15 at 12:39 pm (UTC)

Really nice concept Ashi. Drat, now I'm hungry again!

4 years ago05/25/15 at 2:33 pm (UTC)

Cool to see some alternative animations being employed in bringing in the new images and content, nice work Ashi!

4 years ago05/26/15 at 4:39 am (UTC)

Thanks everyone but I was inspired by some site I saw few moons ago, can't recall it though...Thanks again :D

4 years ago05/26/15 at 7:58 am (UTC)

I like it being different, Ashi! And it makes me hungry :)

Veronica Budnikas
Hero

4 years ago05/25/15 at 12:14 pm (UTC)

Hi all, A very quick one from me: http://veronicab.com.au/wp/wp-content/uploads/articulate_uploads/ImageGallery/story.html Can I be cheeky and enter this one in the Pantone Color of the Year challenge? Great entries everyone!

4 years ago05/25/15 at 12:42 pm (UTC)

Nice Veronica, when can I move in? Definitely use this for the Pantone challenge as well, two entries in one are always a good idea and a time saver.

4 years ago05/25/15 at 12:51 pm (UTC)

Thanks Linda! I really like yours too, the hidden menu is genius!

4 years ago05/25/15 at 2:35 pm (UTC)

Nice use of music, it worked well with the images. So many of us shy away from using music in fear it will be distracting, but here's a good example of how to do it right.

4 years ago05/25/15 at 10:23 pm (UTC)

Thanks Dan, I love using a bit of music, but agree it doesn't always work.

4 years ago05/26/15 at 4:41 am (UTC)

Neat and sleek design Veronica...How did you make the images spin around central axis?

4 years ago05/26/15 at 4:45 am (UTC)

Hey Ashi, thanks! Each image has a swivel entrance and exit animation, set at .75 I think. The images start hidden, and the buttons basically unhide and hide them. Everything is on the same slide with no layers. Glad you liked it! Your was very cool, a very unique perspective :)

4 years ago05/26/15 at 4:48 am (UTC)

Thanks for the prompt reply...I am gonna try my hands on it :D

Joy singh
Veronica Budnikas

4 years ago05/26/15 at 10:52 am (UTC)

Great project, Veronica. Loved it! the color scheme, photos, tabs, fonts, and, of course, music. Thx for sharing. My only suggestion would be to select the "resize browser to fill screen" option before publishing. I was about to miss the tabs at the bottom till I realized that there is a scroll bar:)

4 years ago05/26/15 at 11:45 am (UTC)

Thanks Jaipreet, that is good feedback, and I have amended :)

David Anderson
Author

4 years ago05/25/15 at 2:36 pm (UTC)

And I thought this would be a light week for the challenges.

4 years ago05/25/15 at 2:49 pm (UTC)

Nah - this one's too much fun!

4 years ago05/25/15 at 3:08 pm (UTC)

Agreed

4 years ago05/25/15 at 3:22 pm (UTC)

Clearly we should organize an elearning challenge retreat so we (and by "we" I mean "I") can get back in sync.

4 years ago05/25/15 at 3:20 pm (UTC)

I thought it was a tougher challenge (#wrong) and the holiday weekend (#wrong) combined with the guru contest (#wrong) would result in a slower week. Wrong again.

4 years ago05/25/15 at 3:41 pm (UTC)

It's not a holiday weekend everywhere. We had ours last week (Victoria Day). Maybe as the Guru deadline approaches we should take a break.

4 years ago05/25/15 at 5:06 pm (UTC)

Sliders are super easy to do in Storyline 2 - I put my example together in a minute. The big challenge is coming up with an idea.

4 years ago05/25/15 at 6:03 pm (UTC)

ELH! The "H" is for Hardcore! No light stuff here ; )

Daniel Sweigert

4 years ago05/25/15 at 2:38 pm (UTC)

I haven't been in on a challenge in a while and it's always very helpful to see what my colleagues have been up to. The main thing I noticed/learned this time around is that you can hide the player! You'd think I would known that by now.

Ian Monk

4 years ago05/25/15 at 5:46 pm (UTC)

It's been a couple of weeks since I've contributed... Check this out: http://tinyurl.com/luf4zrr There are no sliders in this gallery, but I wanted to share anyway. I've got a few other ideas floating around in my head for this one. I may make another submission later this week.