Animated Christmas Card using jQuery

As the holiday season is close I was looking for a way of sending a simple, yet nice animated Christmas card to friends. I wasn’t looking for one of the many popular sites offering e-card sending, instead I wanted something I could somewhat customize, put on my server and send the link to friends and family so they could view it in their browsers.

At first I was thinking of creating a simple application with fading pictures in Silverlight. However I’m intending to send it to some older relatives whom I don’t want to have to mess with installing the Silverlight plugin – they would probably skip from that point. Doing the card in Powerpoint was not an option as not all friends have software to open it. So that left me trying to find a Flash application that does something like that – without any luck. So at that point I almost gave up. And then realized that I’ve forgorren about one of the most simple cross-crowser solution: using javascript to do the job.

So I’ve created a nice greeting card using jQuery that fades in a few images like it was a slideshow and writes out a greeting message in the end. You can take a look at it working here: Christmas Card using jQuery demo, and here’s a screenshot of what it looks like:

jQuery Christmas Card - preview

I’m sharing the complete application for further re-use, you can download the package here: source code for Christmas Card using jQuery. It consists of a html page, a css file, some demo images and a javascript file. If you want to create a similar nice greeting card, you can do it the following way:

  • Download the source
  • Insert your images(s) into the /images folder
  • Edit the first few lines of index.html; look for the lines having TODO comments.
    var images = [];
    // TODO: add the URLs of your images here
    // These urls can be absolute URLS (http://....) or relative ones as well
    // It is recommended the images are resized to 600px with for faster loading
    // Be sure to whatch out for uppercase/lowercase differences!
    images.push("images/01.jpg");
    images.push("images/02.jpg");
    images.push("images/03.jpg");
     
    // TODO: specify the loading text
    var loadingText = "Loading card...";
     
    // TODO: specify the text appearing when the slideshow has ended
    // Leave it blank if the last image has some greeting text on it
    var merryChristmasText = "Merry Christmas and a Happy New Year from Gergely Orosz!";
     
    // TODO: specify the text on the replay button
    var replayText = "Replay";
     
    // Wether the application should force images to be displayed at the given width
    // For good display this option is preferred
    var forceImageWidth = true;
     
    // Width of images. If forceImageWidth is set to true images will be rendered at this width
    var imageWidth = 600;
     
    // These were the only customizations you had to do in the script
  • Copy the modified source files to a server and you’re done!
  • christmas

So if you’re looking to create your own cross-browser compatible, jQuery based festive greeting card, here you go!

Happy Holidays!

8 Responses to Animated Christmas Card using jQuery
  1. jiayou

    Cool. I hope you will send me one as well. How are you doing? Did you get my email? Do you still use your gmail? Best wishes.

  2. Vishal Modha

    Hi there, thanks for sharing your card, I’ve also created a jQuery e-card called ‘Tickle-me-santa’, it uses the sound plugin that makes him laugh:
    http://www.modasoft.co.uk/ecard.html

    Let me know what you think.

  3. Data Recovery :

    christmas time is coming again and i would be sending christmas cards to many of my friends~;.

  4. Remanufactured Ink :

    greeting cards from the hear would always be the best thing to give someone special’~,

  5. download windows home server 2011... [...]Greg Does IT » Blog Archive » Animated... buywindows7cheap.com/windows-home-server-2011-product-key-p-21.html
  6. Trackback: Kurscu
    Kurscu... [...]Greg Does IT » Blog Archive » Animated Christmas Card using jQuer... kursarsivi.wordpress.com/2011/02/06/turkiye-kurs-arsivi-sitesi/?like=1&_wpnonce=d4cb1ebe1b
  7. moshe

    Love this holiday :)