Skip to main content

jQuery Plugin: ClipExpand


This is my son standing under the Flying Speghetti Monster. This is a nice photo, but maybe I want to zoom in on just my son. Further, maybe I want to do this on the client-side, not on the server-side.

There are a number of reasons I might want to do this. The most obvious is displaying a thumbnail that expands into the full photo. Rather than load two images, we can load a single one, crop the image to get the thumbnail, and expand it into the full image when the user wants to see it.


We might start by looking into the CSS clip property, but we'd run into an immediate problem: the result is just floating in dead-space! The image will be clipped as we specify, but this only hides the clipped areas and leaves the image otherwise in-place.

A better solution is to take the original layout of the image and reposition and resize it and adjust the clip, so that the region we specify by the clip property is expanded to fit the full size of the space we gave for the image.

This means we can define a simple thumbnail CSS class, and specify a height and width, then by specifying the portion of the image that makes up the thumbnail, they'll be generated and adjusted automatically. This is what the clipexpand() plugin does.

You can see an example usage below. You can grab a copy at the github downloads page for my phototagger app, which this grew out of.




Comments

Popular posts from this blog

CARDIAC: The Cardboard Computer

I am just so excited about this. CARDIAC. The Cardboard Computer. How cool is that? This piece of history is amazing and better than that: it is extremely accessible. This fantastic design was built in 1969 by David Hagelbarger at Bell Labs to explain what computers were to those who would otherwise have no exposure to them. Miraculously, the CARDIAC (CARDboard Interactive Aid to Computation) was able to actually function as a slow and rudimentary computer.  One of the most fascinating aspects of this gem is that at the time of its publication the scope it was able to demonstrate was actually useful in explaining what a computer was. Could you imagine trying to explain computers today with anything close to the CARDIAC? It had 100 memory locations and only ten instructions. The memory held signed 3-digit numbers (-999 through 999) and instructions could be encoded such that the first digit was the instruction and the second two digits were the address of memory to operate on

Statement Functions

At a small suggestion in #python, I wrote up a simple module that allows the use of many python statements in places requiring statements. This post serves as the announcement and documentation. You can find the release here . The pattern is the statement's keyword appended with a single underscore, so the first, of course, is print_. The example writes 'some+text' to an IOString for a URL query string. This mostly follows what it seems the print function will be in py3k. print_("some", "text", outfile=query_iostring, sep="+", end="") An obvious second choice was to wrap if statements. They take a condition value, and expect a truth value or callback an an optional else value or callback. Values and callbacks are named if_true, cb_true, if_false, and cb_false. if_(raw_input("Continue?")=="Y", cb_true=play_game, cb_false=quit) Of course, often your else might be an error case, so raising an exception could be u

The Range of Content on Planet Python

I've gotten a number of requests lately to contribute only Python related material to the Planet Python feeds and to be honest these requests have both surprised and insulted me, but they've continued. I am pretty sure they've come from a very small number of people, but they have become consistent. This is probably because of my current habit of writing about NaNoWriMo every day and those who aren't interested not looking forward to having the rest of the month reading about my novel. Planet Python will be getting a feed of only relevant posts in the future, but I'm going to be honest: I am kind of upset about it. I don't care if anyone thinks it is unreasonable of me to be upset about it, because the truth is Planet Python means something to me. It was probably the first thing I did that I considered "being part of the community" when I submitted my meager RSS feed to be added some seven years ago. My blog and my name on the list of authors at Plan