【jQuery】Bootstrap Tooltipのように画像を表示。Airview

2

AirviewはBootstrapのTooltipのように単一画像を表示できるプラグイン。
オプションもあり、使いやすそうな気がします。
ライセンスはMITです。

JS

jQuery本体とtooltip.min.jsとbootstrap-airview.min.jsを読み込みます。

<script src="./js/vendor/jquery.min.js"></script>
<script src="./js/vendor/tooltip.min.js"></script>
<script src="./js/bootstrap-airview.min.js"></script>

オプション

$("img").airview(options);

メソッド

$('#element').airview('show')
$('#element').airview('hide')
$('#element').airview('toggle')
$('#element').airview('destroy')

Example

<body>
<img src="img/thumbnail/1.jpg" data-content="1.jpg" width="80">
<img src="img/thumbnail/2.jpg" data-content="2.jpg" width="80">
<img src="img/thumbnail/3.jpg" data-content="3.jpg" width="80">
<script src="./js/vendor/jquery.min.js"></script>
<script src="./js/vendor/tooltip.min.js"></script>
<script src="./js/bootstrap-airview.min.js"></script>
<script>
$('img').airview({
url: './img/',
width: 200,
container: 'body',
error: 'Sorry! No Image found'
});
</script>
</body>
 

【jQuery】Bootstrap Tooltipのように画像を表示。Airview

  • LATEST
  • RELATED
  • POPULAR