Sweet, sweet filmstrip effect, part 2

A few weeks ago I posted a quick tutorial on puting together a quick, clean photo gallery with a filmstrip effect [Sweet, sweet filmstrip effect, part 1]. Here we will expand on that one and you’ll be able to download a sample implementation…

For this we are going to use 2 Javascript libraries. The first is highslide.js. Highslide is a little script that provides an effective alternative to those tired old light/grey/thick/thin-boxes. It more flexible and sucks way less than most.

The second is that old stand-by and general JS workhorse, jQuery. JQuery is optional in this case, but I’m including it anyway. If you haven’t played with this tool before, I definitely recommend taking a look at it. If you don’t want to use it, you can leave it off and just use the “onclick” in the “a” tags.

First things first, let’s get those .js files added to the page:

    <script src="js/highslide.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>

You’ll notice that we’re not using the “language” attribute in the link tag. “Language” has been deprecated in favour of the more universal “type.” With those are in place we can add the magic. As with the previous part of this tutorial, I’ll post the complete listing and the break it down:

    <script type="text/javascript">
        hs.graphicsDir = 'css/highslide/graphics/';
        hs.outlineType = 'rounded-white';

        $(document).ready(function(){
            $("#myFilmStrip a").click(function(){
                hs.expand(this);
                return false;
            });
        });
    </script>

We start with our standard <script> tag with the “type” attribute set:

    <script type="text/javascript">

You could move the following code to an external file and simply refer to it via the “src” attribute, as with jQuery and highslide, but I’m including it in the html file for no good reason. Next come a few properties that highslide provides. The first tells highslide where to look for GUI elements, and the second tell it which ones to use:

    hs.graphicsDir = 'css/highslide/graphics/';
    hs.outlineType = 'rounded-white';

Next is the chewy, jQuery center of the page, starting with the “.ready()” which causes whatever is in it’s function call to execute only after the DOM (the document object model) is, well, ready:

    $(document).ready(function(){

Then we use a jQuery selector to connect to to “click()” event of each “a” tag in the “myFilmStrip” element:

    $("#myFilmStrip a").click(function(){

This means that what any link within the “myFilmStrip” element (an unordered list, in this case) is clicked, the following is executed:

    hs.expand(this);
    return false;

first firing the highslide “expand()” function on “this”, and then returning false. The return false prevents the browser from executing the default built-in action for a click on an “a” tag… it prevents the browser from actually following link.

The we close everything up and we’re done. It’s pretty straight forward, and the results can be pretty dang nice. Take a look at the extended functionality available with highslide. You should be able to make this even better with only a few minor changes.

Download the Sweet FilmStrip Tutorial Files.

Sweet, sweet filmstrip effect, part 1

Bad markup makes me a little sick. Bad advice makes me a little sad. Bad advice to use bad markup… You get the idea. A user on the local Linux user group list recently asked about how someone implemented this:

Someone responded that it looked like they had used an imagemap, which is what caught my interest, not because fifteen year old imagemap technology is that interesting, but rather because I am always interested to see good applications of those technologies that have few, if any, good applications (iframes anyone?) so I pop on over to the site, and take a look…Yikes!!

It would probably have been better If they had used an imagemap. Instead they created a bunch of images, sliced them up, and crammed them into a table (really into a bunch of nested tables). Then, for flavor, they sprinkled in a few <font> and <center> tags. Now, I’m not going to bash the guy for doing it this way. We can assume that he just didn’t know better. Now he will…

First things first, let’s build our nice clean markup. This is essentially a list of images that link to other images, making an unordered list a reasonable approach:

<ul id="myFilmStrip" class="filmStrip">
  <li>
   <a href="/images/theLargeVersion01.png" title="theTitle">
    <img src="/images/theSmallVersion01.png" alt="theAlternateText" />
   </a>
  </li>
  <li>
    <a href="/images/theLargeVersion02.png" title="theTitle">
      <img src="/images/theSmallVersion02.png" alt="theAlternateText" />
    </a>
  </li>
  <li>
    <a href="/images/theLargeVersion03.png" title="theTitle">
      <img src="/images/theSmallVersion03.png" alt="theAlternateText" />
    </a>
  </li>
  <li>
    <a href="/images/theLargeVersion04.png" title="theTitle">
      <img src="/images/theSmallVersion04.png" alt="theAlternateText" />
    </a>
  </li>
  <li>
    <a href="/images/theLargeVersion05.png" title="theTitle">
      <img src="/images/theSmallVersion05.png" alt="theAlternateText" />
    </a>
  </li>
</ul>

Done. The whole first row is now defined. Beautiful markup, less than ideal presentation, but we’ll get to that. First, lets take a look at the images we’re going to need.

We’re going to use a background image on each of the <li /> elements in our list. Another approach would be to use a repeating background on the <ul>, but I prefer our method. This just makes more sense, as is will create little flexible chunks of interface instead of big, inflexible chunks. Here’s our background image:

I’m using some parts of our donor site, but you can create your own that go with your site. The dimensions on this image are 105 x 98, but you can use whatever size makes sense for you. To work with this background image, our thumbnails should be 95 x 70 :

This will allow them to fit onto the background nicely. You can do whatever you want with the larger image, as the will load outside of this interface. You will, however, need to generate a thumbnail for each of your larger images.

Now we get to the CSS:

.filmStrip {
  display:block;
  margin:0 auto;
  width:525px;
}
.filmStrip LI{
  background-image:url('images/background.png');
  display:block;
  float:left;
  height:98px;
  margin:10px 0;
  width:105px;
}

.filmStrip LI A {
  display:block;
  height:70px;
  width:95px;
  margin:14px 5px;
}

.filmStrip LI A IMG{
  border:none;
}

We have 4 styles defined here:

.filmStrip{} – Gives the whole thing a fixed width (causing any more than 5 to wrap to the next line, and allowing children to float), and centering the strip on the page, as with the initial site (no need for those nasty old <center /> tags)

.filmStrip LI{} – Assigns our background image to the list items, sets their display mode to ‘block,’ sets the width and height, and gets them floating in the <ul />

.filmStrip LI A{} – Since we want the area around the thumbnail to be non-clickable, we need to give the anchor a size that matches the image, and use the margin on the anchor to get it lined up on our background.

.filmStrip LI IMG{} – Browsers still put a border on linked images by default. This gets rid of them.

That’s about it. If you add another 5 images, you’ll get something like this:

And 3 more:

Here we see why I prefer to put the background on the <li /> rather than the <ul />. The other approach would have resulted in a big swath of ‘empty’ film.

So, do it this way, or something like it. Please… for the sake of us all.

Next: Where do those links lead?