Posts Tagged JQuery

Cool Sites : Nike Better World & Ben The Bodyguard

So much for keeping up the planned “Cool Site of the Week” section on my blog eh? I haven’t posted anything since the 10th of June 2009 no less! Well in fairness, that’s because I rarely see anything that seriously impresses me enough to do a blog article.

Over the last couple of weeks that has changed though. I have found not one, but two seriously cool websites.

Both sites use the same “scroll down” interaction, but one in particular just blew me away the first time I saw it.

Yes that was the Nike Better World website (www.nikebetterworld.com) – now I know this site certainly isn’t the best way to approach web design from a usability point of view, but you can’t but respect what the creative team at Nike have achieved with this website. Not only is the vertical scrolling a pretty neat effect, the parallax effect just blows your mind the first time you see it. Technically it needs a well thought out vision of how it should work in theory, but coming up with the idea in the first place is just amazing.

Another good site on a similar theme is the Ben the Bodyguard www.benthebodyguard.com website. This has been around longer than the Nike Better World site as far as I know and it too is pretty impressive in it’s concept and delivery.

Both sites are using nothing else in terms of plugins – which makes it hugely impressive.

Check them out now, you won’t be disappointed!

Tags: , , , , , , , , , , , ,

1 Comment

Simple image gallery & slideshow with Scriptaculous and Prototype

We’re currently working on a project using quite a lot of AJAX, which is great fun. We decided to go with the prototype and scriptaculous javascript framework for a number of reasons, but that did bring some difficulties.

One of the requirements of the project was a simple image gallery to show a number of images related to a particular record from the database. Obviously, since the site was predominantly AJAX’ed, we wanted a nice image gallery that would pup up on a mouseover from a dynamic URL that was called using AJAX.

However there were no simple “already built” javascript image galleries out there that use scriptaculous & prototype. Most of the more basic ones were developed on the MooTools framework and this caused a conflict with our other code.

So I set out to create a simple image gallery that we could use for the site.

I’m sure other people have had this problem, so I thought it would be a good idea to give it out to you all to play with yourself.

This isn’t the final version to be used as it’s been a while since I coded and I’m sure I haven’t done a very good job. But it works none the less and you can of course clean it yourself if you need to!

in terms of design I’ve also left it quite messy so that you can style it yourself. It’s very easy to template.

I don’t think I’ll bother boring you with the details of the script, I personally never read them and just download the code. Here’s the script to download – have fun!

Oh and here’s a demo example of it in action!

UPDATE:
Dave from ISOTOPE Communications has improved the script – you can get his version here:
http://www.icommunicate.co.uk/articles/all/simple_slide_show_for_prototype_scriptaculous_38/

Tags: , , , , ,

24 Comments