Some nerdy stuff

Shampoo: a PHP photo gallery

Shampoo is a simple photo gallery script that doesn't require a database. I occasionally devote some time to it. Why the name? I don't know.

You can add captions and album descriptions using a very simple text file.

» Download (40kB) Contents of the archive

Requirements

It will only work on PHP5 and a server that understands .htaccess files (like Apache). In order for thumbnail creation to work, your server will also need to have GD installed (any host worth its salt will).

Instructions

1. Extract the archive (shampoo.zip) into a directory on your server.
2. Make new albums by making new directories under the one where you extracted everything.
3. If you want captions for the pictures, open up index.txt and follow the instructions there.
4. That's pretty much it. To see it, simply point your browser to the directory (index.php is the thing to run). For example, if you've put the gallery in the root of your domain, just go to http://www.mydomain.com/shampoo/ (or whatever you called the directory).

License

Thickbox mod

This is a modification of Cody Lindley's Thickbox. It is used by the PHP photo gallery above.

Changes made:

• Doesn't need jQuery, so it's a standalone script.
• Slideshow function added
• Maximising/minimising images larger than the viewport (by clicking the image). It maximises them "intelligently" to make sure the user doesn't have to move about too much and the viewport's real estate is taken full advantage of
• Preloading of next/prev images after main image has loaded
• More use of CSS, like position:fixed
• More standards compliant and semantic XHTML and CSS
• Uses DOM methods instead of innerHTML (plays nicely with real XHTML)
• Reuses elements instead of recreating them each time.
• More keyboard shortcuts: Prev: P and <; Next: N and >; Close: Esc, X and C; Start/Stop slideshow: S.
• General restructuring/cleanup of code

Inline HTML can still be embedded instead of images, but I've removed the Ajax functionality. And if you want the fancy transitions you'll have to add them yourself.

The necessary bits:

• thickbox.js
• thickbox.css
• loading.gif (path to this image is on line 23 in thickbox.js)

There are some notes at the top of thickbox.js

Usage

Simply add the class thickbox to links that point to images. By adding a rel attribute, you can group them together, so you also get "prev" and "next" links, as well as a "Start/stop" link to automate moving forward. The title attribute provides captions.

To embed HTML, use a link like this (points to hidden div with id "badgers"):

<a href="badgers.html#TB_inline?height=440&width=750&id=zomg&caption=true" class="thickbox">My favourite badgers</a>

It requires the #TB_inline bit, the question mark and the id of the element containing the HTML to be embedded. The height (default: 400) and width (default: 600) are optional and caption has to be true to force a caption (from the title attribute, like with links to images) to appear. Adding a rel attribute means you can also chain several of these together, and with images too.

It has been tested on Firefox 1, 1.5 and 2, Safari 3/Win, Opera 8 and 9, IE6 and 7.

Badgers live in setts. They're furry, black and white (but not chocolate) and some people fear their tuberculosis carrying prowess.

Here be a fine specimen, looking rather delightful, don't you think?

A few Greasemonkey scripts

Gmail Full Width

Makes conversations occupy full width by removing advertisement block on the right. The four links above the ads are kept and placed conveniently next to the conversation title.

Gmail Select Conversations

Adds two items to the "Select:" bar above messages in the Inbox to select multi-reply conversations or messages with "Re:" in the subject line.

deviantART first post cleanup

For the deviantART forums. Makes the first post in a thread have full width and a normal height, and removes the advertisement box.

Photobucket Tree View and General Cleanup

Does the following:

1. Removes advertisements
2. Creates a tree of your albums (top image), displayed next to the upload form on every album. The tree updates itself automatically when albums are added/deleted
3. Changes the "Move selected" button under thumbnails into a dropdown so you can move the selected files with a single click (bottom image)
4. The "move" link now doesn't go anywhere and instead shows a similar dropdown to #3 to move the file instantly
5. Clicking the IMG Code or URL Code text now copies them to the clipboard as it should (this is broken if you have "Allow scripts to change status bar text" disabled in Firefox, which is the default).

Photobucket can be very slow and is in general quite badly coded - there is a huge amount of redundant code all over the shop. The unfortunate result of this is that the script can take a while to be applied and so the ads are visible while the page is loading.

The best way around this is to add the following to userContent.css:

    @-moz-document domain("photobucket.com") {
      #advPanelContainer,
      #containerAlbumPromo,
      #cellAd {display:none}
      #panel_image {width:428px}
    }
    

userscripts.org Favourites

Allows you to put your favourite user scripts into a dropdown menu integrated with the site.

An "add/remove from favourites" link appears under "View script source" on the right.

It also shows the number of comments and installs and when it was last updated. This information updates itself automatically every 30 minutes.