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)
<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 your interested in knowing how the snippet works, keep reading after the jump for a full explanation.