Easy Slideshow or Gallery in HTML

[roush_94]

On our current LMS we are able to use as much external CSS and JavaScript as we dare to use, which has enabled us to do some nice things that haven't converted so well to Canvas. In transitioning to Canvas we decided to ditch the HTML and go with Pages which will be much easier to maintain and support, but we have had to find some workarounds. We also don't like to rely on external tools unless we have to.

I'd like to share what we are using as a solution to a basic slideshow, it could be an image gallery as well of course. It isn't fancy or perfect but it is easy to adapt with a little bit of basic HTML knowledge. One plus is it should match your branding, but you may need to switch some colors around (the ones on line 3 of the code snippet). Huge thanks to the Canvas Community, I've learned so much recently from here, including some of the style guide use in this example, and experienced a ton of creativity.

Here is what it looks like:

This video is currently being processed. Please try again in a few minutes.

Here is a short code snippet, you can copy and paste as many image section as needed, sizes and colors can all be changed easily in the code.

<!-- Setup the Container and Title -->
<div class="img-rounded" style="overflow-y: scroll; height: 390px; width: 447px; float: right; background-color: #rgb(136, 0, 0); border: 0px solid black; margin: 10px;">
<h4 style="color: #000; background-color: ##f7f7f7; text-align: center; margin: 0px; padding: 0px;">Slideshow Title</h4>
<div id="cc-homepage-announcements" style="height: 357px; overflow-x: hidden; overflow-y: auto; padding: 1px; text-align: center;">
<!-- Time to Add Slides. If you need more slides, copy and paste a section, but make sure you increment the div id and the href ids for the buttons-->
<!--Slide 1 -->
  <div id="img1">
  <img src="/courses/###/files/####/preview" width="425px" alt="Alt Text" />
  <!--Next Button -->
  <div class="btn btn-primary"><a style="color: #fff" href="#img2">Next Slide</a></div>
  </div>
<!--Slide 2 -->
  <div id="img2">
  <img src="/courses/###/files/####/preview" width="425px" alt="Alt Text" />
  <!--Previous Button -->
  <div class="btn btn-primary"><a style="color: #fff" href="#img1">Previous Slide</a></div>
  <!--Next Button -->
  <div class="btn btn-primary"><a style="color: #fff" onclick="return false" href="#img3">Next Slide</a></div>
  </div>
<!--Slide 3 -->
  <div id="img3">
  <img src="/courses/###/files/####/preview" width="425px" alt="Alt Text" />
  <!--Previous Button -->
  <div class="btn btn-primary"><a style="color: #fff" href="#img2">Previous Slide</a></div>
  </div>
<!-- Close those Divs -->
</div>
</div>
<!-- End Slideshow -->

[Stef_retired]

This is nifty,  @roush_94 ! Simple and straightforward creation process, and the gallery looks clean and elegant on the page. Thanks for sharing!

[roush_94]

Thanks! I should also mention it works in the Canvas app. The buttons aren't there but you can easily swipe through the images.

[josh_emmitt]

This is great  @roush_94 ​, it makes for really cool additions to a page. Do you know of any way to stop entire page from scrolling to the top of the slide frame when you click on the "next slide" button? It isn't really an issue, it would just be nice to be able to keep the page still when clicking between slides.

[roush_94]

Unfortunately the only way to avoid the "jump" is through the use of JavaScript. The other downfall is you need to tweak some things if you want multiple slideshows on a single page, its usually not an issue for us, but I can post the solution for that.

The only issue we have so far is that it is a little cumbersome to construct a longer slideshow, but I'm working on something to make that better, if it works out I'll post it here. We're very early in the adoption process, so still working out some of our processes for getting courses built .

[kmeeusen]

Great job, Byron!

What I especially like is that it makes use of Canvas pages, rather than something from a third-party.

Do you mind if I add it to the CanvasHacks Demo course, or you can do it yourself?

Agent K

[eliams]

Happy Monday. Ditto Kelley! This is fantastic!

I'm in the middle of a couple developments using some third-party because of the page interaction with presentations. It's great for viewing, but to build something dynamic is a little more labor intensive. This display is of action is definitely in the vein of creating an elearning source within the LMS. That would be AWESOME!

Thanks for sharing Byron!

Best,

Sheryl

[roush_94]

Please post it into Canvas Hacks, that is an honor

[kmeeusen]

It will be done, Byron, and the honor is mine. If it were not for contributors like yourself, that course would not exist.

Thanks!

Agent K