🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Bighover is a simple-to-use jQuery image zoom/viewer plugin which displays the magnified images as you hover over the thumbnails.

image-zoom image-viewer

Documentation

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"});

You May Also Like