Javascript

【Javascript】フル機能のJavaScriptライトボックスギャラリーlightgallery

August 5, 2016
lightgallery

lightgalleryはフル機能のJavaScriptライトボックスギャラリー。レスポンシブで動画なども扱えます。

CSS and JavaScript

<head>
    <link rel="stylesheet" href="css/lightgallery.css">
</head>
<body>
    ...

    <script src="js/lightgallery.min.js"></script>

    <!-- lightgallery plugins -->
    <script src="js/lg-thumbnail.min.js"></script>
    <script src="js/lg-fullscreen.min.js"></script>
</body>
require(['./lightgallery'], function() {
    require(["./lg-zoom", "./lg-thumbnail"], function(){
        lightGallery(document.getElementById('lightgallery'));
    });
});

Markup

<div id="lightgallery">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg">
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg">
    </a>
    ...
</div>

呼び出し

<script>
    lightGallery(document.getElementById('lightgallery'));
</script>