Let’s add a bit of navigation to our simple gallery. If you remember, we started with just one gallery element, the picturebox. By default, when you click on the picturebox, the gallery advances to the next image. But without any controls or instructions, this may not be obvious to your site visitors, and it doesn’t allow users to go back to an image they’ve already viewed.. So today we’ll go one step further and add Next and Previous buttons to allow users to scroll back and forth through your image collection.

Working in Photoshop

To create a button to go to the next or previous image you simply add the “-next” or “-previous” hints to a standard SiteGrinder button named after the gallery you want to navigate:

• If you create a picturebox named “nature shots-picturebox” you can create a button layer named “nature shots-next-button” or even “nature shots-button-next” since the order of hints doesn’t matter.
• This opens up all of SiteGrinder’s buttons behaviors to next/previous controls.  For example, if you are creating an image button you can add a layer named “nature shots-hover-next” to be the hover state of the button created above.
• All this applies to the “-previous” hint as well.

Here’s what I created in the sample gallery we’ve been working on:

That’s all there is to it. There’s nothing special to set in the Design Manager or Content Manager for these buttons to function. Here’s what it looks like when built:

There are other hints that provide variations of next and previous functionality to control the display of thumbsheets, viewsheets, bigboxes, and panels, which we’ll go over in the next tutorials.