Как вставить галерею изображений JS в шаблон bootstrap, не нарушая стили CSS? - PullRequest
Новая
       16

Как вставить галерею изображений JS в шаблон bootstrap, не нарушая стили CSS?

0 голосов
/ 08 апреля 2020

Как вставить галерею изображений JS в шаблон bootstrap, не нарушая стили CSS? Есть хорошая галерея, которую я хотел бы добавить на мой сайт. Ставка, когда я это делаю, CSS шаблона bootstrap мешает CSS галереи. Идея состоит в том, чтобы поместить код галереи в следующий элемент div, чтобы открыть галерею, когда пользователь нажимает кнопку: 

<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
    <a href="#" class="unit-9">
        <div class="image" style="background-image: url('images/img_1.jpg');"></div>
        <div class="unit-9-content">
            <h2>Nice button which does nothing</h2>
            <span>More text</span>
        </div>
    </a>
</div>

Вот код галереи, который я собираюсь вставить: 

<div class="tz-gallery">
    <div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <a class="lightbox" href="../images/park.jpg">
                    <img src="../images/park.jpg" alt="Park">
                </a>
                <a class="lightbox" href="../images/bridge.jpg"> </a>
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
<script>
baguetteBox.run('.tz-gallery');
</script>

Вот стили шаблона bootstrap: 

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,700,900|Oswald:400,700">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/mediaelementplayer.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/fl-bigmug-line.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/style.css">

А вот стили галереи: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css">
<link rel="stylesheet" href="gallery-clean.css">

Как правильно все смешать? Мне не нужно вручную смешивать CSS файлы, не так ли? Большое спасибо заранее!

...