Sweet, sweet filmstrip effect, part 2

Posted: April 14th, 2009 | Author: ccollins | Filed under: General, Web | Tags: html, javascript, tutorial | No Comments »

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.

---