A photo album with CSS controls for previous and next

A client who owns a salon wanted a change to her web site.

She used to have pictures of stylists and styles. So on Amanda’s page there was a picture of Amanda, and 1-3 pictures of hairstyles that she had created.

The new site would add another dimension. There would be a picture of Amanda, 1-3 styles she had created, and now, for each style, 1-3 pictures of the same style. Instead of Amanda getting 1-3 pictures, she’d get 1-3 photo albums.

There are many carousel and slide-show libraries available, but I didn’t want to be tied to someone else’s library. I wanted something simple:

  • Albums should be the same size as a regular picture.
  • Affordances for “previous” and “next should be unambiguous

Both requirements helped to rule out thumbnail pictures of other pictures in the album. Thumbnails that were big enough to be clear would take up space, and if two pictures of the same style were similar, it might not be clear that a thumbnail was actually a different picture.

Left- and right-pointing triangles seemed like a good indicator. I didn’t want to put them adjacent to the picture because that increased the size. Overlaying them on the photo could be confusing, depending on the size and color of the triangles. Plus, depending on the crop of a photo, they could be embarrassingly placed (horns? nipples? shoulder pads?). So what I wanted was:

  • left- and right-pointing triangles
  • against a solid background to form a “control” clearly separate from the photo
  • controls that broke the boundary of the photograph to show they were separate
  • opacity to be slightly less distracting to the photos

Circles were less obnoxious than squares for the previous/next controls. Also, a double border — light then dark — helped set the shape off from any photos that were primarily black or white at the bottom. What I wanted is this:

Photo showing unambiguous controls for previous and next

Unambiguous controls for previous and next

I knew I could make semi-transparent PNGs if I had to, but I wanted to try CSS first — and had great success.

First the triangle. I know that most modern browsers (back to at least IE7), including mobile devices and tables, handle UTF-8 very well. The right- and left-pointing triangles, ◄ and ►, are & #9658; and & #9658; respectively, blown up large so that they become finger-sized elements on a tablet.

Next the circle. A border-radius of 100% makes a nice circle. Some absolute positioning nudges the shape outside of the boundaries of the photo. A box-shadow outside of the white border makes a double border and creates some 3D separation. Opacity keeps the control muted until you hover over it.

IE8 and IE7 can’t handle the border-radius, the opacity, nor the shadow. I might have added some proprietary IE filters to achieve the same effect, but luckily, I didn’t have to worry about IE8 or below. (And in fact, in IE7 and IE8, you can still see the controls, they still hang outside of the picture, and they are still unambiguous — they’re just not as classy).

You can see the album controls in action on the live site. The code in use is below. Note that I’m using Nicole Sullivan’s OOCSS to build the page. The “album” is an OOCSS module, which requires a certain HTML structure. The JavaScript is trivial; it simply shows and hides images that are already on the page, so the responsiveness is fast at the expense of a slightly slower page load time.

HTML

 <div>
    <b><b></b><b></b></b>
    <div>
        <div>
            <div>
                <img src="/uploads/DSC_0955_2.jpg" >
                <img src="/uploads/DSC_0959_2.jpg" >
                <img src="/uploads/DSC_0978_2.jpg" >
                <span>◄</span> 
                <span>►</span>
            </div>
        </div>
    </div>
    <b><b></b><b></b></b> 
</div>

CSS

.album .bd {overflow: visible;}
.album {overflow: visible; font-size: 230%; line-height: 100%; 
    color: #ffffff; text-shadow: 2px 2px 2px #000000; }
.album .next,
.album .previous {position: absolute; bottom: -6px; opacity: 1; 
    cursor: pointer;
    display: none; font-family: Arial, Helvetica, sans-serif; 
    font-size: 26px;}
.album .next {background-color: #000000;
    border: 2px solid #FFFFFF;
    border-radius: 100% 100% 100% 100%;
    box-shadow: 0 0 3px #000000;
    cursor: pointer;
    opacity: 0.5;
    right: -6px;
    padding: 3px 2px 1px 8px;
    }
.album .previous {background-color: #000000;
    border: 2px solid #FFFFFF;
    border-radius: 100% 100% 100% 100%;
    box-shadow: 0 0 3px #000000;
    cursor: pointer;
    opacity: 0.5;
    left: -6px; 
    padding: 3px 8px 1px 2px;}
.album .next:hover,
.album .previous:hover {opacity: 1;}
Advertisements
This entry was posted in CSS, Design, Mobile. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s