Learning jQuery

Images are pretty important element of any website. They catches user's attention. But it will be more attractive and nice feature, if images can be presented with different effects and a magnifying glass to view the images. So in this post, I will walk through you a jQuery plugin which allows to provide a Loupe on the images.

The jQuery Loupe is a jQuery plugin which gives you the ability to add zoom on hover ability for your photos with single line of code. With Loupe you have the ability to control the zoom level and loupe size via mouse scroll which gives you the opportunity to enlarge areas that you might be interested in.

How to use it?

• First you need to include the jQuery library, since Loupe is a plugin.
• Secondly, you need to include the jQuery Loupe javascript and the css file into your page.
• Next, you implement the actual image(s) that will be magnified/zoomed by the Loupe. The structure is as simple as it can get.

  <a href="#"><img alt="Your image caption" src="your-image.jpg" id="loupe1" /></a>
  

• As the last step, you trigger the Loupe function on the element you just created. In this case, we trigger the function on the image with the id loupe1.

  $(document).ready(function(){
     $('#loupe1').ClassyLoupe({
        'max_size' : 600,
        'loupe_toggle_time' : 'fast'
     });
  });
  

See result below.

Options

This plugin also has some options to control the shape of the loupe, shadow effects etc.

• shape - the shape of the Loupe. Options can be: circle/rounded/square
• glossy - if the Loupe is glossy or not. Options: true/false
• drop_shadow - if the Loupe will have a drop-shadow effect. Options: true/false

Feel free to contact me for any help related to jQuery, I will gladly help you.