jQuery Parallax 0.2 – Minor updates

So I’ve updated the parallax script a little. It’s called in a more jQuery like manner now and has a couple of useful options for inverting the movement and changing the unit of measurement to any jQuery/CSS supported unit.

Example code:

$('div.parallax').parallax({
  'elements': [
    {
      'selector': 'body',
      'properties': {
        'x': {
          'background-position-x': {
            'initial': 0,
            'multiplier': 0.1,
            'invert': true
          }
        }
      }
    },
    {
      'selector': 'div.outer',
      'properties': {
        'x': {
          'background-position-x': {
            'initial': 50,
            'multiplier': 0.02,
            'unit': '%'
          }
        }
      }
    },
    {
      'selector': 'div.inner',
      'properties': {
        'x': {
          'background-position-x': {
            'initial': 0,
            'multiplier': 0.3
          }
        }
      }
    }
  ]
});

You can see a demo of the updated script, or just download the package (includes jQuery 1.3.2).

Edit: I’ve added a post with a couple of working examples here.

Trackr 0.1 – jQuery based user interaction tracking (PHP/MySQL)

Trackr is a very simple, lightweight (well, if you’re already using jQuery) user interaction tracker. It’s not particularly robust and is only in a fairly simple form right now.

The back end is written in PHP using MySQL for storage, but could easily be implemented in other languages.

To log data, you simply add a call to Trackr.init() to the page load event, passing the desired options as the only parameter to the function.

There are a variety of options that can be specified and for more information please see the test page.

You can get it here (includes jQuery 1.3.2).

Parallax 0.1 – Simple parallax effect for jQuery

I’ve seen some very cool parallax effect around lately, especially liking the Silverback site. But none of them are particularly interactive, so I thought I’d make a small implementation of the Parallax effect that interacts with the mouse.

Very early stages (and I haven’t tested it on IE yet… but you could just you conditional comments to exclude ‘those’ people anyway…) but it seems to be working ok. The options aren’t really simple, but they should be fairly self-explanatory…

Check out the demo (it is a very poor demo, please don’t look at the images, imagine it with a lovely hand drawn vector!) and get it here (minified).

Update: Created a quick demo of the silverback homepage with interactive parallax.

Update 2: Tested on IE8, seems to work fine!

Update 3: I have modified the script slightly, you can view the post here.

jQuery – Automatic Image Captions

Lots of RTEs allow you to add images and float them, but not many allow for simple captions to be wrapped around the images…

This script in conjunction with jQuery allows just that… Very simple and fairly unobtrusive.

If you wanted to add captions to all images (from their longdesc, title or alt attributes) within <div class=”content”/> you could do:

$('div.content').addCaptions();

Which produces something like this:

jQuery Add Captions - Screenshot (Like this!)
jQuery Add Captions - Screenshot (Like this!)

No styling is carried out by the script itself, so you’ll have to add in some extra classes, but in the zip file should be everything you need to get started (including jQuery 1.3.2 minified).

Download

Edit: Added to the work blog too.

Update: I have updated the script, see this post.