Sleek Image Viewer using jQuery and Bootstrap Tooltip - Airview

Airview is a lightweight jQuery plugin which allows you to display the original images of your thumbnails via Bootstrap tooltip component.

Features:

• Simple and easy to use.
• Image loader.
• Text fallback if image not found
• Animated image tooltip via CSS fade transition.
• Lots of customization options.

Basic Usage:

1. Include jQuery library and Bootstrap tooltip.js script into your document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="tooltip.min.js"></script>

2. Include the jQuery Airview plugin's stylesheet and script after jQuery library.

<link href="css/airview.min.css" rel="stylesheet">
<script src="js/airview.min.js"></script>

3. Insert a thumbnail image into your document and use data-content to define the source of your original image.

<img src="thumbnail/1.jpg" data-content="1.jpg">

4. Call the plugin on the image and we're done.

$("img").airview({
  url: 'img/', // image folder
  width: 250, // image/tooltip width
  container:'body'
});

5. Options and defaults.

// Image tooltip postion. top / bottom / left / right / auto
placement: 'auto',

// How Airview is triggered - click / hover / focus / manual
trigger: 'hover focus',

// Sets common url to all the Airview elements / selector.
url: false,

// Default content value if data-content attribute isn't present.
content: '',

// Tooltip width
width: 'auto',

// Fallback text
error: 'Image Not Found',

// Custom template
template: '<div class="airview" role="tooltip"><div class="airview-arrow"></div><div class="airview-inner"><div class="airview-loader">' + 
	  '</div><img /></div></div>'

6. Public methods.

$('img').airview('show')
$('img').airview('hide')
$('img').airview('toggle')
$('img').airview('destroy')

7. Events available.

// when the show instance method is called.
show.bs.airview 

// when the Airview has been made visible to the user
shown.bs.airview

// when the hide instance method has been called.
hide.bs.airview

// when the Airview has finished being hidden from the user
hidden.bs.airview 

---

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