insdays

簡単で便利なポップアップ!使わなくてもとりあえず実装してしまう…。

画像や動画を簡単にポップアップ Lity.js が便利!使い方も簡単!

  • 2018.11.26
  • jQuery
今のところ最強ポップアップは「Lity.js」。
なんと行ってもとっても簡単。

まずは「Lity.js」を張る

でダウンロード。head 内に追加。
<link rel="stylesheet" href="lity.min.css">
<script src="jquery.js"></script>
<script src="lity.min.js"></script>
もしくは下記 CDN を追加
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.css' />  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.js'></script>

HTML

a タグ に data-lity=”data-lity” を付けるだけ。
<a href="https://****.com/****.png" data-lity="data-lity">画像がポップアップ</a> 
iframe(Youtube)も
<a href="//www.youtube.com/watch?v=TPJGwxOT6bE" data-lity="data-lity">iframe(Youtube)がポップアップ</a>
簡単にポップアップが実装できる。

Copyright 2018 insdays