Is it possible to divide 1 image gallery on a page into 2 or multiple image galleries?

Question

I got the following piece of code:

img {
    object-fit: contain;
    width: 250px !important;
    height: 200px !important;
    border: 3px solid #555;
}

img.zoomable {
    object-fit: contain;
    width: 600px !important;
    height: 600px !important;
}

.portfolio .portfolio-item {
    margin-bottom: 30px;
}

.portfolio #portfolio-flters {
    padding: 0;
    margin: 0 auto 25px auto;
    list-style: none;
    text-align: center;
    background: #fff;
    border-radius: 50px;
    padding: 2px 15px;
}

.portfolio #portfolio-flters li {
    cursor: pointer;
    display: inline-block;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: #272829;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
    color: #0563bb;
}

.portfolio #portfolio-flters li:last-child {
    margin-right: 0;
}

.portfolio .portfolio-wrap {
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.portfolio .portfolio-wrap::before {
    content: "";
    background: rgba(255, 255, 255, 0.7);
    position: absolute;
    left: 30px;
    right: 30px;
    top: 30px;
    bottom: 30px;
    transition: all ease-in-out 0.3s;
    z-index: 2;
    opacity: 0;
}

.portfolio .portfolio-wrap .portfolio-info {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    z-index: 3;
    transition: all ease-in-out 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.portfolio .portfolio-wrap .portfolio-info::before {
    display: block;
    content: "";
    width: 48px;
    height: 48px;
    position: absolute;
    top: 35px;
    left: 35px;
    border-top: 3px solid #d7dce1;
    border-left: 3px solid #d7dce1;
    transition: all 0.5s ease 0s;
    z-index: 9994;
}

.portfolio .portfolio-wrap .portfolio-info::after {
    display: block;
    content: "";
    width: 48px;
    height: 48px;
    position: absolute;
    bottom: 35px;
    border-bottom: 3px solid #d7dce1;
    border-right: 3px solid #d7dce1;
    transition: all 0.5s ease 0s;
    z-index: 9994;
}

.portfolio .portfolio-item {
    max-width: 250px !important;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
    font-size: 20px;
    color: #45505b;
    font-weight: 600;
}

.portfolio .portfolio-wrap .portfolio-info p {
    color: #45505b;
    font-size: 14px;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
}

.portfolio .portfolio-wrap .portfolio-links {
    text-align: center;
    z-index: 4;
}

.portfolio .portfolio-wrap .portfolio-links a {
    color: #45505b;
    margin: 0 2px;
    font-size: 28px;
    display: inline-block;
    transition: 0.3s;
}

.portfolio .portfolio-wrap .portfolio-links a:hover {
    color: #148af9;
}

.portfolio .portfolio-wrap:hover::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info {
    opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info::before {
    top: 15px;
    left: 15px;
}

.portfolio .portfolio-wrap:hover .portfolio-info::after {
    bottom: 15px;
    right: 15px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<section id="portfolio" class="portfolio section-bg">
   <div class="container" data-aos="fade-up">
      <div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
         <div class="col-lg-4 col-md-6 portfolio-item filter-app">
            <div class="portfolio-wrap">
               <img src="assets/img/portfolio/portfolio-1.jpg">
               <div class="portfolio-info">
                  <div class="portfolio-links">
                  </div>
               </div>
            </div>
         </div>
         <div class="col-lg-4 col-md-6 portfolio-item filter-web">
            <div class="portfolio-wrap">
               <img src="assets/img/portfolio/portfolio-2.jpg">
               <div class="portfolio-info">
                  <div class="portfolio-links">
                  </div>
               </div>
            </div>
         </div>
         <div class="col-lg-4 col-md-6 portfolio-item filter-app">
            <div class="portfolio-wrap">
               <img src="assets/img/portfolio/portfolio-3.jpg">
               <div class="portfolio-info">
                  <div class="portfolio-links">
                  </div>
               </div>
            </div>
         </div>
         <div class="col-lg-4 col-md-6 portfolio-item filter-card">
            <div class="portfolio-wrap">
               <img src="assets/img/portfolio/portfolio-4.jpg">
               <div class="portfolio-info">
                  <div class="portfolio-links">
                     <a href="assets/img/portfolio/portfolio-4.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title=""><i class="bx bx-zoom-in"></i></a>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-lg-4 col-md-6 portfolio-item filter-web">
            <div class="portfolio-wrap">
               <img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid" alt="">
               <div class="portfolio-info">
                  <div class="portfolio-links">
                     <a href="assets/img/portfolio/portfolio-5.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title=""><i class="bx bx-zoom-in"></i></a>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-lg-4 col-md-6 portfolio-item filter-app">
            <div class="portfolio-wrap">
               <img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid" alt="">
               <div class="portfolio-info">
                  <div class="portfolio-links">
                     <a href="assets/img/portfolio/portfolio-6.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title=""><i class="bx bx-zoom-in"></i></a>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-lg-4 col-md-6 portfolio-item filter-card">
            <div class="portfolio-wrap">
               <img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid" alt="">
               <div class="portfolio-info">
                  <div class="portfolio-links">
                     <a href="assets/img/portfolio/portfolio-7.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title=""><i class="bx bx-zoom-in"></i></a>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-lg-4 col-md-6 portfolio-item filter-card">
            <div class="portfolio-wrap">
               <img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid" alt="">
               <div class="portfolio-info">
                  <div class="portfolio-links">
                     <a href="assets/img/portfolio/portfolio-8.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title=""><i class="bx bx-zoom-in"></i></a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

This is the gallery I want to seperate into 2 galleries.

This creates a nice image gallery where you can click on a picture and it zooms in once you have clicked.

enter image description here

This is when you've clicked the picture

The point is, when I click on an image it goes trough all 6 of the images. For example I only want to scroll to 3 of the images and then click on another picture and scroll trough those 3 of the other gallery.

I already tried making seperate divs and tried using the same code to replicate it but then it took all 12 pictures and scrolled trough them. How am I able to make these into seperate galleries?

Thanks in advance!

I already tried making seperate divs and tried using the same code to replicate it but then it took all 12 pictures and scrolled trough them. How am I able to make these into seperate galleries?

Also looked at multiple image galleries on one page

And

Modal image galleries with multiple images

But these aren't really what im looking for..

I'm still a little noob in front-end so please let me know if you need more information.

Is it possible to divide 1 image gallery on a page into 2 or multiple image galleries?

0 Answers0