Sleek Image Viewer using jQuery and Bootstrap Tooltip - Airview

Sleek Image Viewer using jQuery and Bootstrap Tooltip - Airview
File Size: 818 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.