mybigadventures.com

So I had a few images lined up for the header and couldn't quite decide which one should make the cut. I've given each of them a run over the past few weeks and as you can see above, I've decided to give them all a go at once. I've seen a lot of these fading image galleries around on the Internet - theyre often used to display current offers on sites like ebuyer. After a quick browse around the Internet I found what I was after at css-tricks.com/examples/SimpleSlideshow/. It was nice and easy to customise for this site and thought I'd share it a bit wider for anyone looking to do the same thing. 

You basically store the images in a div and then Jquery cycles around fading the current image out and the next one in whilst keeping unused images hidden. To set up start by adding the HTML for your images. I've included a sample below, but you can add as many image divs as you want.

<div id="slideshow">
   <div>
       <img src="image1.jpg"/>
   </div>
   <div>
       <img src="image2.jpg"/>
   </div>
</div>

Then you just need a bit of CSS to style it

<style>
   #slideshow > div {
       position: absolute;
   }
</style>

Finally you just add the jquery code to add the animation. You'll need to include the JQuery library - you can include locally or from ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js. Then add the following code to the page:

$(document).ready(function() {
    $("#slideshow &gt; div:gt(0)").hide();
    setInterval(function() {
        $('#slideshow &gt; div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
     }, 10000);
});

I haven't decided if I love it yet. I think I might tweak the timing a bit more to reduce the frequency of changes. In other news it's nearly half term!

Hello one and all,

This is just a short note to mention my recent employment as an ICT teacher in Leeds. I was almost an hour late to my interview but against all the odds managed to win the school over and in September this year I shall be winging my way north to take up my new role. Only one more week of placement and a few more weeks University and I'll have made it through. Living the dream. Oh before I forget congratualtions to Mr. Welsh Thomas whom anounced his engagement this week to the lovely Chloe - well done that man.

Thats all for now, I'm not doing too well with writing anything in any detail, so I think I had better head off.

Cheerio ta ta

I eventually got the image upload working again (to a fashion) and to celebrate I've started to create some new albums - beginning with New York from Easter this year. I went with my mum as an early 60th birthday present and we had a great time. The weather stayed fine whilst we were there and we managed to get around a lot of the sights on our short break.

There's still some work to do on the image upload front as I want to enable client side resizing of images. Basically the images I take are pretty big file sizes and would take ages to upload not to mention the load on the server for loading and resizing dynamically. I know that you can resize using HTML5 and the canvas element but need to figure out how to fit into my current JQuery setup.

For now - enjoy the photos - more to follow.