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

Post a Comment

Popular posts from this blog

My Software Job Transition Strategies?

I’ve been spending a good deal of the last two days preparing mentally for starting a whole new challenge as a developer. New things aren’t new to me, but this is different and big enough really call for some Deep Thoughts ™. For one thing, I’ve made a big move from the world of Python web development to totally other Python work and while web development has never been the only thing I do, it has been the only work that paid the bills. That transition isn’t one that bothers me or daunts me, though. Instead, I’m thinking about transitioning to the scope of the work I’m getting into. For a long time, I juggled multiple clients and client projects every day, so no single project usually took up most of my time. Every developer juggles time through the day, but exactly how that works in each company and on each project varies a lot. I was looking for a place that I could really focus in a way that I haven’t for a long time. I think I found that, but now I have to deal with the consequen...
Post a Comment
Read more

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 operat...
1 comment
Read more

The Snake Pit is About to Burst

The signs are all over the place. I can count at least five implementations of Python today: CPython, CL-Python, Jython, IronPython, and PyPy. The use of the language is sky rocketting and set to grab real mind-share as the hype over Ruby subsides. Things are looking good for a favorite green snake and british comedy troop reference, aren't they? Trouble is on the horizon in the very ingredients that could push us into true success. Our community and our very language is in danger of segregation, unless we all do something about it and learn to get along. One of the most visible dangers (to me) is being ignored for various political, cultural, and non-technical reasons. IronPython's users are increasingly pushing IronPython-only recipes, libraries, and tutorials. No one is talking about the transition of the alternative implemenations to CPython 3.0 compatability. To make matters worse, we still can not define the language without refering to an implementation. This is very un...
11 comments
Read more