Ode is simple! (Simple means that you know how it works.)

Hi.

This is the project website for Ode (pronounced oh-dee), a personal publishing engine for the web. Ode is unique in that it is designed to be simple – not necessarily easy.

Simple means understandable (at least it does here).

  • Thu
  • |
  • 12
  • Jan
  • 2012

How to use JQuery 'Zoom' by Jack Moore

I'm not going to tell you much here that you can't learn from the project page for 'Zoom' at jacklmoore.com. But I'm going to be a little more explicit about, and my instructions will be Ode specific. (Though honestly there is really nothing Ode specific about this.) Maybe reading this will cause you to give it a try and add another tool to your toolbox.

Zoom is a lightweight JQuery script that does a super useful thing. It allows you to display a reduced sized version of a larger an image and yet allow users to zoom in to see a much larger version of the image in place. Rather than showing you the full image, it displays only the portion of the larger image that fits within the same sized box as the reduced size version. Does that make any sense? If not an example should make it perfectly clear.

Click and hold the image below to see what I am trying to describe.

Click the image and hold to zoom

Boston Burger Co menu snippet example

This lets visitors closely inspect a large image within the normal page layout. Something that wouldn't be possible otherwise. That's not to say that there aren't other approaches. You could instead link a reduced size image to a larger version, such that clicking on the small image would open the larger one outside of the context of the page. This might be a new window or, as is increasingly common, 'floating' in front or on top of the page. Just linking 2 images together doesn't require any scripting at all. A simple anchor tag with an href attribute will take care of that. And there are quite a few different tools to that allow you to enlarge images in more sophisticated ways. I like zoom in some cases because it emphasizes that the image is meaningful within the context of its place on the page.

So enough of that. How do we implement it?

Read the rest of this post