Next and Previous Gallery Buttons

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:

next and previous buttons added

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:

next and prev in design manager

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.

2 comments on “Next and Previous Gallery Buttons

  1. Pingback: Media Lab Blog » Adding Thumbnails to a Gallery

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>