JQuery: Animated Film Strip


I have seen a number of implementations of animated film strip on websites and I’ve always wondered how it’s been done. Using Silverlight, I feel it’s pretty straightforward with the built-in animation API, but with normal HTML it becomes a non-trivial task, especially if everything is to be client side scripted. With my limited knowledge of JQuery, I decided to give that a go using ASP.NET 2.0.

filmstrip

As you can seen from the screenshot, the film strip is at the bottom with left and right arrows. What happens is when you click either of the arrows is that the images are moved left/right with fading opacity, and the images on the “next” or “previous” page is loaded. It’s a simple illusion built with JQuery animations. The arrows also flicker when you mouse over them. When you click on any of the thumbnails, the image is shown full size.

The images are “hardcoded” in this example, but in real life, the thumbnails or their urls could be retrieved via an AJAX web service or any other mechanism. Last of all, I stored the image urls in a Javascript array to simplify things.

The markup for the code is very simple. The film strip (id=’filmstrip’) is just a ASP Panel (or html <div>) and the images (html <img>) are children of that div. Every thumbnail image has a CssClass defined named ‘ImgThumbnail‘, and the two arrows are images have ids ‘leftArrow’ and ‘rightArrow’. Before I go into detail, here’s the first part of the JQuery.

<script type="text/javascript">
    var images = new Array();
    var currentIndex = 0;
    var stripSize;

    $(function() {
         LoadImages();
         InitializeFilmStrip();
         // set default border for thumbnail to 0px
        $('.ImgThumbnail').css({ "borderWidth": "0px" });
        // setting mouse over thumbnail effect
        $('.ImgThumbnail').hover(function() {
             $(this).css({ "borderWidth": "2px" });
         },
             function() { $(this).css({ "borderWidth": "0px" }); }
         );

         // setting click event for each thumbnail
         $('.ImgThumbnail').click(function() {
              var thumbSrc = $(this).attr("src");
             $('#viewerImg').attr({ "src": thumbSrc, "title": thumbSrc });
          });

         $('#rightArrow').click(function() { MoveImages("right"); ResetImages("right"); })
              .hover(function() { StartFlashing($(this)); }, function() { StopFlashing($(this)); });
         $('#leftArrow').click(function() { MoveImages("left"); ResetImages("left"); })
              .hover(function() { StartFlashing($(this)); }, function() { StopFlashing($(this)); });
          });
    }
</script>

Here’s a breakdown of the script:

  • Lines 7-8 : call Javascript functions to initialize the filmstrip and images.
  • Line 10: sets a default border of 0px to all DOM elements with css class of ‘ImgThumbnail
  • Lines 12 – 16: bind a mouse hover event for DOM elements with css class of ‘ImgThumbnail‘, changing the border style.
  • Lines 19 – 22: bind a click event for DOM elements with css class of ‘ImgThumbnail‘, changing the image source for DOM element with id ‘viewerImg‘.
  • Lines 24 – 28: bind a click event to the two arrows, to animate their images within. Also binds a hover event to trigger the “flashing” animation.

The following snippet is JQuery code that runs in two javascript functions to animate the images moving/fading to the left/right. The MoveImages() function triggers the animation, and the ResetImages() function loads the next set of images and resets their properties.

function MoveImages(direction) {
    var moveLength = (direction == "right" ? "+" : "-") + "=" + $('#filmStrip').width() + "px";
    $('#filmStrip').children().animate({ "left": moveLength, "opacity": "hide" }, "normal");
}

function ResetImages(directionMoved) {
    // logic to move index back when left arrow is clicked
    if (directionMoved == "left") {
        currentIndex = currentIndex - (stripSize * 2);
        if (currentIndex < 0) {
            currentIndex = images.length + currentIndex;
        }
    }

    $('#filmStrip').children().each(function() {
        currentIndex += 1;
        if (currentIndex > images.length - 1) {
            currentIndex = 0;
        }
        $(this).attr({ "src": images[currentIndex], "title": images[currentIndex] })
            .animate({ "left": "20px" })
            .animate({ "opacity": "show" });
    });
}

Last bit of code I want to show is the flashing animation for the arrows. To get that effect, I used the JQuery animate effect with a callback function pointing to the same method, so it gets called infinitely. When the mouse is away from the arrow, we call the JQuery stop effect to stop all animations.

function StopFlashing(obj) {
    $(obj).stop(true).css("opacity", "show");
}

function StartFlashing(obj) {
    $(obj).animate({ "opacity": "toggle" }, "slow", "linear", function() { StartFlashing(obj); });
}

It’s a rather simplistic example but I’ve had good fun exploring the power of JQuery. With my limited knowledge, I’m pretty happy with this example. I’m sure there’s better implementations of the same functionality, and if you do find some, please let me know. Happy Coding.

Download this sample code here.

Share this post:
Advertisements

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

%d bloggers like this: