Looking back in time by 900hp, on Flickr

A better simple slideshow

If you don’t have time to do it right, when will you have time to do it over?
— John Wooden

It’s a do-over! This is another fairly basic slideshow, written in javascript, html, and css. This is a dual-purpose project, it’s meant (1) to be something you can drop right into your page and use if you so choose, but it’s also meant (2) as an example/tutorial showing you how to build a simple DIY slideshow from scratch on your own. You can see a couple of demos of the finished product here: http://leemark.github.io/better-simple-slideshow/.

Background

Last December I posted a tutorial, “A simple DIY responsive image slideshow made with HTML5, CSS3, and JavaScript“, which ended up being unexpectedly popular (~50K views as I write this).

As I said in a comment on that post: “When I originally wrote this I just spent an afternoon playing around with different techniques, and this seemed like a decent approach. I honestly never expected more than a few people, or a few dozen at most to ever see it, and definitely never meant it to be code that other people would put into production. But I’m really glad to have had a lot of people look at it, and use it, and give feedback on how it can be improved. It’s probably overdue for a new and improved version.”

Now, finally, »this« is that new and improved version.

Features

  • fully responsive
  • option for auto-advancing slides, or manually advancing by user
  • multiple slideshows per-page
  • supports arrow-key navigation
  • full-screen toggle using HTML5 fullscreen api
  • swipe events supported on touch devices (requires hammer.js)
  • written in vanilla JS–this means no jQuery dependency (much ♥ for jQuery though!)

Demo

“Medium” by Thomas Hawk.

“Colorado” by Trey Ratcliff.

“Early Morning at the Monte Vista Wildlife Refuge, Colorado” by Dave Soldano.

“Sunrise in Eastern Colorado” by Pam Morris.

“colorado colors” by Jasen Miller.

Demo link

How to use it

If you just want a slideshow script that you can drop into your own site and use, see the GitHub repo and read the “Getting Started” section. There are a couple of files you will need to download, then a small bit of configuration and you are good to go. See the demo slideshows here for usage examples.

Here’s a direct link to the javascript file and to the CSS file that you will need to download and include in your page. If you plan to use the fullscreen option you will also want to grab these 2 icon images for the fullscreen toggle (icon1, icon2).

How to build it yourself

If you’re interested in writing your own code from scratch, or taking the source code and modifying it for your own purposes, you may want to first read or skim this earlier walkthough, many of the same principles and techniques underlying the slideshow apply–although this new version has more features and the javascript has been rewritten from the ground up.

Please Note: The example code snippets below are excerpts meant to illustrate the techniques used in building the slideshow. For the full source code to use in your own pages, please see the “How to use it” section above or get the full finished code on GitHub.

The slideshow HTML

Rather than using an unordered list or a bunch of <div>s or whatever, let’s use the more semantic HTML5 elements figure and figcaption. The HTML markup for the slideshow should look basically like this, with a container element wrapping the whole thing (doesn’t have to be a <div>, any block element will do) and each slide is a <figure>.

Inside each <figure> is an image and a figcaption. Each <img> has a width of 100% which helps make our slideshow responsive, in that it automatically resizes to fit the available width. The image caption goes inside the <figcaption> element, and it’s fine to use inline HTML elements inside of it, so feel free to add hyperlinks in image captions if you want.

The CSS styles

There are 2 major purposes of the CSS for this slideshow, the first is to fine-tune all the little aesthetic details like what font we’re using, what the text and background color is for the caption, etc. I’ve omitted all that from the code below, but you can see the full CSS here if you’d like.

The second purpose is to handle the actual workings of the slideshow, to position all the elements inside of the slideshow, and to show the current slide, hide all of the other slides, and transition between them when needed. This is what I’ve included in the commented example code below.

With this CSS we are setting up nearly everything needed for display of the slideshow, the individual slides, the captions, the ‘hidden’ default state of the slides, and the ‘active’ visible state of the current slide (the one with the ‘bss-show’ class). All we need to do with the javascript is to keep track of the current slide and perform some class-swapping on the figure elements, so that the active slide always has the ‘bss-show’ class and the other slides don’t. Well, that and all the extra features like keyboard navigation, fullscreen, etc.

For clarity and brevity, I’ve only included the standard unprefixed W3C-approved properties in the example CSS above. In production you will also want to include prefixed versions of some properties as needed for cross-browser compatibility. See Chris Coyier’s article “How To Deal With Vendor Prefixes” for a good overview, or use a tool like Autoprefixer.

The JavaScript

Here’s the basic structure of our javascript, the bulk of it is a Slideshow object (using the prototype pattern) that we will create instances of using Object.create(). I’ve replaced the contents of each of the Slideshow object’s methods with a description of what it does, but we’ll walk though each of those methods later on. Also, you can see the full unedited source code here.

Slideshow.init()

This method is called right after the slideshow is created, and it initializes some properties (like the counter to keep track of which slide we’re on), accepts the options object we’ve passed in, and calls all the other methods needed to get the slideshow ready to go.

[1] http://stackoverflow.com/questions/3088098/in-javascript-what-does-it-mean-when-there-is-a-logical-operator-in-a-variable
[2] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

Slideshow.showCurrent()

This method is triggered whenever we want to change/advance the current slide, either by clicking the next or prev buttons, via arrow key input, by the auto-advance timer, whatever.

[1] http://stackoverflow.com/a/16053538/2006057

Slideshow.injectControls()

This method is only called once, when the slideshow is initialized on page load, and it creates the controls i.e. the previous and next buttons.

[1] https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

Slideshow.addEventListeners()

This method registers event listeners to particular elements, like the previous and next buttons, so that user interactions can trigger the slideshow to change.

[1] http://stackoverflow.com/questions/962033/what-underlies-this-javascript-idiom-var-self-this
[2] http://www.quirksmode.org/js/events_access.html#link5

Slideshow.autoCycle()

This method is called once when the slideshow is created, and only if the ‘auto’ option is set. It uses setInterval() to create a timer loop to advance the slides automatically. In the event that the ‘pauseOnHover’ option is also set, this adds event listeners to clear and restart the setInterval() loop when the mouse is moved over and off the slideshow.

Slideshow.addFullScreen()

This method is called only once when the slideshow is initialized. If the ‘fullScreen’ option is set then it creates the fullscreen toggle button, and adds an event listener to call the toggleFullScreen() method when the button is clicked.

Slideshow.addSwipe()

This method is called once, when the slideshow is initialized, only if the ‘swipe’ option is set. It depends on the HammerJS library.

Slideshow.toggleFullScreen()

This method is called when the user clicks the fullscreen button (assuming the ‘fullScreen’ option is set), and toggles the slideshow in and out of fullscreen mode. The fullscreen API itself is pretty simple, but because the spec is still being standarized, each browser needs its own prefixed code. You can read more here about using full screen mode.

The finished slideshow: CodePen style

Check out this Pen!

References, Resources, and Further Reading

Post featured image: Looking back in time by 900hp, on Flickr

gocode2

Pulling JSON data from a public data API

“It is a capital mistake to theorize before one has data.” ― Arthur Conan Doyle

The Go Code Colorado crew, photo by Allison Daniell of Stellar Propeller Studio
Go Code Colorado photos by Allison Daniell of Stellar Propeller Studio

I had the opportunity recently to participate in Go Code Colorado, an “apps challenge” (think weekend hackathon + startup pitch competition) meant to make public data more accessible. It was an awesome experience and it got me thinking about government/public data, and how to use it and combine it in ways that can help people.

Here’s a quick example of how to pull data from one such public data source,  the Colorado Business Entity Database.   Basically, anyone starting a new business or forming a business entity in Colorado, whether that be a sole proprietership, partnership, LLC, corporation, etc, has to file documents and register their business with the Secretary of State’s office, and that information becomes public data. What we’re going to do in this example is to use state-provided API to pull a list of current businesses in a particular ZIP code, and list out their names, street addresses, and cities.
Continue reading

zoey

Looking back, looking forward, and giving thanks

“Fearlessness is not only possible, it is the ultimate joy.
When you touch nonfear, you are free.”
— Thich Nhat Hanh

Happy New Year, and welcome to 2014! I’ve always liked the first part of a new year–it’s a good time to take stock, and take a little time to be mindful about where I’m going and what I’m doing. So this post will probably be a little more me-centric than usual, but hopefully there’s something of interest to you too–assuming you’re a fellow web designer, web dev, front-end developer, or just an all-around web geek :)

Looking back

2013 was a great year for me professionally, definitely one of my best so far. As I talked about in my very first post, I started 2013 in bit of a rut and like I was slipping behind the times a little in my profession. Now at the end of 2013 I’m much more up-to-date on skills, feeling rejuvenated, more engaged in the web community, and very excited for the future. All the people, projects, organizations, resources, and communities that have helped me get to this point are too numerous to list, but I want to call out a few that I’m particularly thankful for.
Continue reading

Slide Projector by macattck, on Flickr

A simple DIY responsive image slideshow made with HTML5, CSS3, and JavaScript

“It takes half your life before you discover life is a do-it-yourself project.” ― Napoleon Hill

IMPORTANT: I’ve written a new more robust slideshow, along with a code walkthough/tutorial. If you’re looking for a slideshow to use on your own site, it’ll be better and easier to use than this one. Go check it out: http://themarklee.com/2014/10/05/better-simple-slideshow/

A while back I wrote about a technique for building a simple automatically cycling slideshow using CSS animations, no JavaScript required. While that is definitely an interesting technique, it’s also pretty limited in how you can use it. For example, often with an image slideshow rather than just auto-advancing the slides you may want to let the user have control, so they can navigate forwards and backwards through the images at their own pace. These days you also may want a slideshow that’s responsive, so that it will work across a wide range of devices, automatically resize to fit different screen sizes, and maybe even allow some more touch-centric interaction–like swiping to the left or right instead of clicking “previous” and “next” buttons to cycle through the slides.

If this is what you need and you’re just looking for a drop-in solution, there’s no reason to reinvent the wheel, there are some great slideshow options out there already (here are just a few: Unslider, SwipeJS, SlidesJS). However if you’re more of the do-it-yourself type and you want to custom-build your own to suit your exact needs, or just want to see how it can be done, then it’s pretty easy to get started with just a little bit of HTML, CSS, and JavaScript.
Continue reading

Screen Shot 2013-11-27 at 11.36.02 PM

CSS gradients: basic to advanced

“All that’s bright must fade, the brightest still the fleetest; All that’s sweet was made but to be lost when sweetest.” ― Thomas Moore

It used to be when you wanted a nice simple gradient background for your page, the process looked like this: Step 1) fire up Photoshop; Step 2) use the Gradient tool to fill the canvas with a horizontal or vertical gradient; Step 3) crop canvas into a as-small-as-possible slice (often 1px high or 1px wide); Step 4) export .gif or .jpg graphic; and so on. I’m leaving off the rest of the steps, because you either remember how to do it from past experience, or you’ll never need to know how to make a gradient that way thanks to the awesomeness of CSS gradients. Let’s take a look at what they can do! Continue reading