1. Download the zip file.
2. Unzip it.
3. Upload the "highfile" directory to the top directory of your weblog. In my case, with Blogger, this is the same directory where I have blogger.html and index.html, and it is not the root directory for my server.
4. Save one version of your graphic file with full quality (say, 1012kb) and another with lower quality but faster to load for the thumbnail which shows up first (say, 24kb).
5. Don't put the entire code into your weblog entry. Blogger objects to having things like html, head, body, there. Instead, put in something like my example: http://rasmusen.org/t/images-2007/highfile.example.txt. What it looks like as a blog entry is here.
6. Or, change your Blogger template, which as the css style file as part of its file, by inserting http://rasmusen.org/t/images-2007/highfile.example3.txt in the style section of it. Then you can leave the style parts out of each blog entry, just using a blog entry like http://rasmusen.org/t/images-2007/highfile.example2.txt.
I've also done this for Wordpress. There, the css file in step 6 is inserted in the Style Sheet. The highfile directory in step 3 is loaded up to some wordpress directory. I put up duplicates to make sure, to the top directory and to the wp-content one where the index.htm file is.
I changed the code slightly. I deleted the height parameter, because if you have both a height and a width parameter the image is fit into that thumbnail space and distorted. Some people might want that, though.
To view the post on a separate page, click: at 10/25/2007 06:44:00 PM (the permalink).