Today we’re going to beat up on certain gallery pages that use images of the format “imageName.sized.jpg”.  What I mean by this is – we’re going to take the page (which is usually filled with junk) and replace everything with just the full size image and the caption.

Let’s get some assumptions out of the way:
You know SOME Java Script, the site you’re visiting also has the non-sized images in the same directory as the sized images, and you don’t care what else is on the web page.  We’re also assuming there is only one caption with no “id” and we only have a style class to work with.

Ok?  Ok.  Let’s go.

Once you’ve installed GreaseMonkey, set it up, and got it going then you’ll want to make a new user script.  The namespace isn’t terribly important right now so just make it the URL for your website or something like that and continue on.  Once you’ve specified your edittor of choice, it will open up and you’ll basically have a blank canvas to work with.  The code you enter here will be run when the page is completed.  First thing we’re going to do is get the caption with this code:

function getCaption()
{
var all = document.all ? document.all :
document.getElementsByTagName(’p');
var theCaption;
for (var e = 0; e < all.length; e++)
{
if (all[e].className == “pcaption”)
{
theCaption = all[e];
}
}
return theCaption;
}

What we’re doing there is grabbing all of the elements of the document that are paragraphs (p tags) and then looping through until we find that “pcaption” class.  You might need to look at the gallery you’re visiting to get the exact names but that’s the basic gist of it.  Now let’s grab the image and replace the page with it and our caption:

var theImage, unSizedImage, unSizedPath;
theImage = document.getElementById(’galleryImage’);
theCaption = getCaption();

if (theImage)
{
unSizedPath = theImage.src.replace(/.sized/,”");
unSizedImage = document.createElement(’img’);
unSizedImage.src = unSizedPath;
document.body.innerHTML = “<center>” + theCaption.innerHTML + “<br /><img src=\”" + unSizedImage.src + “\” /></center>”;
}

First we just create some variables and get our caption from before.  Once we have that all setup we say if you find an image with the id of “galleryImage” then we’re gonna do some work.   We grab the src for the image, strip out the .sized portion, and then assign that source to a new blank set of image tags.  Lastly we take the body’s innerHTML and assign it our caption’s innerHTML and our newly grabbed image.

In this little exercise we learned how to totally modify the contents of a page with a new image from “somewhere else.”  We also learned how to get a set of tags using the class for instances where we don’t have an id.  We also did some very basic string replacing and innerHTML utilization and manipulation.  Pretty cool huh?

Now you can toy with it anyway you want.  There’s a lot of fun stuff in there.  For more Grease Monkey tutorials and guides you can visit http://diveintogreasemonkey.org/  Have something you’re looking to accomplish?  Well, just comment to this post with a suggestion.

Note: Wordpress is really awesome at stripping out whitespace from stuff.  Sorry about the poor code formatting as a result.  I will be looking into a better way to display this stuff so it doesn’t happen in the future.