A modified version of this trick to get badges to run after the page loads. A bit hacky, but it works wonders.

We need to specify a place for the code to be injected. This div is what twitpic’s java looks for, and will be where your badge is written.

<div id="twitpic_badge_container_v1" style="border: 1px solid rgb(255, 255, 255); padding: 15px; background-color: rgb(255, 255, 255);"></div>

Now at the footer of your page, we put in this script to stop twitpic from writing wherever it is placed.

<script language="javascript"><!--
var old_document_write = document.write;
var twitpic_badge_data = "";
document.write = function(s) {
twitpic_badge_data += s;
}
// --></script>

After, put in your whatever code is given to you by the twitpic badge generator. In our case it looks like this:

<script type="text/javascript" src="http://twitpic.com/badge/v1.jsx?username=uncharteddesign&count=1&size=thumb&colorbg=FFFFFF&colorborder=FFFFFF&colorfont=000000&colorlink=0071BC"></script>

Follow with the end script to make document.write function as normal.

<script language="javascript"><!--
document.write = old_document_write;
// --></script>

You should be able to grab and go from that. If you would like more explanation, just let me know.

The gallery on our old site used a JavaScript/Css method that I think is worth sharing. You can use this on your site by just modifying the HTML and images.

Live Demo or download

The end result came from combining two ideas, a smooth scrolling div and a script that injects the large container with information from the thumbnail that you click. The script I used for the basic gallery is “Javascript image gallery using mootools” by Devin R, available here

The other part is the scrolling based on mouse movement. I modified a script from Antonio Lupetti, “Using CSS and Mootools to simulate Flash horizontal navigation effect,” the original is here.

The challenges here involved integrating the structures of HTML, CSS and JavaScript that the two methods used, and making the site accessible for users with no JavaScript and for those on cellphone browsers.  Tested working in FF 2/3, IE 6/7, BlackBerry Mobile, Opera Mini.

I’ve made a simple demo for you to take a look at or download.

Let me know if you have any questions and I’ll do my best to answer them.