Image-switcher snippet
Since my plan today was to start working on creating the portfolio/past work section of this site, I decided to start by creating a few simple snippets that I thought would likely come in handy.
The first of these being a simple image switcher. The idea behind the snippet was pretty much to just be able to put some images inside a div with a particular class and have the snippet do all the work. A little bit of dojo later and the below is the result.
(images “borrowed” from the interweb)
To use the snippet all you need to add Dojo to the page, then import the jsnippet CSS and JavaScript files. After that just add a div to the page with the class “jsnipImageSwitcher”. The above Image switcher for instance is actually just the following HTML wirtten in to the page.
<div class="jsnipImageSwitcher" style="width: 400px;">
<img src="/demo/img/skunk.jpg" alt="A baby skunk!" />
<img src="/demo/img/otter.jpg" alt="An otter" />
<img src="/demo/img/bunny.jpg" alt="A Bunny Rabbit" />
<img src="/demo/img/seal.jpg" alt="Upside down Seal" />
<img src="/demo/img/kittendog.jpg" alt="A Kitten sleeping next to a big dog" />
</div>
The snippet will work out the amount of images dynamically so there are no limits to how many can be used within it. The only limitation to the above being that the default styles may not leave room to fit the dots. As you may have noticed the snippet also pulls it’s caption from the images alt attribute, which has the added bonus of improving the images ability to be found by search.
If for any reason JavaScript is not enabled in a user’s browser the images will display normally without any side-effects as a result of being part of the snippet. The snippet is tested in Firefox, Chrome and IE9.
If your interested in knowing how the snippet works, keep reading after the jump for a full explanation.