Tools and Services Blog Learn Quizzes Smile API Log In / Sign Up
Tools and Services Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated our privacy policy to let you know that we use cookies to personalise content and ads. We also use cookies to analyse our traffic and we share information about your use of our site and application with our advertising and analytics partners. By using this website or our application you agree to our use of cookies. Learn more about the way this website uses cookies or remove this message.

magnifyMe - a jQuery image magnifier plugin

September 23, 2014 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