Camp Ho Non Wah
So, after battling for control over the Camp Ho Non Wah website, Greg has finally consented to a redesign by yours truly, along with the ability for ME to update it whenever I want!
I’m taking what used to look like this:
…and bringing it in to the days of Web 2.0.
I have a pretty good design in mind right now, and after about 30 hours, it’s finally coming together. I wanted to do something a little different by having rotating header images, but not the complete header; only a fraction. There are a handful of scripts out there that rotate images, but many of them are written in JavaScript, and suffer from an important limitation: in order to add or remove items from the pool of images to pick from, you need to get in there and edit the code yourself. Every time you want to make a change. In every page that rotates images. I wanted something simple, and changing the page only slightly and in subtle ways can work miracles for an otherwise ‘static’ website. For example, imagine a masthead-graphic that’s different each time someone reloads the page. How about a product image-link that seems to magically change with every pageview?
In looking around a bit, I found a solution that references the bg-image in the css to a URL that points to a PHP script, in turn selecting a random image from the folder in which the script is contained. It’s actually a pretty ingenious solution.
- Download the PHP script rotator.txt here. After downloading, rename the file to rotator.php.
- Put the images to be rotated in the same directory as rotator.php.
- Upload all the files via FTP.
- Insert this code in the CSS for the DIV which contains the image you would like to switch.
background: url(images/rotator.php) no-repeat center top;
And presto! You’re image is dynamically changed every time the page is reloaded.
I’m not going to show you how I’m going to implement this code as of yet, but hopefully you should see the result (live, of course) by the end of Thanksgiving break. I’m quite excited about what you’ll say!
… seriously? What’s wrong with two lines of javascript code? You could just populate an array with source urls of images in some directory and then randomly select an element and be like
document.getElementById(‘header_img’).setAttribute(’src’, sourcesArray[Math.floor(Math.random()*sourcesArray.length)]);
or something like that?
I guess I just never liked PHP, so… that could be it.
Anyway, I really look forward to seeing the site when you finish it!
Oh, and as a side note, you may want to be careful with what images you’re rotating. Sometimes people (like myself when I’m not being very observant) associate prominent images. Then when they go back they have trouble finding, for example, some obscure page on swim checks because they start clicking links but can’t find the one with the a certain image on it.
That’s actually a pretty awful argument. I’m just playing devil’s advocate for you.
Talk to you soon!
I really like PHP, thank you very much.
The image that is being rotated will not be associated with a certain page and will have the same basic outline. Don’t worry.
Any progress over break?
It’s coming along quite nicely.
The hard part will be integrating the damn scheduling and admin sections. Greg didn’t use AJAX, so every page (including the “you’ve successfully registered” page, etc.) is in a separate file. Either I have to rewrite it my way, use the iframe method, or settle for a popup for the scheduling portion of the site. I’m not sure which method I like better, but I’ll certainly choose the one that looks the best.
So, to answer your question:
Yes; there was progress over break.