Posts Tagged ‘jQuery’

Full Frontal 2009 - Back to Brighton25
Nov

Last Friday I got up early and headed south on the train. My destination was the Duke of York Picturehouse in sunny (couldn’t be farther from the truth) Brighton. The reason for this outing was the first ever Full Frontal JavaScript conference, organised and curated by Remy Sharp (@rem).

full-frontal-conference-2009-1full-frontal-conference-2009-2full-frontal-conference-2009-3

On arrival in Brighton I was faced with a 10 minute uphill trudge in the rain. This was not an ideal start to the day but, before too long I had successfully navigated to my destination, which as had been pointed out to me a couple of days earlier “cannot be missed” due to a massive pair of stocking-clad legs sticking out of the roof. After a well needed cup of tea and two (yeah that’s right, two!) pain au chocolat I settled down into what must have been the most comfortable conference seat ever and prepared myself for the day’s talks.

Full Frontal 2009 Itinerary

A day of firsts…

Full frontal was a day of firsts… It was the first time I had been to a purely javascript conference, it was the first time I had properly understood closures (thanks to @robertnyman) and most importantly, it was the first time I had ever been to a conference where I had enjoyed every single talk. This was a brilliant suprise because in the past at conferences I have always found myself clock-watching in at least one presentation and wishing it would finish so I could go and get another free tea and danish.

The highlight of the day for me was Robert Nyman’s talk, which was a fantastic (albeit heavily Ben Affleck orientated) summary of everything you needed to know in order to be a JavaScript wizard. I also really enjoyed Jake Archibald’s talk on performing your own JavaScript performance research and how best to incorporate JavaScript libraries. The humour and enthusiasm he put into this potentially very boring topic was excellent.

Original presentation methods

Another thing that really impressed was the quality and originality of the presentation materials used, with three out of the seven talks not using powerpoint or keynote. Jake Archibald’s presentation was done entirely in flash, which despite being a little controversial for a JavaScript conference was incredibly well designed and animated. Stuart Langridge had made his own Javascript/CSS3 web-based presentation software, which he later told me would be available to download once he could sort out all the “fucking trigonometry”. Last but not least was Simon Willison’s presentation, which consisted of an original and brave navigation around 16 Mac OSX spaces arranged in a 4 x 4 grid, it was pretty hectic but it worked.

All in all the conference was a wonderful success and I really hope it happens again in 2010. The night ended with what was possibly the best burger I have ever tasted and a few beers at the OHSO Social on Brighton beach. Higher resolution versions of my photos are available on flickr along with many others in the Full Frontal Conference pool.

2 Comments | Posted in: Events

jQuery Slideshow Plugin09
Jul

This is a really simple plugin but it is code that I have found myself re-using on various projects and I therefore assume that it will be of use to others as well. The overall effect is very straight forward. A slideshow which fades cyclically between images in a gallery.

The plugin can be implemented as follows.

HTML

<div id='myID'>
<img src='path/to/image-1.jpg' />
<img src='path/to/image-2.jpg' />
<img src='path/to/image-3.jpg' />
...
<img src='path/to/image-n.jpg' />
</div>

JavaScript

$('#myDiv').slideshow();

That’s it! This results in the following effect.

12345

There are two optional parameters that can be passed to the slideshow method. The first is an integer which represents the duration of the fade effect (default 800ms). The second is also an integer and represents the amount of time each image is shown for (default 6000ms). If we wanted to have a faster fade, say 300ms and show each image for only 2 seconds we could use the following code.

JavaScript

$('#myDiv').slideshow(300,2000);

This code would achieve the following effect.

abc

 
As demonstrated by this page it is possible to animate multiple galleries on the same page. Each gallery works independently and can have a any number of images. It is also possible to specify different fade times and display times for each gallery if required.

This plugin is available for download both as a zipped folder containing a full demo (16k) or as a single javascript file. If you use the plugin on a project I would love from you. Additionally if anyone finds any bugs or would like to see any new features please let me know and I will do my best to help.

0 Comments | Posted in: jQuery