JIA Website Design & Web Development - search engine friendly - Los Angeles South Bay

Heart

Question

Dizzy

Perfect

I follow the jQuery thumbnail with zooming image tutorial here and make this test. It's simple and fun.

jQuery is a free, powerful, open source javascript library. It simplifies the task of creating highly responsive web pages. It works across modern browsers. Abstracts away browser-specific features, allowing you to concentrate on design.

 
<script>
$(document).ready(function() {
  //move the image in pixel
  var move = -15;
  
  //zoom percentage, 1.2 =120%
  var zoom = 1.2;
 
  //On mouse over those thumbnail
  $('.zitem').hover(function() {
    
    //Set the width and height according to the zoom percentage
    width = $('.zitem').width() * zoom;
    height = $('.zitem').height() * zoom;
    
    //Move and zoom the image
    $(this).find('img').stop(false,true).animate({'width':width,
               'height':height, 'top':move, 'left':move}, {duration:200});
    
    //Display the caption
    $(this).find('div.caption').stop(false,true).fadeIn(200);
  },
  function() {
    //Reset the image
      $(this).find('img').stop(false,true).animate({
                  'width':$('.zitem').width(),'height':$('.zitem').height(),
                  'top':'0', 'left':'0'}, {duration:100});  
 
    //Hide the caption
    $(this).find('div.caption').stop(false,true).fadeOut(200);
  });
 
});
</script>

Overview of jQuery features

• Core Functionality: Implements core jQuery function as well as commonly used utilities
• Slection and Traversal: Provides functions for finding content in documents and navigation among the content of the document
• Manipulation & CSS: Provides functions for editing and changing documents content and working with CSS data such as positioning info
• Events: Simplifies working with the modern DOM events and provides common event helper functions
• Effects: Provides functions for creating basic animations and effects, such as hiding and showing elements and moving objects around
• Ajax: Provides utilities for working with Ajax, such as loading contents from pages and dealing with JSON data
• User Interface: Provides an official plug-in with commonly used interface widgets, like slider controls, progress bars, accordions, etc
• Extensibility: Enables the construction of jQuery plug-ins that enhance the functionality of the base library

For more information or learning jQuery, please visit jQuery.com or take a on-line class in Lynda.com - jQuery - Essential Training.