Time for action – scaling an element

It's common practice on an image-heavy site to show a set of thumbnail images which link to a full-sized image which is displayed when the image is clicked, either inline in a modal pop up, or in a separate window. In this example we'll create a thumbnail image that scales to a full-sized version when clicked.

  1. Add the following few elements to the <body> of the template file:
    <div id="container">
  <img src="img/mantis.jpg">
</div>
  2. The script we need is a little longer, but is still pretty simple. In the empty function at the end of the page add the following code:
    $("img").click(function() { var img = $(this); if(!img.hasClass("full")) { img.addClass("full").effect("scale", { percent: 400 }, function() { $("<a>", ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial