Jquery animation 2 - zooming

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.

Jquery animation 1 - panning

Here is a simple demonstration of jquery-powered animation. We'll start with the simplest type of animation - panning.

This technique was the workhorse of Ken Burns' documentaries of the Civil War, and for my demo I am using an 1864 photo (fron the Library of Congress) of sailors on the deck of the gunship U.S. Mendota.

Touchscreens and Hover

One issue I haven't seen discussed much is the impact of touchscreens on how we design web pages. The most obvious issue is that for an iPad or iPhone user there is no such thing as "hover" or "mouseover" - in software-speak, touchscreens do not support mouseover.

Photo Tagging with CSS

Here's a little demonstration of photo tagging ala facebook, flickr, etc. done with just CSS. When you hover over a person in the photo, a red outline appears around the person and a grey box pops up displaying information about him.

Drupal in-page jquery demo

This page is an experiment in embedding code in a single Drupal page. Usually, in Drupal you would put jquery code in a script file in the theme folder and declare it in the theme's .info file, but using this in-page method will allow for quick-and-dirty demo pages like this one.

Simple Tabs and Ajax with Jquery


Here is a pretty basic Web page - some tabs and a content area. When the user clicks a tab, some content loads into the content area. This works in two ways - regular old-fashioned links and new-fangled ajax powered by jquery. If your site visitor has javascript disabled, the links load a new page. If javascript is enables then the ajax kicks in.

Using AdSense in Drupal

One thing many will want to do is add a block of Google AdSense ads to their Drupal sites. There are some modules available at drupal.org that will do it, but it's actually fairly simple to do without using any contributed modules.

What is Drupal?

Trying to describe Drupal is a bit like the old blind men and the elephant story. But anyway you look at it, Drupal is awesome!

Drupal is an open-source content management system. It can serve as the platform for many types of Web sites - forums, wikis, blogs, and more.

Photo detail zoomer with jQuery

Magnify screenshot

One of the frustrating things about Web images is that they are often too small. There are several ways to deal with this - lightbox, for example, which displays a larger image on top of the page.

Syndicate content