Jquery animation 2 - zooming

Richmond, Virginia 1864

Another demonstration of jquery-powered animation. This one is zooming. In our first example, panning, the jquery animate method only changed one property of our image. In this one we will see how to change the values of several properties at once.

For this demo I am using an 1862 photo (fron the Library of Congress) of a view of Richmond, Virginia.

In this demo I am using the same 360 x 240 viewport and controls as the panning demo, just changing the name and id of the "pan" control to "zoom". The viewport is the "screen" where the animation will be shown. The overflow is set to "hidden" so only the part of the photo inside the viewport is shown.

With CSS, the photo is sized to 400 px wide. Its actual width is about 1400 px so that allows plenty of resolution for zooming in. The zoom is accomplished by increasing the width of the photo.

I want to zoom in on a window in the second row of houses in the photo, so I will need to change the positioning as well as the width. By default the image enlarges down and to the right, or in other words, it enlarges away from the top-left corner. So I will change the top and the left properties of the image during the zoom.

    width: 360px;
    height: 240px;
    margin: 10px;
    border: 2px solid #555;
    background-color: #ccc;
    overflow: hidden;

  div.control {
    width: 80px;
    padding: 5px;
    margin: 10px; 
    float: left;
    background-color: #ddd;
    border: 2px solid #888;
    text-align: center;
    font-weight: bold;
    color: #888;
    cursor: pointer;

In the HTML section of the code, I place the photo and two controls, one to start the zoom, one to reset.

<div id="viewport">
    <img src="richomnd.jpg" alt="Richmond, Virginia 1864" />
<div class="control" id="pan">Zoom</div>
<div class="control" id="reset">Reset</div>

Now, to zoom in , we enlarge the image and change its top and left properies. The div "zoom" is the target of the click that starts the zoom. The div "reset" simply sets the properties of the image back to what they started at.

Here's the jquery code:

  $('div#zoom').click(function() {
    $('#viewport img').animate({'width': '3000px', 'top': '-1000',
       'left': '-450px'}, 12000);

  $('div#reset').click(function() {
    $('#viewport img').css({'width': '400px', 'top': '0', 'left': '0'});

Note that both the animate method and the ccs method are only changing the properties of the image. The only difference is that the animate method does it gradually - over the span of 12 seconds or 12,000 milliseconds.