jQuery Plugin For Image Hover Preview With Caption Support - imagepreview

imagepreview is an easy and lightweight jQuery plugin which previews / displays your image in a tooltip-like popup when rolling over a specified element. With support of image captions.

How to use it:

1. Put both jQuery library and the jQuery imagepreview plugin's script at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="imagepreview.min.js"></script>

2. Initialize the plugin.

$('.preview').anarchytip();

3. Style the preview popup using your own CSS.

#preview {
  position: absolute;
  border: 1px solid #ccc;
  background: #333;
  padding: 5px;
  display: none;
  color: #fff
}

4. Attach the plugin to an html link:

<a class="preview" href="demo.jpg">Demo</a>

5. Attach the plugin to an image:

<a href="demo.jpg" class="preview">
  <img src="demo.jpg">
</a>

6. Define the caption text in the link's 'title' attribute as follow:

<a href="demo.jpg" class="preview" title="Image Caption">
  <img src="demo.jpg">
</a>

---

This awesome jQuery plugin is developed by anarchyta. For more Advanced Usages, please check the demo page or visit the official website.