jQuery
【jQuery】jQuery用の軽量のライトボックスプラグインClarity Lightbox
March 25, 2018

Clarity LightboxはjQuery用の軽量のライトボックスプラグイン。
インクルードします。
<link rel="stylesheet" href="dist/css/clarify-lightbox.min.css> <!--jQuery--> <script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script> <script src="dist/js/clarify-lightbox.min.js>
CDNを使用
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/clarity-lightbox@0.0.1/dist/clarify-lightbox.min.css"> <!--jQuery--> <script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/clarity-lightbox@0.0.1/dist/clarify-lightbox.min.js"></script>
HTMLにプラグインを使用
<div class="wrapper"> <!-- Your website's content --> </div>
ライトボックスを作成するイメージを次のように配置します。
<a class="lightbox" href="img/img1.jpg"> <img class="img-lightbox" src="img/img1.jpg"> </a>