There may be an easier way to do this - but given the following html:

<div class="rotate">
  <div><img /></div>
  <div><img /></div>
  <div><img /></div>
</div>

You can use the following code snippet to rotate through the images using jquery. You’ll need to set the rotate to be relatively positioned, and absolutely position the divs inside the .rotate div.

$(’div.rotate div’).hide().eq(1).show();
function rotate(){
var i = $(’div.rotate div:visible’).prevAll(’div’).length + 1;
i = i % $(’div.rotate div’).length;
$(’div.rotate div’).fadeOut().eq(i).fadeIn();
setTimeout(’rotate()’, 1000);
};
rotate();

Enjoy! Up with code snippets and down with unnecessary plugins!

I’ve been feeling inspired by Casey’s writing over at Starting Companies, so I thought I’d add a few notes of my own.

The Great Buy Now Button

We’ve been redesigning some elements of the Indigo Renderer site to push more customers to the sales page. One of the biggies has been to make a prominent and attractive ‘Buy Now’ button. A bit of playing around in photoshop (even if you’re not a graphic designer, if you’re doing work on your website it’s a good skill to know your way around photoshop layers and layer effects) and I came up with this Buy Now button.

Thanks to Lance Wiggs, (our friendly business advisor / mentor), we wanted a shiny “push me” look. I used a bit of css trickery to make the button roll over highlight, then I washed out the rest of the menu bar so that the buy now button screamed “Press Me and send money to the Indigoeans!”.

That was all well and good, but the biggest problem with our Buy Now button - is that it linked to this page:

A wall of text that didn’t really do much to sell the product. Nice shiny button, big wall of text. Doesn’t do the trick. So just now I’ve been working on taking our existing Indigo Renderer store and sexing it up a little. The current store looks like so:

The main things I want to achieve:

1. Make the store look like the Indigo site, so that the users trust isn’t broken
   (Click buy now - go to a different looking page - “Hey what the hell is this?”)
2. Make the store sexier and encourage more impulsive “buy now” decisions
3. Get more cohesiveness across the website and applications we use, so that we can reuse the same CSS, typography and design elements in everything we do.

Thus, I give a preview of the new and slightly improved “Buy Indigo Renderer” page: