Skip to content

This plugin for jquery allows to have a big version of the image actually hovered by the mouse. Simple but effective :)

License

Notifications You must be signed in to change notification settings

philippeauriach/jquery.bighover

Repository files navigation

jquery bighover plugin

jQuery plugin for showing a bigger view of the hovered image. The image will be displayed beside the cursor. For now, the image is displayed to the bottom right of the cursor, but doesn't get out of the screen. The plugin is configurable with two options : width and height of the big size image.

Implemented functionalities

  • possibility of specifying height and width of the zoomed image
  • zoomed image showed on the bottom-right side of the cursor
  • option to choose where the zoomed image is displayed (left, top, right, bottom of the cursor)
  • create the doc, with example

TO-DO

  • automate zoomed image size
  • prevent image for going offscreen

How to use it

In order to make an image “bighoverable”, just add the source of the plugin, link it in your page's header, and then add this little line of code:

$('#myImageID').bighover();

If you want to specify more options, just do like the following (for now you can only pass width and height values, default to 300):

$('#myImageID').bighover({"width":"200", "height":"200"});

You can also specify the position, possible values are: top, top-left, left, bottom-left, bottom, bottom-right, right, right-top. Default to bottom-right. Example:

$('#myImageID').bighover({"position":"top"});

About

This plugin for jquery allows to have a big version of the image actually hovered by the mouse. Simple but effective :)

Resources

License

Stars

Watchers

Forks

Packages

No packages published