Как использовать более одной галереи начальной загрузки на одной HTML-странице - PullRequest
Новая
       59

Как использовать более одной галереи начальной загрузки на одной HTML-странице

0 голосов
/ 19 февраля 2019

Я пытаюсь использовать несколько галерей (фильтруемых галерей с категориями данных) на одной html-странице, используя модель начальной загрузки.Однако я получаю странное пространство между галереями (2-я галерея) и изображениями, как будто они находятся в одной галерее.Проблема продолжается, и места продолжают увеличиваться, поскольку я добавляю больше галерей.(Пожалуйста, свяжите css и js для галереи в верхней части HTML-кода).Заранее спасибо.

<script src="https://github.com/bhagya-angelo/-Filterable-Gallery-with-Lightbox-BS4-.js/blob/master/-Filterable-Gallery-with-Lightbox-BS4-.js"></script>
<link href="https://github.com/bhagya-angelo/-Filterable-Gallery-with-Lightbox-BS4-.css/blob/master/-Filterable-Gallery-with-Lightbox-BS4-.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Untitled</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://github.com/bhagya-angelo/-Filterable-Gallery-with-Lightbox-BS4-.css/blob/master/-Filterable-Gallery-with-Lightbox-BS4-.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
    <main></main>
    <section class="py-5">
        <div class="container">
            <h1 class="text-center">MY GALLERY 1</h1>
            <p class="text-center">You can view instructions <a href="http://imagia-mu.com/DEV/BS/filterable-gallery/" target="_blank">here</a></p>
            <div class="filtr-controls"><span class="active" data-filter="all">all </span><span data-filter="1">category 1 </span><span data-filter="2">category 2 </span><span data-filter="3">category 3 </span></div>
            <div class="row filtr-container">
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="1, 3"><a href="https://source.unsplash.com/RLLR0oRz16Y/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/RLLR0oRz16Y/600x600.jpg" data-caption="<strong>Image description</strong><br><em>Lorem ipsum</em>"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item"
                    data-category="2"><a href="https://source.unsplash.com/vUNQaTtZeOo/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/vUNQaTtZeOo/600x600.jpg"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="1, 3"><a href="https://source.unsplash.com/ZbMJ5VLrpQ4/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/ZbMJ5VLrpQ4/600x600.jpg"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="2, 3"><a href="https://source.unsplash.com/HWwF4OnXAdM/1200x900.jpg"><img class="img-fluid" src="https://source.unsplash.com/HWwF4OnXAdM/600x600.jpg"></a></div>
            </div>
        </div>
    </section>
    <section class="py-5">
        <div class="container">
            <h1 class="text-center">MY GALLERY 2</h1>
            <p class="text-center">You can view instructions <a href="http://imagia-mu.com/DEV/BS/filterable-gallery/" target="_blank">here</a></p>
            <div class="filtr-controls"><span class="active" data-filter="all">all </span><span data-filter="1">category 1 </span><span data-filter="2">category 2 </span><span data-filter="3">category 3 </span></div>
            <div class="row filtr-container">
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="1, 3"><a href="https://source.unsplash.com/RLLR0oRz16Y/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/RLLR0oRz16Y/600x600.jpg" data-caption="<strong>Image description</strong><br><em>Lorem ipsum</em>"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item"
                    data-category="2"><a href="https://source.unsplash.com/vUNQaTtZeOo/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/vUNQaTtZeOo/600x600.jpg"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="1, 3"><a href="https://source.unsplash.com/ZbMJ5VLrpQ4/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/ZbMJ5VLrpQ4/600x600.jpg"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="2, 3"><a href="https://source.unsplash.com/HWwF4OnXAdM/1200x900.jpg"><img class="img-fluid" src="https://source.unsplash.com/HWwF4OnXAdM/600x600.jpg"></a></div>
            </div>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://github.com/bhagya-angelo/-Filterable-Gallery-with-Lightbox-BS4-.js"></script>
</body>

</html>

Я пробовал использовать разные идентификаторы, разные категории данных, разные изображения, но ничего не помогает. enter image description here
enter image description here enter image description here

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Untitled</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="/-Filterable-Gallery-with-Lightbox-BS4-.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
    <main></main>
    <section class="py-5">
        <div class="container">
            <h1 class="text-center">MY GALLERY 1</h1>
            <p class="text-center">You can view instructions <a href="http://imagia-mu.com/DEV/BS/filterable-gallery/" target="_blank">here</a></p>
            <div class="filtr-controls"><span class="active" data-filter="all">all </span><span data-filter="1">category 1 </span><span data-filter="2">category 2 </span><span data-filter="3">category 3 </span></div>
            <div class="row filtr-container">
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="1, 3"><a href="https://source.unsplash.com/RLLR0oRz16Y/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/RLLR0oRz16Y/600x600.jpg" data-caption="<strong>Image description</strong><br><em>Lorem ipsum</em>"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item"
                    data-category="2"><a href="https://source.unsplash.com/vUNQaTtZeOo/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/vUNQaTtZeOo/600x600.jpg"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="1, 3"><a href="https://source.unsplash.com/ZbMJ5VLrpQ4/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/ZbMJ5VLrpQ4/600x600.jpg"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="2, 3"><a href="https://source.unsplash.com/HWwF4OnXAdM/1200x900.jpg"><img class="img-fluid" src="https://source.unsplash.com/HWwF4OnXAdM/600x600.jpg"></a></div>
            </div>
        </div>
    </section>
    <section class="py-5">
        <div class="container">
            <h1 class="text-center">MY GALLERY 2</h1>
            <p class="text-center">You can view instructions <a href="http://imagia-mu.com/DEV/BS/filterable-gallery/" target="_blank">here</a></p>
            <div class="filtr-controls"><span class="active" data-filter="all">all </span><span data-filter="1">category 1 </span><span data-filter="2">category 2 </span><span data-filter="3">category 3 </span></div>
            <div class="row filtr-container">
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="1, 3"><a href="https://source.unsplash.com/RLLR0oRz16Y/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/RLLR0oRz16Y/600x600.jpg" data-caption="<strong>Image description</strong><br><em>Lorem ipsum</em>"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item"
                    data-category="2"><a href="https://source.unsplash.com/vUNQaTtZeOo/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/vUNQaTtZeOo/600x600.jpg"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="1, 3"><a href="https://source.unsplash.com/ZbMJ5VLrpQ4/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/ZbMJ5VLrpQ4/600x600.jpg"></a></div>
                <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="2, 3"><a href="https://source.unsplash.com/HWwF4OnXAdM/1200x900.jpg"><img class="img-fluid" src="https://source.unsplash.com/HWwF4OnXAdM/600x600.jpg"></a></div>
            </div>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="/-Filterable-Gallery-with-Lightbox-BS4-.js"></script>
</body>

</html>
...