jIM: jQuery Image Magnifier

jIM: jQuery Image Magnifier

Released 5 years ago , Last update 5 years ago

Image magnification / zoom component with a bunch of possible configurations.

Introduction

jIM: jQuery Image Magnifier is an image zooming/magnifying plugin for jQuery. You can show small details of your image without displaying a whole large picture.

Features

  • Crossbrowser support (all major browsers)
  • Works on inline and block level elements
  • Works on all position and floating setup
  • Capable to use separate large/small images
  • 5 different positions (inside/outside of your image)
  • Stop-on-Edges feature

Usage

To use jIM: jQuery Image Magnifier you have to insert the following files into your HTML code. First of all, use jQuery, for example from this url: http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

Then insert the JavaScript code of the Magnifier: PATH-TO-JIM/src/jQuery.Image.Magnifier.min.js

And insert the CSS of the Magnifier: PATH-TO-JIM/css/jQuery.Image.Magnifier.css

Options:

  • width: Integer, default: 180
  • height: Integer, default: 180
  • orientation: Integer (0: magnifier is inside your image, 1: magnifier is over your image, 2: magnifier is on the left of your image, 3: magnifier is below your image, 4: magnifier is on the right of your image), default: 0
  • padding: Integer, default: 5
  • animate: boolean, default: false
  • rounded: boolean, default: false
  • shadow: boolean, default: true
  • border: boolean, default: true
  • stopOnEdges: boolean, default: false

Use separate large/small images:

Examples

Circle magnifier inside your image with shadow and border. When mouse enters image, the magnifier appears smoothly with a fade-in effect.

  $(function(){

    $('#jim-sample-1').jim({
      'rounded': true,
      'animate': true
    });

  });

When mouse enters, your image will be exactly covered by the zoomed picture, that can be moved by moving the mouse.

  $(function(){

    $('#jim-sample-2').jim({
      'orientation': 0,
      'width'  : 640,
      'height' : 360,
      'stopOnEdges': true,
      'border' : false,
      'shadow' : false
    });

  });

You have 3 images. Zoomed picture appears on the right of each images.

  $(function(){

    $('.jim-sample').jim({
      'orientation': 2,
      'height' : 360,
      'stopOnEdges': true
    });

  });

Pricing

14 day 14-day money-back guarantee

$2.99

Developer License

  • Perpetual license

  • 5 projects

  • Can distribute code and binary products

  • Commercial use

  • 6 months support

1 license From » $2.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.


Or enter your name and Email
  • L Luca 4 years ago
    Hi, this plugin seems perfect to me. Is it possible to define a rectangular magnifier? I haven't seen in the img tag the href to a larger image. Thank you