Random Rotating Header Images
Thanks to Vincent Liu and Ryan Michney I was able to incorporate random rotating header images for my blog.
A number of the old St Vincent’s Hospital photographs have been retouched, taking many hours. In total there are nine 900 by 250 pixel images named banner_0 to banner_8, and if anyone would like to add to my collection, I’d be pleased as punch to include them in my header.
Through trial and error it was accomplished by combining the first part of Ryan’s code, without the image padding, in order to make the header image clickable back to my homepage, and Vincent’s JavaScript code that’s marked in red with the addition of !important after block in the first style code. The code was then placed in my blogger template according to Vincent’s instructions.
Those that have not enabled JavaScript will just see my original header image – the one with the Sydney Harbour Bridge and the white Cockatoo in it! A copy of that is included in my random rotating header images.
Note: In the last 12 months 8.37% of my visitors don’t have Java enabled so I thought it best to go with this method instead of using a transparent gif in my header element as outlined in option two below.
My test blog reveals the code works in all popular browsers, although if you refresh the page (F5) or click on a post title in quick succession the header image repeats itself, with the same occurring with other techniques I tried and seen. Overall I’m delighted and all congratulations must go to Vincent and Ryan, so well done boys and many thanks from me!
For other ideas, Tom Debski (aka Spavel), Top Contributor and Official Blog*Star from the Blogger help forum has option one and option two that are well worth looking at.
Any feedback is welcomed and if anyone out there can improve on what I have implemented please let me know. Now, if you try this, remember to back up your blogger template beforehand.
Now what have I been up to other than pulling my hair out getting my random rotating header images to work?
A number of the old St Vincent’s Hospital photographs have been retouched, taking many hours. In total there are nine 900 by 250 pixel images named banner_0 to banner_8, and if anyone would like to add to my collection, I’d be pleased as punch to include them in my header.
Through trial and error it was accomplished by combining the first part of Ryan’s code, without the image padding, in order to make the header image clickable back to my homepage, and Vincent’s JavaScript code that’s marked in red with the addition of !important after block in the first style code. The code was then placed in my blogger template according to Vincent’s instructions.
Those that have not enabled JavaScript will just see my original header image – the one with the Sydney Harbour Bridge and the white Cockatoo in it! A copy of that is included in my random rotating header images.
Note: In the last 12 months 8.37% of my visitors don’t have Java enabled so I thought it best to go with this method instead of using a transparent gif in my header element as outlined in option two below.
My test blog reveals the code works in all popular browsers, although if you refresh the page (F5) or click on a post title in quick succession the header image repeats itself, with the same occurring with other techniques I tried and seen. Overall I’m delighted and all congratulations must go to Vincent and Ryan, so well done boys and many thanks from me!
For other ideas, Tom Debski (aka Spavel), Top Contributor and Official Blog*Star from the Blogger help forum has option one and option two that are well worth looking at.
Any feedback is welcomed and if anyone out there can improve on what I have implemented please let me know. Now, if you try this, remember to back up your blogger template beforehand.
Now what have I been up to other than pulling my hair out getting my random rotating header images to work?
Let me count the ways:
1. We’ve completed 99.9% of the home renovations.
2. Getting over my upper right leg stress fracture & damaged lower femur.
3. I’ve just started on the garden makeover in preparation for my sons wedding.
4. I’ve spent quality time with my grandchild & my son’s soon to be in-laws.
5. I’ve contemplated never visiting a hardware and paint shop ever again.
1. We’ve completed 99.9% of the home renovations.
2. Getting over my upper right leg stress fracture & damaged lower femur.
3. I’ve just started on the garden makeover in preparation for my sons wedding.
4. I’ve spent quality time with my grandchild & my son’s soon to be in-laws.
5. I’ve contemplated never visiting a hardware and paint shop ever again.
| You might also like: | |||||
| 
| 
| |||
|
|
| |||
14 comments - care to make one?:
Hey Peter :D!
First of all: nice job with the header! Loved it!
Second: you injured your leg? I am so sorry about that and I wish you well :).
Third: the wedding will be at your house? My, my, my...a lot of work is still on the way, eh? It's harder to organise weddings at home, trust me.
I was wondering about you, but now that you have given us an update, I am more relaxed :D.
Have a fantastic rest of the week, and keep having fun!!!
Cheers
I like the rotating header, especially fond of old pictures. Did you post about your leg? Glad to hear you're on the mend. Once you get done with the garden wedding you need to get busy on a playhouse, swings, slides and climbing equipment for all those future grandchildren ;) so don't write off the hardware store yet!
Nice touch Peter!
~JD
Love the rotating header images, those are some fab old photos!
Sorry to hear about your leg injury, don't tell me you were up a ladder painting...?
Good luck with the forthcoming wedding, it sounds like a hectic but blessed time for you all :)
Hi Max and thank you. You know, I think this thing with the random rotating header images is a boys with toys things!
Still, as I get older the more I remember the distant past with the old photos of St Vincent's and my class, reminding of what it was like to be young.
The leg is on the mend but I'm really feeling my age right now.
The wedding will be held not far from here and the garden makeover is to help with any pre-wedding photos etc. Hoping you have a fab weekend!
Take Care,
Peter
Hi Moonshadow and thank you! Did I post about my leg? No, not until now. Yes, I'm just a big sook but I'll get over it.
We have a cubby house up the back, which is about 2 metres off the ground, more like a fort than anything, but mostly I use it!
Take Care,
Peter
Hi JD and welcome back, great to see you here once again. Your blog is coming along very well, I must say, looks great too! Boy! How I could use you now with the wedding coming up. Feel like popping Down Under for a few days? LOL
Take Care,
Peter
Hi Jayne and thank you! Yes, it's amazing the number of old photos of St Vincent's I've found without restrictions. Now, if you ever want to retouch some photos, check out Paint.net, free software for doing just that.
As for my leg, the injury was caused by doing the beep test/shuttle run.
Yes, we seem to have everything under control in regards to the wedding. Touch Wood!
Take Care,
Peter
Hmm nice header. Not rotating in Firefox though and you have an award.
Hi Rose! Rotates for me in FireFox, do you have javascript enabled?
Take Care,
Peter
I am not done with reading but decided to leave my comment now ;)
that work on your header is awesome!! Nope, I will not do the same thing for my blog now ;=), my time--childre,housework, etc...--would not permit me, not yet, though..
anyway, for now I have to continue reading your post...
your prodigal fan and reader,
Mayet
Peter well done, so you are writer, poet, programmer, web developer and nurse by trade. Wow you just very talented person.
Hope all is well otherwise.
Anna :)
Peter its me again, lol. I just viewed all the images. They are really nice, were you there during the time of horses and buggies?
Did you do the retouching, amazing job? I did photo restoration before, and it is very tedious, time consuming, enjoyable, then painful sometimes job. Well done again. Anna :)
Hi Mayet and Anna! Thanks for visiting and sorry for the late reply. Our son's wedding was last Saturday and we are still recovering. Everything went well and the happy couple are over the moon!
Take Care,
Peter
Post a Comment