Tools Blog Learn Quizzes Smile API Log In / Sign Up
Tools Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated the website and our policies to make sure your privacy rights and security are respected.
Click here to learn more about the way our website handles your data.

Remove this message.

magnifyMe - a jQuery image magnifier plugin

Difficulty: 20 / 50 Tweet
magnifier
magnifyMe - a jQuery image magnifier plugin magnify-me-jquery-image-magnifier-plugin

"magnifyMe" is a jQuery plugin that can be used to add zoom functions to product images or any other image for that matter.

Demo and source are available here

Usage

To activate the plugin you need to follow the steps below:

  1. Make sure your HTML is composed of two divs one inside the other. Like this:
            
              <div class="magnifyMe">
                <div class="iamMagnified"></div>
              </div>
            
          
  2. Both divs should have the following CSS rules specified:
            
              .magnifyMe {
                background: url('//path to image');
                background-size: contain;
                background-repeat: no-repeat;
                width: Xpx;
                height: Xpx;
                position: relative;
                overflow: hidden;
              }
    
              .iamMagnified {
                width: Xpx;
                height: Xpx;
                position: absolute;
                background: url('//path to image');
                background-size: initial;
                background-repeat: no-repeat;
                border-radius: 100px;
                box-shadow: 0 0 10px #000;
                border: 4px solid #CCC;
                opacity:0;
              }
    
              div.magnifyMe:hover .iamMagnified {
                opacity: 1;
              };
            
          
  3. To activate the plugin call this one line of code:
            
              jQuery('.magnifyMe').magnifyMe('iamMagnified');
            
          
comments powered by Disqus