HomeTutorialDownload
Contact

Image One

Hover to see NuvuZoom in action.

  • magnifier: 2
  • outSpeed: 2000
  • easing: 'swing'
  • grow: 'false'

Image Two

Hover to see NuvuZoom in action.

  • magnifier: 3
  • outSpeed: 7000
  • easing: 'easeOutCirc'
  • grow: 'false'

Image Three

Hover to see NuvuZoom in action.

  • magnifier: 2
  • outSpeed: 2000
  • easing: 'swing'
  • grow: 'false'

Image Four

Hover to see NuvuZoom in action.

  • magnifier: 2
  • outSpeed: 3000
  • easing: 'easeOutBouce'
  • grow: 'true'

Image Five

Hover to see NuvuZoom in action.

  • magnifier: 3
  • outSpeed: 3000
  • easing: 'easeInOutElastic'
  • grow: 'true'

Image Six

Hover to see NuvuZoom in action.

  • magnifier: 2
  • outSpeed: 3000
  • easing: 'easeOutCirc'
  • grow: 'false'

Description:


How To Use NuvuZoom:

1. Include Scripts In Head Tag:

    <head>
   <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>   // include jquery script
   <script type="text/javascript" src="js/jquery-ui-1.8.11.min.js"></script>  // include jquery ui for easing options
   <script type="text/javascript" src="js/jquery.nuvuzoom.js"></script>    // include nuvuzoom script
    </head>

  

2. Add NuvuZoom jQuery Code:


    $(document).ready(function(){

      $('#divOne').nuvuzoom({
          magnifier : 2, //how much to zoom in
          outspeed: 3000,  //how fast to animate back to original size
          easing: 'easeInOutElastic',  //easing - can use any easing as long as you include the proper script such as jquery.ui etc
          grow: 'true',      // 'true' sets the base container to grow(animate) when hovered
          growSpeed: 300,    // sets the speed of the base container growth(animation)
          growPercent: 2.1,  // percentage of growth - the image within grows accordingly - 1 equals 100%, 2 = 200% etc.
          animate: 'true',   // animating fluid movement
          movespeed: 1000   //the animating movespeed in milleseconds
     });
  });


  

3. Add HTML to Body Tag:

   <body>

   <div id="divOne">   //container that nuvuzoom targets
   <img src="images/imageOne.png" />  //the image that is to be magnified
   </div>


   </body>